---
title: Google Tag Manager integration
slug: campaign/docs/google-tag-manager-integration
createdAt: 2026-07-20T15:45:24.445Z
---

:::hint{type="info"}
**Note**

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

When using [Google Tag Manager](https://www.google.com/intl/de/tagmanager/) (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](docId\:fyUCvFswwt7cmTBr2k8Nk).

To transfer the action data to Optimizely Campaign, you have to configure a [cookie](docId\:sJk7YDf5-QZoXlWpOakh2) and the [data transfer](docId\:sJk7YDf5-QZoXlWpOakh2) 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](https://developers.google.com/tag-manager/enhanced-ecommerce).
- Set up [post-click tracking](docId\:jUFEVph0D8Uog1OGwLVgu). Let [customer support](docId\:ZWe1T3UPz3JW6_4mc76qV) know that you want to use post-click tracking with Google Tag Manager.
- Create [tracking pixels](docId\:jUFEVph0D8Uog1OGwLVgu) with and without cookie. If no cookie is created or tracking is disabled, the tracking pixel without cookie (user event tracking) is used.

:::hint{type="info"}
**Note**

To access the data in the data layer, see the configuration steps and notes in the [Enhanced Ecommerce (UA) Developer Guide](https://developers.google.com/tag-manager/enhanced-ecommerce).
:::

## [google-tag-manager-integration.mdx](docId\:sJk7YDf5-QZoXlWpOakh2)Configuring 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:

1. Sign in to Google Tag Manager.
2. Select the container in which you want to configure the cookie.
3. Click **Add a new tag**.

   ![Image: Adding a new tag](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/GAIqDcCFJu_SHrJ5WP5XS-20260720-145155.png "Image: Adding a new tag")
4. Enter a name for the tag, for example *Cookie-Webshop-Home*.

   ![Image: Entering a tag name](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/hQXl8gDwLmZcTPIFZFhvr-20260720-145155.png "Image: Entering a tag name")
5. In the **Tag Configuration** area, click **Edit** ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/RCWGUbE1ZPAPRNTjKsTHO-20260720-145155.png).

   ![Image: Tag configuration](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/ovq1c4gaBbBlldyayA7dy-20260720-145155.png "Image: Tag configuration")
6. Select the **Custom HTML** tag type.

   ![Image: Selecting custom HTML](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/DDTg9GR4OTC5qV72xGhCh-20260720-145155.png "Image: Selecting custom HTML")
7. Enter the following script into the input field:

   :::hint{type="info"}
   **Tip**

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

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

8. 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:

:::hint{type="info"}
**Note**

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

1. In the left menu bar, click **Tags**.

   ![Image: Tags menu item](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/5FGmXDioiafeRXwt2mLWo-20260720-145155.png "Image: Tags menu item")
2. Select the created cookie tag.
3. In the **Trigger** area, click **Edit** ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/oOTS6MWVND0_MsG9patp1-20260720-145155.png).
4. To add a new trigger, click **Add** ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/S1e4E3SScOTUI286PsJ0v-20260720-145155.png).

   ![Image: Adding a trigger](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/_ucGDPEzM99qWcc3OK0Q6-20260720-145155.png "Image: Adding a trigger")
5. Enter a name for the trigger, for example *Trigger AddToCart*.

   ![Image: Trigger name](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/GcPEOJPkVgiMgOjonqV2d-20260720-145155.png "Image: Trigger name")
6. In the **Trigger Configuration** area, click **Edit** ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/oOTS6MWVND0_MsG9patp1-20260720-145155.png).
7. Select a trigger type, for example *Custom event trigger*.

   :::hint{type="info"}
   **Tip**

   For information about the different trigger types, see [www.support.google.com](https://support.google.com/tagmanager/topic/7679108?hl=en).
   :::
8. Click **Save**.
9. 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:

1. In the left menu bar, click **Variables**.

   ![Image: Variables menu item](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/rCMiFPoik9uxFi5bz63UU-20260720-145155.png "Image: Variables menu item")
2. In the **User-Definded Variables** area, click **New**.

   ![Image: Creating a new variable](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/glRvpSJIHMaab7ZzrBPI6-20260720-145155.png "Image: Creating a new variable")
3. Enter *uid in Episerver Campaign Cookie* as name for the variable.
4. Click **Edit** ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/oOTS6MWVND0_MsG9patp1-20260720-145155.png).

   ![Bild: Variable bearbeiten](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/QwFay2XkEBp0kRU-GAxLT-20260720-145155.png "Bild: Variable bearbeiten")
5. Click **1st Party Cookie**.

   ![Image: Select 1st Party Cookie variable type](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/qJZmkKnbjzWHh-v3mXrpp-20260720-145155.png "Image: Select 1st Party Cookie variable type")
6. Enter *o4oclClient-ID* in the **Cookie Name** field. Replace *Client-ID* with your client ID, for example *o4ocl0123456789*.

   ![Image: Entering cookie name](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/LmnLPZqQDttGN9tR6WM7D-20260720-145155.png "Image: Entering cookie name")
