Google Tag Manager integration

22 min

Note

This topic is for administrators and developers with administration access rights in Optimizely Campaign.

When using Google Tag Manager (GTM) to implement tracking codes and conversion pixels on your website, you can connect it with post-click tracking. This lets you set up a data transfer to Optimizely Campaign to collect data of recipients who have been sent from a mailing to your website by clicking a link. You can use this data to segment recipients according to actions on your website and create precisely tailored target groups.

To transfer the action data to Optimizely Campaign, you have to configure a cookie and the data transfer in Google Tag Manager.

To start the data transfer, finally publish the changes in the Google Tag Manager workspace.

Prerequisites

Implement Google Tag Manager on your website. See Enhanced Ecommerce (UA) Developer Guide.

Set up post-click tracking. Let customer support know that you want to use post-click tracking with Google Tag Manager.

Create tracking pixels with and without cookie. If no cookie is created or tracking is disabled, the tracking pixel without cookie (user event tracking) is used.

Note

To access the data in the data layer, see the configuration steps and notes in the Enhanced Ecommerce (UA) Developer Guide.

google-tag-manager-integration.mdxConfiguring the cookie

To configure the cookie, create a tag in Google Tag Manager as well as associated triggers and variables.

Creating a tag

A cookie is required to store action data on your website and transfer it to Optimizely Campaign. In Google Tag Manager, you use a tag to create the cookie and embed it on your website. Do the following:

Select the container in which you want to configure the cookie.

Click Add a new tag.

Image: Adding a new tag

Enter a name for the tag, for example Cookie-Webshop-Home.

Image: Entering a tag name

In the Tag Configuration area, click Edit

.

Image: Tag configuration

Select the Custom HTML tag type.

Image: Selecting custom HTML

Enter the following script into the input field:

Tip

The following script represents an exemplary implementation. For example, you can extend the cookie to include and store the UID (unique identifier).

<script>  var cookieName = "o4oclClientId"; // Gives the cookie a name. Replace "ClientId" with your client ID.  var cookieValue = "true"; // Assigns a value to the cookie.  var expirationTime = 2592000; // Defines the expiration time of the cookie (30 days).// Converts the expiration time into milliseconds.  expirationTime = expirationTime * 1000;  var date = new Date();  var dateTimeNow = date.getTime();// Sets the expiration time (current time + one month).  date.setTime(dateTimeNow + expirationTime);// Converts the milliseconds into a UTC time string.  var date = date.toUTCString();// Sets the cookie for all subdomains.  document.cookie = cookieName+"="+cookieValue+"; expires="+date+"; path=/; domain=."+location.hostname.replace(/^www\\./i, "");</script>

Click Save.

Creating a trigger

Define when the tag is triggered. You can configure individual triggers, for example for the actions opened detailed view of a product, added a product to the shopping cart, removed a product from the shopping cart, bought a product. Do the following:

Note

At least one trigger must be assigned to each tag to be triggered.

In the left menu bar, click Tags.

Image: Tags menu item

Select the created cookie tag.

In the Trigger area, click Edit

.

To add a new trigger, click Add

.

Image: Adding a trigger

Enter a name for the trigger, for example Trigger AddToCart.

Image: Trigger name

In the Trigger Configuration area, click Edit

.

Select a trigger type, for example Custom event trigger.

Tip

For information about the different trigger types, see www.support.google.com.

Click Save.

In the tag's window, click Save.

Creating a variable

To implement the cookie, you have to create a user-defined variable that references Optimizely Campaign. Do the following:

In the left menu bar, click Variables.

Image: Variables menu item

In the User-Definded Variables area, click New.

Image: Creating a new variable

Enter uid in Episerver Campaign Cookie as name for the variable.

Click Edit

.

Bild: Variable bearbeiten

Click 1st Party Cookie.

Image: Select 1st Party Cookie variable type

Enter o4oclClient-ID in the Cookie Name field. Replace Client-ID with your client ID, for example o4ocl0123456789.

Image: Entering cookie name

Click Save.

google-tag-manager-integration.mdxConfiguring the data transfer

To configure the data transfer, create a tag in the Google Tag Manager as well as associated triggers and variables.

Creating a tag

To transfer the action data from your website to Optimizely as post-click data, you have to create a tag. The tag accesses the collected data of the previously created cookie. Do the following:

In the left menu bar, click Tags.

Image: Tags menu item

Enter a name for the tag, for example Tracking-Webshop-Home.

Image: Tag name

In the Tag Configuration area, click Edit

.

Image: Tag configuration

Select the Custom HTML tag type.

Image: Select Custom HTML

Enter the following script into the input field:

Tip

The following script represents an exemplary implementation. Depending on how you collect and store customer data, the implementation may differ.

