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 (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)
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.
Sending 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', '{{ 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.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 [email protected].
Updated over 3 years ago