Google Tag Manager

Overview

The Google Tag Manager (GTM) is one of the most popular Tag Management systems on the internet and is used to manage Javascript and HTML tag, primarily for the purposes of tracking or collecting analytics for a website.

Whilst primarily best suited for implementing the Stackla Tracking Pixel, Google Tag Manager can also be used by clients as a way of implementing Stackla’s Widgets and GoConnect Forms in Content Management Systems’ (CMS) that limit users from injecting Javascript.

Detailed below are the step by step ways in which GTM can be used on your website.

Tracking Pixel

The Stackla Tracking Pixel enables an organisation to get detailed conversion and engagement data for specific events on their digital platforms for all products leverage Stackla’s Commerce functions.

Outlined below are the various steps that need to be considered when implementing the Tracking Pixel via GTM.

Variables

The first step in setting up the Stackla Tracking Pixel in Google Tag Manager is to define your Variables. The Variables will be help populate the various parameters available for each event.

Data Layer

Before creating any Variables in your Tag Manager, it is recommended that you enable ‘Preview’ mode in your Tag Manager. Preview Mode will allow you to see the GTM Debug Pane on your respective digital properties including the Data Layer.

The Data Layer is a JavaScript object that is used to pass information from your website to your Tag Manager container and is generally pre-configured on most ecommerce websites. By enabling the GTM Debug Pane you will be able to see what information is being passed on each of the respective pages you wish to add the Tracking Pixel to.

An sample of the type of information that is passed in the Data Layer for many ecommerce platforms on the Purchase page is available below.

For the Tracking Pixel event purchase the main information we want to pass to Stackla is all grouped under the array ecommerce.purchase.products which is what we’ll use for the rest of this guide.

Creating the Variables

Now that we know what information is being passed in the Data Layer we can create our first variable.

To start select Variables from the GTM menu and create a New User-Defined Variables.

Once selected you will have the opportunity to name the variable. For this guide we have called it PurchasedProduct and can now select our Variable Configuration.

From the Variable Type, we want to select Data Layer Variable from the Page Variables list.

We can now add the array we discovered before, ecommerce.purchase.products, include the section Data Layer Variable Name and hit save.

Breaking up the Array

Now for some parameters, there will only ever be one result in the Data Layer, meaning you only have to define one Variable and away you can go. An example of this from the previous screenshot is the Currency used. This can be collected with the simple Data Layer Variable Name ecommerce.currencyCode.

In the case of ecommerce.purchase.products not only do we have multiple products, but will need to separate values such as id, price and quantity for our Pixel later. To do this, we’ll need to create additional variables in our Tag Manager for each of these.

To do this, we will once again want to create a New User-Defined Variables.

We can now name the variable (eg. PurchaseProduct.ID) and then from the Variable Configuration list, we want to select Custom Javascript.

In the Javascript, we will want to split out the ID values from the rest of the array so will want to insert the below code:

function () { return {{PurchasedProducts}}.map(function(a) {return a.id;}); }

This will return the id from the previously defined variable {{PurchasedProducts}}.

Trigger

Now that we’ve setup the variables, we can define our Triggers. Triggers are used by GTM to define when Tags are run. It is recommended that brands define a Trigger per event they wish to track.

To create a Trigger, select Triggers from the GTM menu and create a New Trigger. Next we name the Trigger and select a Trigger Configuration.

Depending on what event you wish to track will determine the Trigger Configuration you wish to pick, but for the guide example, we are going to pick Page View and select Some Page Views.

We can then define either a URL or part of a URL in which we want for this Trigger to fire.

Tags

Once we have our Variables and Triggers, we can finally define our Tags. Similar to Triggers, it is recommended that
brands define a Trigger per event they wish to track.

To create a Tag, select Tags from the GTM menu and create a New Tag.

We can now give it a name, and select Tag Configuration.

Now for the Tag Configuration type, we will want to pick Custom HTML which will allow us to inject our Image.

In the HTML section we will want to insert code similar to below:

<img src="https://stp.stack.la/record.png?product_id={{PurchasedProducts.ID}}&event=purchase&ext_currency={{PurchasedProducts.Currency}}&ext_price={{PurchasedProducts.Price}}&ext_quantity={{PurchasedProducts.Quantity}}">

This code defines the Image, calling the Pixel Image and then we are calling the respective variables we defined earlier – PurchasedProducts.ID, PurchasedProducts.Currency, PurchasedProducts.Price and PurchasedProducts.Quantity.

Once done we can now associate the Trigger we created for this event with the Tag.

Return to Top

Widgets

Leveraging Google Tag Manager (GTM) can be an effective way for brands to deploy Stackla Widgets across their digital properties, especially in Content Management Systems’ (CMS) that limit users from injecting Javascript.

Outlined in this guide are the steps which can be taken to add the Javascript component of the Widget Embed code to your GTM container.

Embed Code

