Google Tag Manager (GTM)

The Data Layer

This guide assumes you have basic familiarity with Google Tag Manager (GTM) and the ability to implement a "data layer" on your website which will be used to store the product and cart specific data that is sent to Rejoiner.

Please see Google Developer Guide for details about the "data layer" and how it can be implemented on your website.

Enhanced Ecommerce

Rejoiner recommends implementing a data layer using Google's Enhanced Ecommerce (UA) Developer Guide because this template provides most of the data necessary to fully support Rejoiner campaigns, while additionally enabling Universal Analytics Enhanced Ecommerce features in your Google Analytics account.

The code in this guide makes use of data layer variables based on the Google Enhanced Ecommerce (EE) format. This includes:

The "detail" object (for product pages)
The "checkout" object (for cart and checkout pages)
The "add" and "remove" objects (for cart activity)
The "purchase" object (for the conversion/purchase page)

Additional product data

In addition, Rejoiner can make use of two additional data points, which are not part of the standard EE format.

These are the productImage and productUrl values.

These values are necessary in order to show dynamic product images, based on the products the individual customer was actually viewing or adding to their cart, and to link the customer back to these specific products.

Additional events

In order to trigger Rejoiner tags to track when your customers view products or make a purchase, you can add some additional events to your data layer to trigger these tags.

This is the productView and conversion events.

Product View Event

When pushing to your data layer for the Product Detail Impressions object, simply include an event key on the ecommerce object with a value of productView.

So the structure of this object, would look something like this:

<script>
  dataLayer.push({
    'ecommerce': {
      'event': 'productView',
      'detail': {
        'products': [ ... ]
      }
    }
  });
</script>

Conversion Event

When pushing to your data layer for the Purchases object, simply include an event key on the ecommerce object with a value of conversion.

So the structure of this object, would look something like this:

<script>
  dataLayer.push({
    'ecommerce': {
      'event': 'conversion',
      'purchase': {
        'actionField': { ... },
        'products': [ ... ]
      }
    }
  });
</script>

Data Layer Variables

Once you have implemented an EE based data layer on your website, it will be necessary to create data layer variables in GTM. To support the tags as implemented in this guide, you will need to create six data layer variables.

Data Layer Variables can be created by following these steps:

Click Variables.
Under User-Defined Variables, click New.
Click Variable Configuration and select Data Layer Variable as the variable type.
In the Data Layer Variable Name field, enter the name of the variable as it appears in the data layer, using dot notation.
Save the variable.

Repeat this process for these six variables:

ecommerce.detail.products
ecommerce.checkout.products
ecommerce.purchase.actionField
ecommerce.purchase.products
ecommerce.add.products
ecommerce.remove.products

You can name the variables anything you want, but we recommend that you name them exactly the same as the variable name itself, for ease of reference. That is the naming convention used in the code provided in this guide.

Triggers

The next step is to create triggers for when each of the Rejoiner tags should be fired on the page. Our base tag is fired on all pages, and additional tags are fired on specific events that occur when data is pushed into your data layer.

Triggers can be created by following these steps:

Click Triggers > New.
Click Trigger Configuration.
Select the trigger type.
Save the trigger.

You will need to repeat this process for these six triggers:

All Pages

Select Page View trigger type.
This trigger fires on: All Page Views

Product Pages

Select Custom Event trigger type.
Event name: productView

Cart/Checkout Pages

Select Custom Event trigger type.
Event name: checkout

Add to Cart

Select Custom Event trigger type.
Event name: addToCart

Remove from Cart

Select Custom Event trigger type.
Event name: removeFromCart

Conversion Page

Select Custom Event trigger type.
Event name: conversion

Tags

The last step is to create tags to execute the code when the triggers are activated and submit the data from your data layer variables to Rejoiner.

Tags can be created by following these steps:

Click Tags > New.
Click Tag Configuration and select Custom HTML.
Select the tag code provided below and paste it into the HTML field..
Save the tag.

You will need to repeat this process for these six tags:

Base Tag

Trigger: All Pages Code:

<script>
  var _rejoiner = _rejoiner || [];
  _rejoiner.push(['setAccount', '{{ YOUR SITE ID }}']);
  _rejoiner.push(['setDomain', '{{ YOUR SITE DOMAIN }}']);

  (function() {
      var s = document.createElement('script');
      s.type = 'text/javascript';
      s.async = true;
      s.src = 'https://cdn.rejoiner.com/js/v4/rj2.lib.js';
      var x = document.getElementsByTagName('script')[0];
      x.parentNode.insertBefore(s, x);
  })();