</script>  var campaignCookie = {{uid in Episerver Campaign Cookie}}; // Variable that stores the cookie name.  var uid = {{uid}}; // Variable for identifying the user via shop login, GTM data layer and so on  var products = {{ecommerce add products}}; // Variable for the information of the GTM data layer.  var standardBasicUrl = "https://domain.tld/pc?mg=ClientID"; // Tracking URL including the client ID. Replace "ClientId" with your client ID.  var userEventBasicUrl = "https://domain.tld/pc?type=userEvent&authToken=XXX-YYY-ZZZ"; // Tracking URL including authentication token.  var service = "serviceName_ClientId"; // Post-click tracking service used in Optimizely Campaign. Replace "ClientId" with your client ID.// Queries whether a cookie is set on the website. If not, user event tracking is used.  if (typeof campaignCookie !== "undefined") {    var basicUrl = standardBasicUrl      + "&bi=0"      + "&service=" + service;  } else if (typeof uid !== "undefined") {    var basicUrl = userEventBasicUrl      + "&bi=0"      + "&recipientId=" + uid      + "&service=" + service;  }// Extracts the data in the GTM data layer and merges them into a URL.  if (typeof basicUrl !== "undefined" && typeof products !== "undefined") {    for (var i = 0; i < products.length; i++) {      var product = products[i];      if (typeof product !== "undefined") {        var url = basicUrl          + "&fvalue1="+ product.price          + "&fvalue2="+ product.quantity          + "&gvalue1="+ product.name          + "&gvalue2="+ product.id          + "&gvalue3="+ product.brand          + "&gvalue4="+ product.category          + "&gvalue5="+ product.variant          + "&gvalue10="+ Date.now();        var scriptElement = document.createElement("script");            scriptElement.src = url;            document.body.appendChild(scriptElement);      }    }  }</script>

Click Save.

Creating a trigger

Note

At least one trigger must be assigned to each tag to be triggered.

In the left menu bar, click Tags.

Image: Tags menu item

Select the created cookie tag.

In the Trigger area, click Edit

.

To add a new trigger, click Add

.

Image: Adding a trigger

Enter a name for the trigger, for example Trigger AddToCart.

Image: Trigger name

In the Trigger Configuration area, click Edit

.

Select a trigger type, for example Custom event trigger.

Tip

For information about the different trigger types, see www.support.google.com.

Click Save.

In the tag's window, click Save.

Creating variables

To transfer data to Optimizely Campaign, you have to create user-defined variables for the data in the GTM data layer and for user identification from other sources (shop login, and so on).

GTM data layer

In the left menu bar, click Variables.

Image: Variables menu item

In the User-Definded Variables area, click New.

Image: Creating a new variable

Enter ecommerce add products as name for the variable.

Click Edit

.

Image: Editing variables

Click Data Layer Variable.

Image: Selecting the variable type

In the Data Layer Variable Name field, enter the name that refers to the GTM data layer, for example ecommerce.add.products.

Image: Entering the variable name

Click Save.

google-tag-manager-integration.mdxSetting up the data layer on your website

To enable the variables to receive data and transmit it to Epi, your website requires a data layer. See the Enhanced Ecommerce (UA) Developer Guide.

The following script shows an example integration of a data layer for collecting user data when products are added to the shopping cart. Insert the script before the GTM code in the HTML header of your website.

</script>window.dataLayer = window.dataLayer || []; // Creates the data layer object.dataLayer.push({  'event': 'addToCart',  'ecommerce': {    'currencyCode': 'EUR',    'add': {      'products': [{        'name': 'ProductName',        'id': '12345',        'price': '29.99',        'brand': 'BrandName',        'category': 'Category',        'variant': 'Color',        'quantity': 1      }]    }  }});</script>

User idetification

In the left menu bar, click Variables.

Image: Variables menu item

In the User-Definded Variables area, click New.

Image: Creating a new variable

Enter uid as name for the variable.

Click Edit

.

Image: Editing the variable

Click Custom JavaScript.

Image: Select variable type

Enter the following JavaScript code into the input field:

function() {  var uid = new URLSearchParams(window.location.search).get('uid');  if (uid) {    return uid;  } else{    return;  }}

Click Save.

Google Tag Manager integration

Prerequisites

google-tag-manager-integration.mdx﻿Configuring the cookie

Creating a tag

Creating a trigger

Creating a variable

google-tag-manager-integration.mdx﻿Configuring the data transfer

Creating a tag

Creating a trigger

Creating variables

GTM data layer

google-tag-manager-integration.mdx﻿Setting up the data layer on your website

User idetification

google-tag-manager-integration.mdxConfiguring the cookie

google-tag-manager-integration.mdxConfiguring the data transfer

google-tag-manager-integration.mdxSetting up the data layer on your website