.png%3Falt%3Dmedia%26token%3D6deff902-b475-4b95-bffc-b313f43260b5)
.png%3Falt%3Dmedia%26token%3D6deff902-b475-4b95-bffc-b313f43260b5)
Google Tag Manager
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 Visual UGC Tracking Pixel, Google Tag Manager can also be used by clients as a way of implementing Visual UGC'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.
The Visual UGC Tracking Pixel enables an organisation to get detailed conversion and engagement data for specific events on their digital platforms for all products leverage Visual UGC's Commerce functions.
Outlined below are the various steps that need to be considered when implementing the Tracking Pixel via GTM.
The first step in setting up the Visual UGC Tracking Pixel in Google Tag Manager is to define your Variables. The Variables will be help populate the various parameters available for each event.
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 Visual UGC is all grouped under the array ecommerce.purchase.products which is what we'll use for the rest of this guide.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.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}}.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.
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.
Leveraging Google Tag Manager (GTM) can be an effective way for brands to deploy Visual UGC 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.
The Visual UGC Widget Embed code can be broken into two components, the first component (included below) is the DIV container which defines where the Visual UGC 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>
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 Visual UGC 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.
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.
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.
The Visual UGC GoConnect Embed code can be broken into two components, the first component (included below) is the DIV container which defines where the Visual UGC 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>
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 Visual UGC 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.
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.
Last modified 2mo ago