Google Tag Manager integration

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 Tracking method that measures and analyzes the click path that site users follow after clicking a link in an email.. 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.

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

Configuring the cookie

To configure the cookie Files used by your browser on a website, or by a third party, and can range from very small to large text files. Cookies are not harmful to your computer and are mostly used to facilitate visitors’ access to functions, such as storing visitors choices. Many companies use cookies to track website visitors, personalize content, track leads and ultimately sell more products and services. To protect visitors’ privacy when visiting different websites, an EU directive states that website owners are responsible for informing all website visitors about which cookies are used and what they are used for. Whether first-party or third-party cookies are used on a website, each visitor is prompted to give their consent the first time they use the website, if a cookie may be placed on the computer, mobile phone or other terminal equipment., 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:

Sign in to Google Tag Manager.
Select the container in which you want to configure the cookie.
Click Add a new tag.
Enter a name for the tag, for example Cookie-Webshop-Home.
In the Tag Configuration area, click Edit .
Select the Custom HTML tag type.

Enter the following script into the input field:

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:

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

In the left menu bar, click Tags.
Select the created cookie tag.
In the Trigger area, click Edit .
To add a new trigger, click Add .
Enter a name for the trigger, for example Trigger AddToCart.
In the Trigger Configuration area, click Edit .
Select a trigger type, for example Custom event trigger.
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.
In the User-Definded Variables area, click New.
Enter uid in Episerver Campaign Cookie as name for the variable.
Click Edit .
Click 1st Party Cookie.
Enter o4oclClient-ID in the Cookie Name field. Replace Client-ID with your client ID, for example o4ocl0123456789.
Click Save.

Configuring 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.
Enter a name for the tag, for example Tracking-Webshop-Home.
In the Tag Configuration area, click Edit .
Select the Custom HTML tag type.

Enter the following script into the input field:

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

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:

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

In the left menu bar, click Tags.
Select the created cookie tag.
In the Trigger area, click Edit .
To add a new trigger, click Add .
Enter a name for the trigger, for example Trigger AddToCart.
In the Trigger Configuration area, click Edit .
Select a trigger type, for example Custom event trigger.
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.
In the User-Definded Variables area, click New.
Enter ecommerce add products as name for the variable.
Click Edit .
Click Data Layer Variable.
In the Data Layer Variable Name field, enter the name that refers to the GTM data layer, for example ecommerce.add.products.
Click Save.

Setting 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.
In the User-Definded Variables area, click New.
Enter uid as name for the variable.
Click Edit .
Click Custom JavaScript.

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.

In this topic