7. Click **Save**.

## [google-tag-manager-integration.mdx](docId\:sJk7YDf5-QZoXlWpOakh2)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:

1. In the left menu bar, click **Tags**.

   ![Image: Tags menu item](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/5FGmXDioiafeRXwt2mLWo-20260720-145155.png "Image: Tags menu item")
2. Enter a name for the tag, for example *Tracking-Webshop-Home*.

   ![Image: Tag name](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/q_Aw0TT5oDCYun1gzMe_2-20260720-145155.png "Image: Tag name")
3. In the **Tag Configuration** area, click **Edit** ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/oOTS6MWVND0_MsG9patp1-20260720-145155.png).

   ![Image: Tag configuration](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/MMrkwAFhejjnzDIMyiQbz-20260720-145156.png "Image: Tag configuration")
4. Select the **Custom HTML** tag type.

   ![Image: Select Custom HTML](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/a83CmpnV0R9crX_WzKp0d-20260720-145156.png "Image: Select Custom HTML")
5. Enter the following script into the input field:

   :::hint{type="info"}
   **Tip**

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

```javascript
</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>
```

6. 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:

:::hint{type="info"}
**Note**

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

1. In the left menu bar, click **Tags**.

   ![Image: Tags menu item](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/5FGmXDioiafeRXwt2mLWo-20260720-145155.png "Image: Tags menu item")
2. Select the created cookie tag.
3. In the **Trigger** area, click **Edit** ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/oOTS6MWVND0_MsG9patp1-20260720-145155.png).
4. To add a new trigger, click **Add** ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/S1e4E3SScOTUI286PsJ0v-20260720-145155.png).

   ![Image: Adding a trigger](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/qIXy1Sn9MelUD5dbjmct6-20260720-145156.png "Image: Adding a trigger")
5. Enter a name for the trigger, for example *Trigger AddToCart*.

   ![Image: Trigger name](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/GcPEOJPkVgiMgOjonqV2d-20260720-145155.png "Image: Trigger name")
6. In the **Trigger Configuration** area, click **Edit** ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/oOTS6MWVND0_MsG9patp1-20260720-145155.png).
7. Select a trigger type, for example *Custom event trigger*.

   :::hint{type="info"}
   **Tip**

   For information about the different trigger types, see [www.support.google.com](https://support.google.com/tagmanager/topic/7679108?hl=en).
   :::
8. Click **Save**.
9. 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

1. In the left menu bar, click **Variables**.

   ![Image: Variables menu item](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/rCMiFPoik9uxFi5bz63UU-20260720-145155.png "Image: Variables menu item")
2. In the **User-Definded Variables** area, click **New**.

   ![Image: Creating a new variable](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/glRvpSJIHMaab7ZzrBPI6-20260720-145155.png "Image: Creating a new variable")
3. Enter *ecommerce add products* as name for the variable.
4. Click **Edit** ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/oOTS6MWVND0_MsG9patp1-20260720-145155.png).

   ![Image: Editing variables](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/EC0dKdJVuMBZ86wDX9ACM-20260720-145156.png "Image: Editing variables")
5. Click **Data Layer Variable**.

   ![Image: Selecting the variable type](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/BPgea3zpxHSvk_W6mwezS-20260720-145156.png "Image: Selecting the variable type")
6. In the **Data Layer Variable Name** field, enter the name that refers to the [GTM data layer](docId\:sJk7YDf5-QZoXlWpOakh2), for example *ecommerce.add.products*.

   ![Image: Entering the variable name](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/cjsBs1vELZr3aEeKU49a7-20260720-145156.png "Image: Entering the variable name")
7. Click **Save**.

### [google-tag-manager-integration.mdx](docId\:sJk7YDf5-QZoXlWpOakh2)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](https://developers.google.com/tag-manager/enhanced-ecommerce).

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.

```javascript
</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

1. In the left menu bar, click **Variables**.

   ![Image: Variables menu item](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/rCMiFPoik9uxFi5bz63UU-20260720-145155.png "Image: Variables menu item")
2. In the **User-Definded Variables** area, click **New**.

   ![Image: Creating a new variable](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/glRvpSJIHMaab7ZzrBPI6-20260720-145155.png "Image: Creating a new variable")
3. Enter *uid* as name for the variable.
4. Click **Edit** ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/oOTS6MWVND0_MsG9patp1-20260720-145155.png).

   ![Image: Editing the variable](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/kn-0Y-Le6Fc3YcbcGXEqv-20260720-145156.png "Image: Editing the variable")
5. Click **Custom JavaScript**.

   ![Image: Select variable type](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/a-GCWkiw_qPTnQs9z6Dut-20260720-145156.png "Image: Select variable type")
6. Enter the following JavaScript code into the input field:

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

7. Click **Save**.