Instead of installing In-Page on every page manually, you can also consider implementing In-Page using a tag manager like GTM. Using a tag manager allows you to dynamically implement In-Page. You can for example show or change the in-page widget shown depending on the platform the visitor is using. This article will guide you through the steps that you'll need to take to implement In-Page using a tag manager. In this article, we'll be using Google Tag Manager, but any other tag manager should suffice.
Before you start
Before you start adding tags to your tag manager it's important that you have all the resources and the environment ready to implement In-Page in one go. Below we've compiled a checklist that you should have checked off before continuing with this guide. You can use other articles on our Help Center for helping you with getting everything ready.
- Have Google Tag Manager installed on your website.
- Have a Google Account with access to your Tag Manager.
- Have an active In-Page in your GetFeedback Digital account.
- Have the In-Page Widget code ready.
- Have the In-Page Script ready.
- Have a code editor to edit some code.(Notepad++/Atom/Brackets/VisualStudioCode/SublimeText)
- Have an HTML element on the web page with an ID that can be used as an anchor.
- (optional) have jQuery available on your web page.
Placement of the In-Page
Normally when you install In-Page on your web page you'll add a <div> tag on your web page that acts as a container that the In-Page script can recognize for inserting the In-Page widget. The logic stays the same when you're implementing In-Page through a tag manager, the only difference is that we'll be inserting both the <div> container as well as the In-Page script using the tag manager.
Since we will be adding the In-Page <div> container programmatically with the tag manager, it's important that we have a reference anchor on the page that we can use for implementing. What this means is that we need to have an element that the tag manager can use for determining where the In-Page <div> container can be added in the DOM tree of the web page. The easiest way to do this is by adding an ID to the element to which you want to append the In-Page widget. For this example, we'll be using a <div> with the ID "usbl-inpage-anchor" that is placed in the footer of an article that you'll normally see on your customer support pages. Below you'll find the code for creating such a <div>.
<div id="usbl-inpage-anchor"></div>Adding In-Page in GTM
When you have your anchor ready it's time to add In-Page to your tag manager. We do this by adding 2 tags to tag manager. In-Page exists out of 2 parts: the Widget Code and the Script. The widget code is the placeholder <div> where the in-page widget will be injected. The In-Page script is the code that injects the In-Page widget in the container. Because of how In-Page works you'll always have 1 tag per In-page Widget Code and 1 In-Page tag per In-Page script. Ideally, you'll want to use 1 In-Page script per domain and use multiple In-Page widgets with that In-Page script.
First, we'll add the In-Page widget container in tag manager. To do so in GTM go to the main page and click on "Add Tag". In the tag selection screen, select "Custom HTML Tag". Using the Custom HTML Tag allows us to define our own tag.
In the first tag for adding the In-Page Widget container, we'll be adding a piece of JavaScript to searches for the In-Page anchor and appends the In-Page Widget container to that element. The easiest way to do this is by using a jQuery function, alternatively, you can use vanillaJS. Below you'll find examples of both ways.
<script>
$( "#usbl-inpage-anchor" ).append( "<div ub-in-page='585276d3876927434b237e89'></div>" );
</script><script>
var nodeDiv = document.createElement("div");
nodeDiv.setAttribute("ub-in-page", "585276d3876927434b237e89");
document.getElementById("usbl-inpage-anchor").appendChild(nodeDiv);
</script>When you've added the code to the tag you'll need to make sure the "Support document.write" option is enabled and that the tag is fired once per event. If you've done this you can move on and make sure the triggering options are set correctly. The triggering options specify when the tag should be 'fired' and the code in the tag is run. Since we're appending the In-Page widget container to an existing web page we'll need to set the 'Firing triggers' rules in such a way that the trigger only fires when the page is fully loaded. To do so we create a new trigger with the trigger type set to "Page View". You can add additional rules for the trigger but for now just leave the trigger set to fire on every Page View.
Finish the first tag by saving both the tag as well as the trigger. You can save the tag as "usbl-inpage-container-tag" and the tag as "usbl-allpages-trigger". If you're planning to add a lot of different In-Page widgets, it's good practice to use the GTM folder feature.
The second step is to add the In-Page script for injecting the In-Page widget into the In-Page widget container. Just like before you'll add a new tag using the "Custom HTML Tag" template. In this tag, you'll add the <script> snippet from the installation page of your In-Page Widget.
When you've added the In-Page script tag you'll need to set the triggering for the tag. Just like the In-Page container tag, we'll be setting the firing rule to trigger on every Page View. It's good practice to separate this trigger from the trigger we've made earlier.
Finish up the second tag by saving it following a similar naming convention that we used earlier for example "usbl-inpage-script-tag".
After saving the second tag we'll need to make a small adjustment to the settings of the first tag. What we'll need to do is set the Tag Sequencing. Tag Sequencing allows you to set a sequence of your tags. We need to enable this setting since the In-Page script code can only inject the In-Page widget when the In-Page container is already on the page. In the first tag go to Advanced Setting. In the Advanced Settings open the "Tag Sequencing" dropdown and add check the "Fire a tag after usbl-inpage-container-tag fired". After you've checked this setting an additional dropdown will appear where you can select a "Cleanup Tag". In the dropdown, you'll need to select the tag that has the In-Page script that is associated with the In-Page Widget container that you're editing. In our example that would be "usbl-inpage-container-tag". To finish up the settings part tick the checkbox saying "Don't fire usbl-inpage-script-tag if usbl-inpage-container-tag fails". Doing so makes sure we're not running code when the container is not available.
Save you tags and triggers and publish your workspace to see the results. If all went well the in-page widget should be added to your web page using Google Tag Manager.
Advanced Usage
Using a tag manager for implementing In-Page provides you with a lot of flexibility. Reason being that Google Tag Manager allows you to change In-Page widget on the fly or even change the widget based on custom triggers. How this could be implemented is totally dependant on your web page, like if you have data layer or store parameters in the URL. But to get you started we've made a short list of ideas:
- Changing the In-Page widget based on language
- Changing the In-Page widget based on platform
- Changing the In-Page widget based on browser
- Changing the In-Page widget based on customer type
- Hiding the In-Page widget based on language
We'll be adding more articles on using tag managers and GetFeedback Digital in the future to make sure you check our website regularly.