INFOnline Measurement Manager Integration via Google Tag Manager¶
Conditions and intended use¶
The INFOnline Measurement Manager can be integrated with the Google Tag Manager. The Google Tag Manager is used to manage tags on your website. Without editing the site code directly, you use the GTM user interface to add tags like the INFOnline Measurement Manager.
We offer an optimized solution to integrate the INFOnline Measurement Manager seamlessly with the Google Tag Manager, however, we still recommend to use the standard integration.
This exemplary guide will explain step by step how to integrate the INFOnline Measurement Manager with the Google Tag Manager on your website.
Prerequisites¶
- Relay client container (hosted by INFOnline or self-hosted)
- Registered domain service name as CNAME (hosted by INFOnline), AAA(A) (self-hosted) DNS entry
- Publisher site identifier provided by the INFOnline GmbH
- Google Tag Manager Account
Setting up required tags in Google Tag Manager¶
We are going to create one trigger, three variables, and three tags in the Google Tag Manager to integrate the INFOnline Measurement Manager on your website. All steps are necessary to integrate the INFOnline Measurement Manager via Google Tag Manager. However, the steps may differ depending on how the content is delivered by the customer (mobile or desktop). The path shown is the classic implementation of a customer with a mobile as well as a stationary website and with the associated site definition.
Create a custom variable for the device type¶
In your Google Tag Manager account, click on Variables
and then under User-Defined-Variables on New
to create a new variable. On the popup slide top left choose a meaningful name for the variable. We recommend to use device
as name. Then click on Choose a variable type to begin setup. Please select Custom JavaScript and paste following code to the code input
1 2 3 |
|
'mobile'
(device width < 768px) or 'desktop'
(device width>= 768px) according to the media query result. When done, click "save".
Attention
The boundary of the device distinction between mobile and desktop has been deliberately drawn according to the general specifications of responsive design. It is a recommendation but the customer can also use their own value here. However, he must be aware that he then does not comply with the standard.
Attention
The determination of the device type by checking the viewport is problematic because on mobile devices the above code will return desktop on mobile devices like tablets or smartphones with HDR support (e.g. iPad) when used in portrait mode. So the customer has to decide whether to support all types of mobile devices. Moreover, there is always a possibility of mismatch.
Create a lookup table variable for the domain service name¶
To add a lookup table variable for the domain service name of the service platform please click on Variables
and then under User-Defined-Variables on New
to create a new variable. On the popup slide top left choose a meaningful name for the variable. We recommend to use dsn
as name. Then click on Choose a variable type to begin setup. Please select Lookup Table
as Variable type and choose device
as Input Variable. Add the following rows with the specific domain service name of the service platform (CNAME) for mobile
and desktop
input and save the setting (see screenshot above for more details).
Input | Output | Example |
---|---|---|
mobile | <mobile domain service name> |
data-acbd18db4c.example.com |
desktop | <desktop domain service name> |
data-dcba15efab.example.com |
The dsn
will be used later in the dsn
macro in all tags.
Create a lookup table variable for the sample type of the qds module¶
To add a lookup table variable for the qds sample type, please click on Variables
and then under User-Defined-Variables on New
to create a new variable. On the popup slide top left choose a meaningful name for the variable. We recommend to use sampleType
as name. Then click on Choose a variable type to begin setup. Please select Lookup Table
as Variable type and choose device
as Input Variable. Add the following rows with the sampleType
for mobile
and desktop
input and save setting (see screenshot above for more details).
Input | Output |
---|---|
mobile | mo |
desktop | in |
Create the tag to load the Measurement Manager¶
In your Google Tag Manager account, click on Tags
and then on New
to create a new tag.
Give your tag a meaningful name and then click on Tag Configuration
.
You need to select Custom HTML
from the list.
Now we need to paste the following code into the HTML
editor:
1 2 3 |
|
Info
The dsn
macro should be replaced with the AAA(A) or CNAME DNS entry of the service platform (relay client) from the lookup table specified as variable in the steps above.
It should look like this now:
Lastly, we need to add a trigger, that will fire the tag when loading the website. To do this, click the Triggering
area and select the Page View
trigger type (All Pages).
Now we can save the first tag in the Google Tag Manager.
Create the tag to execute the configure and pageview commands¶
After creating the first tag to load the INFOnline Measurement Manager script, we now need to create another tag to execute the configure
and the pageview
commands.
As with the first step, we need to create a new tag, select Custom HTML
from the list and paste the following code into the HTML
editor:
1 2 3 4 |
|
Info
Please note that this is just an exemplary integration of commands. For the full list of available commands and the associated parameters, refer to the standard integration.
Now this is what it should look like:
Lastly, we need to add a trigger, that will fire the tag when loading the website. To do this, click the Triggering
area and select the Page View
trigger type (All Pages).
Now we can save the second tag in the Google Tag Manager.
Create the tag to trigger the qds module activation for the agof ddf¶
For the activation of the QDS module we have to create another tag which will be triggered by our custom trigger Content Pages
. Like the other tags we go to Tags
and click the New
button. Use Custom HTML
as type and paste following code to the input
1 2 3 |
|
Now this what it should look like:
Lastly we need to add a trigger, that will fire the tag when loading the website. For this click the Triggering
area and select the Page View
trigger type (All Pages).
Publishing and Integrating the Google Tag Manager¶
After creating, editing and saving the two tags to load the INFOnline Measurement Manager and execute commands, it is time to publish our container.
You need to publish the container each time you make changes to the tags in order for them to take effect. To do this, click the Submit
button on the right side of your workspace screen in the Google Tag Manager.
If you haven't already done so, you need to integrate the Google Tag Manager into your website. To do this, please click on the container id (GTM-XXXX) on the right side of your workspace screen in the Google Tag Manager. A popup will show up with code snippets and instructions. Please follow the instructions to integrate the code snippets into your website.
Different forms of integration¶
The above described integration of the Google Tag Manager is just exemplary. There are more ways to integrate it into your websites, especially by separating or using different commands (refer to the standard integration for all available commands).
Please note that in any case you have to load the bootstrapping script with the Google Tag Manager when loading the website (as described in the first step). It will load the best version of the INFOnline Measurement Manager for the current requirements and is therefore always needed.
You can split the commands into separate tags in the Google Tag Manager, or use different commands.
Instead of using a single tag for the configure
and the pageview
command, as we did in step two, we could split them into two tags by using two Custom HTML
elements - one for each command:
1 2 3 |
|
1 2 3 |
|
Attention
Please note that the configure
command will have to be executed only once per page load.
If you have a single page application where you load the website once and subsequent changes of the view are handled internally by the framework without reloading the website, you will need to trigger the pageview
command each time a new view is displayed (Google recommends the History change trigger
for this).
This does not apply to "standard" server-side rendered website, where each change of the view means a new request. There, you still will need to trigger the configure
and pageview
commands for each website load.