Yes, it IS possible to use Google Tag Manager to implement Google Analytics on a BigCommerce site.
Before we dive in I want to thank one of my developers, Scott Rarden and also Anirudh from Google for their help.
And a huge thanks to Jeremy & the others on the GTM threads. I’m very new to BigCommerce and the paths they forged were incredibly helpful in coming up with a solution.
Now for the gory details:
As Jeremy mentioned previously you will need to add a new Panel to every page that should include GTM. The GTM Panel should be placed just after the opening <body> tag.
Create a new file /template/Panel/GoogleTagManagerTag.html
The file should contain the Google Tag Manager code for your site which will look similar to the one below:
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-YOURCODE"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-YOURCODE');</script>
<!-- End Google Tag Manager -->
Make sure you use the GTM code that your receive from the GTM website. Don’t copy/paste the example above.
Once the Panel is created it then needs to be included on every page of your site.
For either method below you will likely need to review all of the template files that a visitor is capable of viewing.
Option 1:
Add the new GTM panel to all of your publicly visible pages by hand. Depending on the design you’re using for your site this can be 55-60 (or more) pages.
Option 2:
If you already have a Panel appearing in the correct spot then we can add our GTM Panel to the existing Panel.
Review your template files.
Open each of the files in the top level of the /template folder and view them in a text editor.
Locate the opening <body> tag.
Determine if there is (or is not) a Panel immediately after the opening <body> tag on all pages.
- If there IS a Panel immediately after the opening body tag on all pages then you can use Option 2.
- If there is NOT a panel immediately after then you will need to edit the file and include the Panel by hand.
Option 1 Example:
<body id="home"> <div class="page"> %%Panel.Header%% %%Panel.HomeSlideShowJavaScript%%
Since there is no Panel immediately after the <body> tag one must be created. The GTM tag should NEVER be placed inside of a <div> or other tag. It must reside directly within the <body> tag.
<body id="home"> %%Panel.GoogleTagManagerTag%% <div class="page"> %%Panel.Header%% %%Panel.HomeSlideShowJavaScript%%
Option 2 Example:
<body id="home"> %%Panel.DrawerMenu%% <div class="page"> %%Panel.Header%% %%Panel.HomeSlideShowJavaScript%%
The %%Panel.DrawerMenu%% is in the correct location for the GTM tag. As long as the %%Panel.DrawerMenu%% appears on all of the publicly visible pages we can simply add our GTM Panel to the existing Panel.
- edit/customize the existing /template/Panels/DrawerMenu.html file
- add %%Panel.GoogleTagManagerTag%% to the top of the file.
Before:
<div id="DrawerMenu"> <div class="inner"> %%Panel.SideCategoryList%% %%Panel.SideShopByBrand%% %%Panel.SideCategoryShopByPrice%% %%Panel.SideAdditionalInformation%% %%Panel.SideAccountNavigation%% </div> </div> %%Panel.DrawerMenuJavascript%%
After:
%%Panel.GoogleTagManagerTag%% <div id="DrawerMenu"> <div class="inner"> %%Panel.SideCategoryList%% %%Panel.SideShopByBrand%% %%Panel.SideCategoryShopByPrice%% %%Panel.SideAdditionalInformation%% %%Panel.SideAccountNavigation%% </div> </div> %%Panel.DrawerMenuJavascript%%
If you make it through all of the above then Google Tag Manager should be appearing on all of your pages.
The next big hurdle is to accommodate Ecommerce Transaction reporting.
Note: The instructions below are for ‘standard’ Ecommerce tracking. We’ll have to tackle Enhanced Ecommerce Reporting another day!
Ecommerce Transaction Tracking
In short the existing ‘traditional format’ GA Transaction code needs to be translated into the new ‘dataLayer’ syntax for GTM. As Jeremy pointed out back on 07-23-2014 it would take some scripting to make this work. The script below will do the job.
Note: WordPress tends to mess with single & double quote characters. A text-only copy of the script is available here.
<script type="text/javascript">
var dataLayer = new Array();
// console.log(dataLayer);
function trackGTMEcommerce() {
this._addTrans = addTrans;
this._addItem = addItems;
this._trackTrans = trackTrans;
}
var transaction = {};
transaction.transactionProducts = [];
function addTrans(orderID, store, total, tax, shipping, city, state, country) {
transaction.transactionId = orderID;
transaction.transactionAffiliation = store;
transaction.transactionTotal = total;
transaction.transactionTax = tax;
transaction.transactionShipping = shipping;
// console.log(11)
}
function addItems(orderID, sku, product, variation, price, quantity) {
transaction.transactionProducts.push({
'id': orderID,
'sku': sku,
'name': product,
'category': variation,
'price': price,
'quantity': quantity
});
// console.log('a')
}
function trackTrans() {
transaction.event = 'bcTransactionComplete';
// console.log(transaction);
dataLayer.push(transaction);
}
var pageTracker = new trackGTMEcommerce();
</script>
For an easy setup:
Go to Settings => Web Analytics and enable Google Analytics.
Then paste the script into the ‘Tracking Code’ box for Google Analytics
For a more precise setup:
This script really only needs to appear on the /finishorder.php page.
Thus you could put it into the <head> section of just that page.
Caveat: You will need to put something in the Google Analytics ‘Tracking Code’ box under Settings => Web Analytics in order for the Ecommerce data to appear.
A comment works fine.
IMPORTANT:
You will need to trigger the GA Transaction tag in GTM using a custom event.
In the example script above the event name is set on the line:
transaction.event = 'bcTransactionComplete';
You will need to configure GTM to fire the GA Transaction tag on the ‘bcTransactionComplete’ event.
