Google Tag Manager

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

Leveraging Enhanced Ecommerce

Rejoiner recommends implementing a data layer using Google's Enhanced Ecommerce 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.

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

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.items
ecommerce.value
ecommerce.transaction_id
ecommerce.coupon

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

Cart Page

Select Custom Event trigger type.
Event name: view_cart

Checkout Page

Select Custom Event trigger type.
Event name: begin_checkout

Add to Cart

Select Custom Event trigger type.
Event name: add_to_cart

Remove from Cart

Select Custom Event trigger type.
Event name: remove_from_cart

Conversion Page

Select Custom Event trigger type.
Event name: purchase

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', '{{ site_id }}']);
  _rejoiner.push(['setDomain', '{{ 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.items}}.forEach(function(product) {
    _rejoiner.push(['trackProductView', {
      product_id: product.item_id,
      name: product.item_name,
      price: Math.round(100 * product.price),
      image_url: product.productImage,   
      product_url: product.productUrl,
    }]);
  }); 
</script>

Cart Data Tag

Trigger: Cart Page
Code:

<script>
var _rejoiner = _rejoiner || [];
  
var cartData = {
  cart_value: 0,
  cart_item_count: 0,
};

var cartItems = {{ecommerce.items}};
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.item_id,
      name: product.item_name,
      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.items}};
if (addedProducts && addedProducts.length) {
  addedProducts.forEach(function (product) {
    var productPriceInCents = Math.round(100 * product.price);

    _rejoiner.push(['setCartItem', {
      product_id: product.item_id,
      name: product.item_name,
      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.items}};
if (removedProducts && removedProducts.length) {
  removedProducts.forEach(function (product) {
    _rejoiner.push(['removeCartItem', {
      product_id: product.item_id,
    }]);
  });
}
</script>

Checkout Tag

Trigger: Checkout Page
Code:

<script>
var _rejoiner = _rejoiner || [];
  
var cartData = {
  cart_value: 0,
  cart_item_count: 0,
};

var cartItems = {{ecommerce.items}};
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.item_id,
      name: product.item_name,
      price: productPriceInCents,
      product_url: product.productUrl,
      image_url: product.productImage,
      item_qty: product.quantity,
      qty_price: productQtyPrice,
    }]);
  });
}
  
_rejoiner.push(['setCartData', cartData]);
</script>

Conversion Tag

Trigger: Conversion Page
Code:

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

var purchaseProducts = {{ecommerce.items}};

var conversionData = {
  cart_data: {
    cart_item_count: 0,
    cart_value: Math.round(100 * {{ecommerce.value}}),
    customer_order_number: {{ecommerce.transaction_id}},
    promo: {{ecommerce.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.item_id,
    name: product.item_name,
    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.