Google Tag Manager v4

This article describes integrating Rejoiner using Google Tag Manager for Rejoiner's v4 Implementation. If you're looking for v3,  click here.

In This Article

 

Overview

This article describes the implementation of Full Site Tracking (v4) with Rejoiner using Google Tag Manager. This means that you will use GTM to configure the integration, as opposed to embedding our JS directly in your store.

 

Installation

Creating a Container

Google Tag Manager uses "containers" to manage separate integrations. This way it will be easier to test and deploy the Rejoiner integration without affecting your other integrations.

Start by creating a new container using the video below.

Note:  You will need to add the container snippet to your site. You will need to remove any existing Rejoiner tags – if any.

 

Preparing the Data Layer

At this point, we assume that the Data Layer in Google Tag Manager integration is already configured. See  Developer Guide and Enhanced Ecommerce for more details and examples. While you do not need a Data Layer to track browse abandonment, cart abandonment and conversions we highly recommend you use a Data Layer – otherwise, you will have no access to product and cart data details.

Note: The actual format of the Data Layer will vary from store to store. This means that the code responsible for translating data from the Data Layer to Rejoiner API will have to be customized. 

Rejoiner needs the following elements to be present in the Data Layer of your product pages:

  • Details about the current product on view (SKU / product id, name, category, price, product page url and product image url)

For the purposes of this guide, we assume that the Data Layer on your product pages is initialized as follows:

dataLayer = [{    
    "currentProduct": {
        'product_id': 'SKU-1002',
        'name': 'Exclusive TV 1002',
        'category': ['exclusive-items', 'tv', 'bestsellers'],
        'price': 29999,
        'product_url': 'https://yourdomain.com/tv/exclusive/SKU-1002',
        'image_url': ' 'https://yourdomain.com/assets/SKU-1002.jpg'
    }
}];

Rejoiner will also need the following elements to be present in the Data Layer of your checkout page as well as your order receipt page.

  • A list of products in the shopping cart (SKU, name, price, quantity, and so on)
  • Additional cart information (e.g. total value, total number of products, cart return URL)

For the purposes of this guide, we assume that the Data Layer on your checkout page and order receipt page is initialized as follows:

dataLayer = [{
    "transactionId": "12345",
    "transactionDate": "2016-01-01",
    "transactionTotal": "250.00",
    "transactionCurrency": "USD",
    "transactionItemsCount": 3,
    "transactionProducts": [
        {
            "sku": 1,
            "name": "Product #1",
            "price": "100.00",
            "currency": "USD",
            "quantity": 2
        },
        {
            "sku": 2,
            "name": "Product #2",
            "price": "50.00",
            "currency": "USD",
            "quantity": 1
        }
    ]
}];

 

Preparing Triggers

To start, we will prepare the triggers we will be needing in this integration. There are only 3 triggers you will need to create. Below is a table with these triggers. The name of each links to specific details about the trigger.

TRIGGER NAME TARGET MATCH TO TAG
Checkout Trigger
The URL of your checkout page. Rejoiner Checkout Tag
Conversion Trigger
The URL of the receipt page, or the page your customers see after completing an Rejoiner Conversion Tag
FooterTrigger
All pages on your site. Rejoiner Footer Tag

To help you, we created the video tutorial below to walk you through creating your triggers. We recommend you watch it before going into the next steps, specially if you’re new to GTM.

Tutorial

Like to read? Here are the initial steps to create a trigger:

1
Start by clicking on the red button labeled as "New" to create a new trigger
2
Name your trigger. Remember to be descriptive.
3
Click on the pencil icon of the Trigger Configuration box to open your trigger's settings.
4
In the settings, select the Page View trigger type.
5
Select All Pages for your  Footer Trigger.
Note: At this point your  Footer Trigger is complete and you may save it now. Click on the blue button labeled as "Save" to finish setting up your trigger,
6
Select Some Page Views for your  Checkout and  Conversion Triggers.
7
Next, you'll want to use the dropdown to create your trigger conditions.
For your Checkout and Conversion Triggers, use the following taxonomy:
[ Page URL ] [ equals ] [ Corresponding URL ]
	

Make sure the URL matches correctly.

IMPORTANT:

If the URL is different for each order, you can use the filter "Starts with" like so:

[ Page URL ] [ Starts with ] [ Corresponding URL ]
	

EXAMPLE

If your receipt page is something like: www.mystore.com/receipt/17892 where the last digits are the order ID, your filter would look like:

