Skip to content

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

GTM device type variable

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
function() {
  return window.matchMedia("(max-width: 767px)").matches === true ? 'mobile' : 'desktop';
}
The above code will return the device type '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

GTM dsn lookup table

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

GTM sampleType lookup table

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.

Google Tag Manager Integration - 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
<script type='text/javascript'>
  !function(e,s,n,t,m,a,c){e.IOMmGlobalObject=n,e.IOMm=e.IOMm||function(){(e.IOMm.q=e.IOMm.q||[]).push(arguments)},e.IOMm.src=t,m=s.createElement("script"),c="noModule"in s.createElement("script")&&!/Edge/.test(e.navigator.userAgent),e.IOMm.esm=c,m.src=c?t.replace("es5","es6"):t.replace("es6","es5"),s.head.appendChild(m)}(window,document,"IOMm","//{{dsn}}/iomm/latest/manager/base/es6/bundle.js");
</script>
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:

Google Tag Manager Integration - HTML Code

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).

Google Tag Manager Integration - Triggering

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
<script type='text/javascript'>
  IOMm('configure', { st: 'foo' dn: '{{dsn}}' });
  IOMm('pageview', { cp: 'bar', co: 'baz' });
</script>
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:

Google Tag Manager Integration - HTML Code

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).

Google Tag Manager Integration - Triggering

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
<script type="text/javascript">
  IOMm('3p', 'qds', '{{sampleType}}');
</script>

Now this what it should look like:

Google Tag Manager Integration - QDS module activation

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).

Google Tag Manager Integration - Triggering

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.

Google Tag Manager Integration - Code Snippet

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
<script type='text/javascript'>
  IOMm('configure', { st: 'foo' dn: '{{dsn}}' });
</script>
1
2
3
<script type='text/javascript'>
  IOMm('pageview', { cp: 'bar', co: '{{dsn}}' });
</script>
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.


Last update: January 7, 2022