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

function() {
  return window.matchMedia("(max-width: 767px)").matches === true ? 'mobile' : 'desktop';
}

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

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

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

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

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

<script type='text/javascript'>
  IOMm('configure', { st: 'foo', dn: '{{dsn}}', mh: 5 });
  IOMm('pageview', { cp: 'bar', co: 'baz' });
</script>

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

<script type="text/javascript">
  IOMm('3p', 'qds', '{{sampleType}}');
</script>

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

<script type='text/javascript'>
  IOMm('configure', { st: 'foo', dn: '{{dsn}}', mh: 5 });
</script>

1
2
3

<script type='text/javascript'>
  IOMm('pageview', { cp: 'bar', co: '{{dsn}}' });
</script>

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.