[ Page URL ] [ Starts with ] [http://www.mystore.com/receipt ]
	

Thus, you’ll be leaving out the “customized” portion of the receipt URL.

8
Last step is to click on the blue button labeled as "Save" to finish setting up your trigger.

Individual Trigger Details

 

Checkout Trigger

We recommend you name your trigger as “Checkout Trigger” in order to easily recognize it as we’ll be needing it later. Make sure you’ve selected  the Page View trigger type to fire in Some Page Views in the Configuration Settings.

Make sure the URL matches the checkout address your users will see in their browser’s address bar. 

Configuration Example of Checkout Trigger:

 

Conversion Trigger

We recommend you name your trigger as “Conversion Trigger” in order to easily recognize it as we’ll be needing it later. Make sure you’ve selected  the Page View trigger type to fire in Some Page Views in the Configuration Settings.

Make sure the URL matches the receipt page your customers see upon completing an order.

IMPORTANT:

If the URL is different for each order, you can use the filter "Starts with" like so:

[ Page URL ] [ Starts with ] [ Corresponding URL ]

EXAMPLE

If your receipt page is something like: www.mystore.com/receipt/17892 where the last digits are the order ID, your filter would look like:

[ Page URL ] [ Starts with ] [http://www.mystore.com/receipt ]

Thus, you’ll be leaving out the “customized” portion of the receipt URL.

Configuration Example of Conversion Trigger:

 

We recommend you name your trigger as “Footer Trigger” in order to easily recognize it as we’ll be needing it later. Make sure you’ve selected  the Page View trigger type to fire in All Pages in the Configuration Settings.

By selecting “All Page Views” we’re telling GTM that the Footer Tag, which we will later attach to this trigger, needs to be present in all the pages of your site. 

Configuration Example of FooterTrigger:

After creating all of your triggers...

Your new triggers should (all) appear in your GTM container like so:

 

Setting Up Tags

The next step is to match the triggers you’ve created to a tag. There are 3 tags in total and each loads different parts of our v4 JavaScript.

We’ve created a video tutorial on how to create tags in Google Tag Management.  You can use the table below and simply click on the name to see the JavaScript snippets you will need to add in the HTML boxes for each tag.

TAG SNIPPETS MATCH TO TRIGGER
Rejoiner Checkout Tag Checkout Tag
Rejoiner ConversionTag Conversion Tag
Rejoiner Footer Tag FooterTag

 

Tutorial

Like to read? Here are the initial steps to create a tag:

1
Create a new tag by clicking on the red button labeled as "New"

2
Name your tag. Be descriptive, we also recommend you note that the tag is for Rejoiner by including this in your name. Example: "Rejoiner Checkout Tag"

3
Click on the pencil icon of the "Tag Configuration" box

4
Select the "Custom HTML" tag type

5
Your Custom HTML Configuration will appear. you will want to add the tag's corresponding snippet to the HTML box.

The needed snippets and details for each tag are located below.
6
Once you've added your snippet, simply attach the corresponding trigger to the tag you're creating. To do so, click on the "Triggering" box that is below your "Tag Configuration" box

TAG NAME MATCH TO
Rejoiner Checkout Tag
Checkout Trigger
Rejoiner Conversion Tag
Conversion Trigger
Rejoiner Footer Tag
Footer Trigger
7
Finally click "Save" in order to complete your tag's set up.

 

Individual Tag Details

Rejoiner Checkout Tag

The Rejoiner Checkout Tag will load our JavaScript plugin, which tracks data from the checkout form. It's also used to send cart data to Rejoiner via special JavaScript API calls.

Add your checkout snippet to your HTML box.

Below you’ll see two variants of the snippet. Use the one that best suits your needs.

Note: The Custom Data Layer part on the second example is optional and can only be used if you have provided required information in dataLayer variable.

Simple Rejoiner Checkout Snippet

The Simple Rejoiner Checkout Snippet is your tracking code – this version contains No dataLayer. Thus, it doesn’t track any cart data. If you want to inject cart data into your cart abandonment emails, you will need to use the second example (Rejoiner Checkout Snippet with Data Layer)

Make sure to fill correct values in setAccount and setDomain calls (available in the Implementation tab).

Simple Tracking Code

<script type='text/javascript'>
var _rejoiner = _rejoiner || [];
_rejoiner.push(['setAccount', 'your site id here']);
_rejoiner.push(['setDomain', 'yourdomain.com']);
_rejoiner.push(['startOrder']);
(function() {
    var s = document.createElement('script'); s.type = 'text/javascript';
    s.async = true;
    s.src = 'https://cdn.rejoiner.com/js/v4/rejoiner.lib.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
})();
</script>

Rejoiner Checkout Snippet with Data Layer

This tracking code translates your Data Layer into Rejoiner calls (see API documentation). This code will be specific to the Data Layer structure that is used in your store.

Make sure to fill correct values in setAccount and setDomain calls (available in the Implementation tab).

Working Example of Checkout Snippet with Data Layer

<script type='text/javascript'>
var _rejoiner = _rejoiner || [];
_rejoiner.push(['setAccount', '54db28d0ae2b1f642cbf3d65']);
_rejoiner.push(['setDomain', 'example.com']);
_rejoiner.push(['startOrder']);
// Custom Data Layer Code
if(typeof(dataLayer) !== 'undefined' && dataLayer.length) {
  // defensive check
  if (typeof(dataLayer[0].transactionProducts) !== 'undefined') {
    dataLayer[0].transactionProducts.forEach(function(product) {
        _rejoiner.push(['setCartItem', {
           'product_id': product.sku,
           'name': product.name,
           'price': product.price,
           'item_qty': product.quantity
        }]);
    });
    // end defensive check
  }
  // defensive check
  if (typeof(dataLayer[0].transactionTotal) !== 'undefined' && typeof(dataLayer[0].transactionItemsCount) !== 'undefined') {
    _rejoiner.push(['setCartData', {
        'cart_value': dataLayer[0].transactionTotal,
        'cart_item_count': dataLayer[0].transactionItemsCount
    }]);
  }
  // end defensive check
}
// End Custom Data Layer Code
 
(function() {
    var s = document.createElement('script'); s.type = 'text/javascript';
    s.async = true;
    s.src = 'https://cdn.rejoiner.com/js/v4/rejoiner.lib.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
})();
</script>

Rejoiner Conversion Tag

The Rejoiner Conversion Tag is responsible for closing successful orders so that a recovery campaign will not be triggered. The configuration is very similar to the checkout tag.

Add your conversion snippet below to your HTML box.

IMPORTANT: Remember to fill in the correct values for your setAccount and setDomain as they appear in your account’s Implementation.

Conversion Snippet

<script type='text/javascript'>
var _rejoiner = _rejoiner || [];
_rejoiner.push(['setAccount', 'your site id here']);
_rejoiner.push(['setDomain', 'yourdomain.com']);
var rjConversionParams = {};
 
// Custom Data Layer Code
if(typeof(dataLayer) !== 'undefined' && dataLayer.length) {
  if (typeof(dataLayer[0].transactionProducts) !== 'undefined') {
    rjConversionParams.cart_data = [];
    dataLayer[0].transactionProducts.forEach(function(product) {
        rjConversionParams.cart_items.push({
           'product_id': product.sku,
           'name': product.name,
           'price': product.price,
           'item_qty': product.quantity
        });
    });
  }
  if (typeof(dataLayer[0].transactionTotal) !== 'undefined' && typeof(dataLayer[0].transactionItemsCount) !== 'undefined') {
    rjConversionParams.cart_data = {
        'cart_value': dataLayer[0].transactionTotal,
        'cart_item_count': dataLayer[0].transactionItemsCount
    };
  }
}
// End Custom Data Layer Code
 
_rejoiner.push(['sendConversion', rjConversionParams]);
(function() {
    var s = document.createElement('script'); s.type = 'text/javascript';
    s.async = true;
    s.src = 'https://cdn.rejoiner.com/js/v4/rejoiner.lib.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
})();
</script>

 

The Footer Tag will load our Basic JavaScript plugin that tracks page views.

Add your footer (tracking) snippet below to your HTML box.

IMPORTANT: Remember to fill in the correct values for your setAccount and setDomain as they appear in your account’s Implementation.

footer/Tracking Snippet

<script type='text/javascript'>
var _rejoiner = _rejoiner || [];
_rejoiner.push(['setAccount', 'your site id here']);
_rejoiner.push(['setDomain', 'yourdomain.com']);
  

// Tracking Product view - only if it's provided in dataLayer 
if(typeof(dataLayer) !== 'undefined' && dataLayer.length) {
  if (typeof(dataLayer[0].currentProduct) !== 'undefined') {
     _rejoiner.push(['trackProductView', dataLayer[0].currentProduct]);
  }
}
// End Track Product view

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

After creating all of your triggers...

Once you have verified that the image above matches, we are ready to deploy.

Deployment

We recommend to first test the integration using the Preview & Debug mode.

The Preview Mode is accessible to you by hovering over the red button labeled as “Publish,” which will show you a dropdown with several options. There you can either click on “Preview” or “Publish Now.”

Deployment Instructions

1
Once you’ve tested, click on the red button labeled as “Publish” to deploy your integration.

2
Next add a “Name” and a “Description” inside your Version Configuration. This should help recognize changes made specifically for Versioning. Thus, we recommend you’re descriptive.

3
Make sure you’re deploying to the right environment.

4
Next click on the blue button labeled as “Publish” to complete your deployment.

5
You will see a page with details of your container’s integration

Here are instructions on how to test your v4 integration.

Email support@rejoiner.com if you need help at any point. 

Still need help? Contact Us Contact Us