The Stackla Widget Embed code can be broken into two components, the first component (included below) is the DIV container which defines where the Stackla Widget should be rendered on a webpage, as well includes the various parameters which defines what Widget and what Content is loaded.

<div class="stackla-widget" data-ct="" data-hash="{{widget-hash}}" data-id="{{widget-id}}" data-title="{{widget-title}}" data-ttl="60" style="width: 100%; overflow: hidden;"></div>

The second component is the Widget Javascript. This is the part of the Embed code which is consistent for every Widgets and can be added to your GTM container.

<script type="text/javascript">
(function (d, id) {
    var t, el = d.scripts[d.scripts.length - 1].previousElementSibling;
    if (el) el.dataset.initTimestamp = (new Date()).getTime();
    if (d.getElementById(id)) return;
    t = d.createElement('script');
    t.src = '//assetscdn.stackla.com/media/js/widget/fluid-embed.js';
    t.id = id;
    (d.getElementsByTagName('head')[0] || d.getElementsByTagName('body')[0]).appendChild(t);
}(document, 'stackla-widget-js'));
</script>

Trigger Setup

The first step in the setup is to define our Trigger(s). Triggers are used by GTM to define when Tags are run.

To create a Trigger, select Triggers from the GTM menu and create a New Trigger. Next we name the Trigger and select Page View from the Trigger Configuration options.

From here we can define when we want to make the Widget Javascript available on a page.

If you plan on having a Stackla Widget on all Pages, you should pick All Page Views for when the trigger fires, otherwise you should define what Page(s) the Javascript loads.

Tag Setup

Final step in the process is to define our Tag. Tags is where we will store the Widget Javascript we identified earlier.

To create a Tag, select Tags from the GTM menu and create a New Tag.

We can now give it a name, and select Custom HTML from the Tag Configuration options.

From here we can add the Widget Javascript.

<script type="text/javascript">
(function (d, id) {
    var t, el = d.scripts[d.scripts.length - 1].previousElementSibling;
    if (el) el.dataset.initTimestamp = (new Date()).getTime();
    if (d.getElementById(id)) return;
    t = d.createElement('script');
    t.src = '//assetscdn.stackla.com/media/js/widget/fluid-embed.js';
    t.id = id;
    (d.getElementsByTagName('head')[0] || d.getElementsByTagName('body')[0]).appendChild(t);
}(document, 'stackla-widget-js'));
</script>

Final step is associating the Tag with the Trigger we created before.

Once created and Saved you can then Publish.

Return to Top

GoConnect

Leveraging Google Tag Manager (GTM) can be an effective way for brands to deploy GoConnect across their digital properties, especially in Content Management Systems’ (CMS) that limit users from injecting Javascript.

Outlined in this guide are the steps which can be taken to add the Javascript component of the GoConnect Embed code to your GTM container.

Embed Code

The Stackla GoConnect Embed code can be broken into two components, the first component (included below) is the DIV container which defines where the Stackla GoConnect Form should be rendered on a webpage, as well includes the various parameters which defines what GoConnect Form is loaded.

<div id='stackla-goconnect-widget' data-widget-id="{{widget-id}}"></div>

The second component is the GoConnect Javascript. This is the part of the Embed code which is consistent for every GoConnect Form and can be added to your GTM container.

<script type='text/javascript'>
(function (d) {
    // embed.js CDN
    var cdn = window.StacklaGoConnectConfig ? window.StacklaGoConnectConfig.cdn : 'assetscdn.stackla.com';
    var t = d.createElement('script');
    t.type = 'text/javascript';
    t.src = 'https://' + cdn + '/media/js/common/plugin_goconnect_embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(t);
}(document));
</script>

Trigger Setup

The first step in the setup is to define our Trigger(s). Triggers are used by GTM to define when Tags are run.

To create a Trigger, select Triggers from the GTM menu and create a New Trigger. Next we name the Trigger and select Page View from the Trigger Configuration options.

From here we can define when we want to make the GoConnect Javascript available on a page.

If you plan on having a Stackla GoConnect Form on all Pages, you should pick All Page Views for when the trigger fires, otherwise you should define what Page(s) the Javascript loads.

Tag Setup

Final step in the process is to define our Tag. Tags is where we will store the Widget Javascript we identified earlier.

To create a Tag, select Tags from the GTM menu and create a New Tag.

We can now give it a name, and select Custom HTML from the Tag Configuration options.

From here we can add the GoConnect Javascript.

<script type='text/javascript'>
(function (d) {
    // embed.js CDN
    var cdn = window.StacklaGoConnectConfig ? window.StacklaGoConnectConfig.cdn : 'assetscdn.stackla.com';
    var t = d.createElement('script');
    t.type = 'text/javascript';
    t.src = 'https://' + cdn + '/media/js/common/plugin_goconnect_embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(t);
}(document));
</script>

Final step is associating the Tag with the Trigger we created before.

Once created and Saved you can then Publish.

Return to Top