</script>

Product View Tag

Trigger: Product Pages Code:

<script>
  var _rejoiner = _rejoiner || [];

  {{ecommerce.detail.products}}.forEach(function(product) {
    _rejoiner.push(['trackProductView', {
      product_id: product.id,
      name: product.name,
      price: Math.round(100 * product.price),
      image_url: product.productImage,   
      product_url: product.productUrl,
    }]);
  }); 
</script>

Cart Data Tag

Trigger: Cart/Checkout Pages Code:

<script>
var _rejoiner = _rejoiner || [];

var cartData = {
  cart_value: 0,
  cart_item_count: 0,
};

var cartItems = {{ecommerce.checkout.products}};
if (cartItems && cartItems.length) {
  cartItems.forEach(function(product) {
    cartData.cart_item_count += product.quantity;

    var productPriceInCents = Math.round(100 * product.price);
    var productQtyPrice = productPriceInCents * product.quantity;
    cartData.cart_value += productQtyPrice;

    _rejoiner.push(['setCartItem', {
      product_id: product.id,
      name: product.name,
      category: [].concat(product.category),
      price: productPriceInCents,
      product_url: product.productUrl,
      image_url: product.productImage,
      item_qty: product.quantity,
      qty_price: productQtyPrice,
    }]);
  });
}

_rejoiner.push(['setCartData', cartData]);
</script>

Add to Cart Tag

Trigger: Add to Cart Code:

<script>
var _rejoiner = _rejoiner || [];

var addedProducts = {{ecommerce.add.products}};
if (addedProducts && addedProducts.length) {
  addedProducts.forEach(function (product) {
    var productPriceInCents = Math.round(100 * product.price);

    _rejoiner.push(['setCartItem', {
      product_id: product.id,
      name: product.name,
      category: [product.category],
      price: productPriceInCents,
      product_url: product.productUrl,
      image_url: product.productImage,
      item_qty: product.quantity,
      qty_price: productPriceInCents * product.quantity,
    }]);
  });
}
</script>

Remove from Cart Tag

Trigger: Remove from Cart Code:

<script>
var _rejoiner = _rejoiner || [];

var removedProducts = {{ecommerce.remove.products}};
if (removedProducts && removedProducts.length) {
  removedProducts.forEach(function (product) {
    _rejoiner.push(['removeCartItem', {
      product_id: product.id,
    }]);
  });
}
</script>

Conversion Tag

Trigger: Conversion Page Code:

<script>
var _rejoiner = _rejoiner || [];

var purchaseData = {{ecommerce.purchase.actionField}};
var purchaseProducts = {{ecommerce.purchase.products}};

var conversionData = {
  cart_data: {
    cart_item_count: 0,
    cart_value: Math.round(100 * purchaseData.revenue),
    customer_order_number: purchaseData.id,
    promo: purchaseData.coupon,
  },
  cart_items: [],
};

purchaseProducts.forEach(function(product) {
  var productPriceInCents = Math.round(100 * product.price);

  conversionData.cart_data.cart_item_count += product.quantity;

  conversionData.cart_items.push({
    product_id: product.id,
    name: product.name,
    category: [].concat(product.category),
    price: productPriceInCents,
    product_url: product.productUrl,
    image_url: product.productImage,
    item_qty: product.quantity,
    qty_price: productPriceInCents * product.quantity,
  });
});

_rejoiner.push(['sendConversion', conversionData]);
</script>

Publish

Once you've configured and saved all the necessary variables, triggers, and tags, you'll need to publish your container.

To publish your workspace:

Click Submit at the top right hand side of the screen. The Submit Changes screen will appear, with options to publish the container and save a version of your container.
Select Publish and Create Version if it is not already selected.
Review the Workspace Changes section to see if your configuration appears as you expect.
Enter a Version Name and Version Description.
If you have Tag Manager configured to use multiple environments, use the Publish to Environment section to select which environment you'd like to publish to.
Click Publish.

Advanced Features

In addition to the fundamental tags required to support most Rejoiner campaigns, as described above, there are further advanced features that can be implemented which will specific to your website platform. This includes things like return_url values to rebuild a customer's cart even if their session cookie is cleared and across multiple different devices, or capturing campaign specific metadata that might be used to build more targeted segmentation and provide more sophisticated information for your customers.

If you're interested in pursuing the implementation and/or development of these kind of advanced features, please contact us at integrations@rejoiner.com.

DOCUMENTATION

Google Tag Manager

In this article:

Questions?