Google Tag Manager V3

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

In this Article:

Installation

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

Configure and save the container.

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

Rejoiner needs the following elements to be present in Data Layer on your checkout 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). 

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. 

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

dataLayer = [{
    "transactionId": "12345",
    "transactionDate": "2015-01-01",
    "transactionTotal": "250.00",
    "transactionCurrency": "USD",
    "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
        }
    ]
}];
Tracking Tag

The tracking tag will load our JavaScript plugin that tracks data from the checkout form. It's also used to send cart data to Rejoiner via special JavaScript API calls.

Start by creating a new Tag.

Put in a name and select Custom HTML from the dropdown. There are two elements that have to be present in the HTML code box:

There are two elements that have to be present in the  HTML code box:

  1. Generic Rejoiner tracking code – make sure to fill correct values in setAccount and setDomain calls (available under the Implementation tab in your account)

    <script type='text/javascript'>
    var _rejoiner = _rejoiner || [];
    _rejoiner.push(['setAccount', 'your site id here']);
    _rejoiner.push(['setDomain', 'yourdomain.com']);
    (function() {
        var s = document.createElement('script'); s.type = 'text/javascript';
        s.async = true;
        s.src = 'https://s3.amazonaws.com/rejoiner/js/v3/t.js';
        var x = document.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
    })();
    </script>
    	
  2. Code that translates Data Layer to Rejoiner calls (see API documentation). This code will be specific to the Data Layer structure that is used in store.

Here is a working example of the entire HTML tracking code for the Data Layer that was defined in the previous section:

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

The last part is configuring Google Tag Manager to only fire this tag on the checkout page. To do this, click Add button on the right side of the screen

The are a few ways to configure this rule, but using URL Match will be the easiest one in most setups (sometimes using Data Layer events instead may be required)

Once configured, click Save.

Finally save the tag itself.

Conversion Tag

Conversion tag is responsible for closing successful orders so that a recovery campaign will not be triggered. The configuration is very similar to the Tracking Tag, but it does not require any Data Layer dependent code. 

Start by creating a new Tag.

Put in a name and select Custom HTML from the dropdown. 

Put this code in HTML box (remember to fill correct values in setAccount and setDomain calls, as in the previous step).

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

Again, we need to configure Google Tag Manager to only fire this tag on the success page. To do this, click Add button on the right side of the screen

The are a few ways to configure this rule, but using URL Match will be the easiest one in most setups (sometimes using Data Layer events may be required).

Once configured, click Save

Finally save the tag itself

Deployment

The final container configuration should look as follows:

Make sure to first test the integration using the Preview debug mode. Once tested, use Publish to deploy the integration.

Still need help? Contact Us Contact Us