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.
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:
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.
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.
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>
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>
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:
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.
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:
You will need to repeat this process for these six triggers:
productView
checkout
addToCart
removeFromCart
conversion
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:
You will need to repeat this process for these six tags:
Trigger: All Pages
<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>
Trigger: Product Pages
<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>
Trigger: Cart/Checkout Pages
<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>
Trigger: Add to Cart
<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>
Trigger: Remove from Cart
<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>
Trigger: Conversion Page
<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>
Once you've configured and saved all the necessary variables, triggers, and tags, you'll need to publish your container.
To publish your workspace:
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.