Google Tag Manager Ecommerce Tracking

Analytics ecommerce tracking used to be comparatively easy. Now, Google Tag Manager ecommerce tracking has a vast range of options available and its very easy to get it wrong. This article looks at installation of the code for recording transaction details following sale. In addition, you are able to record various steps along the way including adding and removing items from the cart.

In particular, this installation is for Google Tag Manager ecommerce tracking Business Catalyst CMS.

After lots of hours trying, I have finally got my first ecommerce tracking installed. I will walk you through the steps and have a reminder to myself so I can take less time next time :).

On the thankyou page following sale of a product on an ecommerce site, you should have access to the variables for sale of the goods. You pass these to Google in a data layer of a slightly different form to that of previous analytics versions.

The following is the Business Catalyst code added to the order-receipt.inc template accessible via Root/_System/assets/inc/ecommerce/order-receipt.inc

{module_data resource="orders" version="v3" fields="id,shippingPrice,totalPrice" resourceId="{{ orderId }}" skip="0" limit="10" order="id" collection="trans"}
{module_data resource="orders" version="v3" fields="itemId,productId,catalogueId,units,unitPrice,unitTaxRate,totalPrice,description,product" subresource="products" resourceId="{{ orderId }}" skip="0" limit="10" order="productId" collection="products"}

<div class="shop-receipt escapeWorldSecureSystems">

<h1>Internet Order Placed Successfully</h1>
{% if errorMessage -%}
<p class="error">{{ errorMessage }}</p>
{% endif -%}
<p class="lead">
Thank you for your purchase. Please find confirmation of your order and payment below.<br>
You will also receive an email confirmation of your order.
</p>

<hr />
<h2>Invoice and Reference Number</h2>
<p>{{invoiceNumber}}</p>

{% if paymentStatus != 'Success' -%}
<hr />
<h2>Banking Details <small>(If you are purchasing via Bank Transfer)</small></h2>
<pre>
<code style="display: inline-block"><strong>Account No</strong> : xxxxxx
<strong>BSB Number</strong> : xxxxxx
<strong>Account Name</strong> : AccountName
<strong>Bank Name</strong> : NATIONAL AUSTRALIA BANK
<strong>Swift Code</strong> : NATAAU3303M
<strong>Reference</strong> : <strong>{{invoiceNumber}}</strong></code>
</pre><br>
{% endif -%}

</div>

{% case globals.site.countryCode -%}
{% when 'AU' -%}{% assign CurrencyCode = 'AUD' -%}
{% when 'NZ' -%}{% assign CurrencyCode = 'NZD' -%}
{% when 'US' -%}{% assign CurrencyCode = 'USD' -%}
{% when 'GB' -%}{% assign CurrencyCode = 'GBP' -%}
{% when 'IT' -%}{% assign CurrencyCode = 'EUR' -%}
{% endcase -%}


<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'ecommerce': {
'currencyCode': '{{CurrencyCode}}',
'purchase': {
'actionField': {
'id': '{{ trans.id }}', // Transaction ID. Required for purchases and refunds.
'revenue': '{{ trans.totalPrice }}', // Total transaction value (incl. tax and shipping)
'shipping': '{{ trans.shippingPrice }}'
},
'products':
{% for prod in products.items -%}
{module_data resource="catalogs" version="v3" fields="id,name" resourceId="176691" skip="0" limit="10" order="id" collection="catalog"}
{
// List of productFieldObjects.
'name': '{{ prod.product.name }}', // Name or ID is required.
'id': '{{ prod.productId }}',
'sku': '{{ prod.product.productCode }}',
'price': '{{ prod.totalPrice }}',
'category': '{{ catalog.name }}',
'quantity': {{ prod.units }},

},
{% endfor -%}
]

}
}
});
</script>

<!-- Google Code for SALE Conversion Page -->
<script type="text/javascript">
/* <!
var google_conversion_id = 945052904;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "GYqlCPbA02EQ6LnRwgM";
var google_conversion_value = {{ trans.totalPrice }};
var google_conversion_currency = "{{CurrencyCode}}";
var google_remarketing_only = false;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/945052904/?value={{ trans.totalPrice }}&amp;currency_code={{CurrencyCode}}&amp;label=GYqlCPbA02EQ6LnRwgM&amp;guid=ON&amp;script=0"/>
</div>
</noscript>


The resulting code on the thankyou page
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'ecommerce': {
'currencyCode': 'USD',
'purchase': {
'actionField': {
'id': '4260280', // Transaction ID. Required for purchases and refunds.
'revenue': '134.00', // Total transaction value (incl. tax and shipping)
'shipping': '30.00'
},
'products':

{
// List of productFieldObjects.
'name': 'Baby Mattress', // Name or ID is required.
'id': '9641439',
'sku': 'EZ696Q0BEO',
'price': '45.00',
'category': '',
'quantity': 1,

},
{
// List of productFieldObjects.
'name': 'Leg Warmer and Snug Window', // Name or ID is required.
'id': '9641702',
'sku': 'UNJTVSG6GQ',
'price': '59.00',
'category': '',
'quantity': 1,

},

]

}
}
});
</script>



I have chosen in this instance, to add the AdWords conversion code straight to the thankyou page rather than adding it via the Google Tag Manager (GTM) interface which would also have needed datalayer options added.

The code was based off Integrating the Google's e-Commerce tracking using Liquid - however, please note the different variables used for the orderid

The country coding was based on a specific site being accessible via multiple domains, one for each of 5 countries.
- so is not normal coding, and can be omitted for most website installs.

The window.dataLayer = window.dataLayer || []; was needed in addition to the code shown on Google's enhanced ecommerce example code. Without it, the code returned a javascript error reporting that the datalayer variable had not been initialised.


Now in Google tag manager we have the following setup - I took a long time to find a solution that worked.

Trigger:
- event = pageview
trigger type Dom Ready
event = gtm.dom
pagepage = the url of the thankyou page - ie /FormProcessv2.aspx. You can confirm the variable using the Chrome ga debug.

The event gtm.dom is the event that happens at DOM ready status.





Tracking type is Page view as is the above trigger, and you then select the enhanced ecommerce features with data layer.




You can then test and preview the code to make sure that it is working:




The following is the screenshot of the bottom of the thankyou page following purchase - Google adds the GTM information and shows what of the tags have been fired on the page:



- we can see that the ecommerce tracking tag has been fired.
However, we are not able to see whether the ecommerce information has been sent to analytics - the information is not available in the Analytics real-time data.

Therefore we can install GA Debug to chrome and see all the data that is sent to Google via inspect element, console.









CartridgesDirect.com.au - Printers and Cartridges

I am now working on Google Tag Manager for CartridgesDirect which is on the Netsuite CMS. Again it is not an easy process working through the programming and testing of GTM into the website. But we are getting there. The latest Mont Blanc version has a GTM module available with most of the bells and whistles. But we have the previous version, and there is a bit more effort required in setting things up.

While you are at it, see the HP Printers Range on Cartridges Direct - HP Printers. They are a preferred supplier showing on the HP website for HP Printers.