Yes, it IS possible to use Google Tag Manager to implement Google Analytics on a BigCommerce site.<\/p>\n
Before we dive in I want to thank one of my developers, Scott Rarden and also Anirudh from Google for their help.<\/p>\n
And a huge thanks to Jeremy & the others on the GTM threads.\u00a0 I’m very new to BigCommerce and the paths they forged were incredibly helpful in coming up with a solution.<\/p>\n
Now for the gory details:<\/p>\n
As Jeremy mentioned previously you will need to add a new Panel to every page that should include GTM.\u00a0 The GTM Panel should be placed just after the opening <body> tag.<\/p>\n
Create a new file \/template\/Panel\/GoogleTagManagerTag.html<\/p>\n
The file should contain the Google Tag Manager code for your site which will look similar to the one below:<\/p>\n
\u00a0<!-- Google Tag Manager -->\r\n<noscript><iframe src=\"\/\/www.googletagmanager.com\/ns.html?id=GTM-YOURCODE\"\r\nheight=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"><\/iframe><\/noscript>\r\n<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':\r\nnew Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],\r\nj=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=\r\n'\/\/www.googletagmanager.com\/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);\r\n})(window,document,'script','dataLayer','GTM-YOURCODE');<\/script>\r\n<!-- End Google Tag Manager --><\/pre>\nMake sure you use the GTM code that your receive from the GTM website.\u00a0 Don’t copy\/paste the example above.<\/p>\n
Once the Panel is created it then needs to be included on every page of your site.<\/p>\n
For either method below you will likely need to review all of the template files that a visitor is capable of viewing.<\/p>\n
Option 1:<\/p>\n
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.<\/p>\n
Option 2:<\/p>\n
If you already have a Panel appearing in the correct spot then we can add our GTM Panel to the existing Panel.<\/p>\n
Review your template files.<\/p>\n
Open each of the files in the top level of the \/template folder and view them in a text editor.<\/p>\n
Locate the opening <body> tag.<\/p>\n
Determine if there is (or is not) a Panel immediately after the opening <body> tag on all pages.<\/p>\n
Option 1 Example:<\/p>\n
<body id=\"home\">\r\n\u00a0\u00a0 \u00a0<div class=\"page\">\r\n\u00a0 \u00a0\u00a0 \u00a0%%Panel.Header%%\r\n\u00a0\u00a0\u00a0 %%Panel.HomeSlideShowJavaScript%%<\/pre>\nSince there is no Panel immediately after the <body> tag one must be created.\u00a0 The GTM tag should NEVER be placed inside of a <div> or other tag.\u00a0 It must reside directly within the <body> tag.<\/p>\n
<body id=\"home\">\r\n\u00a0\u00a0 \u00a0%%Panel.GoogleTagManagerTag%%\r\n\u00a0\u00a0 \u00a0<div class=\"page\">\r\n\u00a0 \u00a0\u00a0 \u00a0%%Panel.Header%%\r\n\u00a0\u00a0\u00a0 %%Panel.HomeSlideShowJavaScript%%<\/pre>\nOption 2 Example:<\/p>\n
<body id=\"home\">\r\n\u00a0\u00a0 \u00a0%%Panel.DrawerMenu%%\r\n\u00a0\u00a0 \u00a0<div class=\"page\">\r\n\u00a0 \u00a0\u00a0 \u00a0%%Panel.Header%%\r\n\u00a0\u00a0\u00a0 %%Panel.HomeSlideShowJavaScript%%<\/pre>\nThe %%Panel.DrawerMenu%% is in the correct location for the GTM tag.\u00a0 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.<\/p>\n
Before:<\/p>\n
<div id=\"DrawerMenu\">\r\n\u00a0\u00a0\u00a0 <div class=\"inner\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 %%Panel.SideCategoryList%%\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 %%Panel.SideShopByBrand%%\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 %%Panel.SideCategoryShopByPrice%%\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 %%Panel.SideAdditionalInformation%%\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 %%Panel.SideAccountNavigation%%\r\n\u00a0\u00a0\u00a0 <\/div>\r\n<\/div>\r\n%%Panel.DrawerMenuJavascript%%<\/pre>\nAfter:<\/p>\n
%%Panel.GoogleTagManagerTag%%\r\n<div id=\"DrawerMenu\">\r\n\u00a0\u00a0\u00a0 <div class=\"inner\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 %%Panel.SideCategoryList%%\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 %%Panel.SideShopByBrand%%\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 %%Panel.SideCategoryShopByPrice%%\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 %%Panel.SideAdditionalInformation%%\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 %%Panel.SideAccountNavigation%%\r\n\u00a0\u00a0\u00a0 <\/div>\r\n<\/div>\r\n%%Panel.DrawerMenuJavascript%%<\/pre>\nIf you make it through all of the above then Google Tag Manager should be appearing on all of your pages.<\/p>\n
The next big hurdle is to accommodate Ecommerce Transaction reporting.<\/p>\n
Note: The instructions below are for ‘standard’ Ecommerce tracking.\u00a0 We’ll have to tackle Enhanced Ecommerce Reporting another day!<\/p><\/blockquote>\n
Ecommerce Transaction Tracking<\/h2>\n
In short the existing ‘traditional format’ GA Transaction code needs to be translated into the new ‘dataLayer’ syntax for GTM.\u00a0 As Jeremy pointed out back on 07-23-2014 it would take some scripting to make this work.\u00a0 The script below will do the job.<\/p>\n
Note: WordPress tends to mess with single & double quote characters.\u00a0 A text-only copy of the script is available here<\/a>.<\/p><\/blockquote>\n
<script type=\"text\/javascript\">\r\nvar dataLayer = new Array();\r\n\/\/ console.log(dataLayer);\r\nfunction trackGTMEcommerce() {\r\n\u00a0\u00a0\u00a0 this._addTrans = addTrans;\r\n\u00a0\u00a0\u00a0 this._addItem = addItems;\r\n\u00a0\u00a0\u00a0 this._trackTrans = trackTrans;\r\n}\r\n\r\nvar transaction = {};\r\ntransaction.transactionProducts = [];\r\n\r\nfunction addTrans(orderID, store, total, tax, shipping, city, state, country) {\r\n\u00a0\u00a0\u00a0 transaction.transactionId = orderID;\r\n\u00a0\u00a0\u00a0 transaction.transactionAffiliation = store;\r\n\u00a0\u00a0\u00a0 transaction.transactionTotal = total;\r\n\u00a0\u00a0\u00a0 transaction.transactionTax = tax;\r\n\u00a0\u00a0\u00a0 transaction.transactionShipping = shipping;\r\n\u00a0\u00a0\u00a0 \/\/ console.log(11)\r\n}\r\n\r\n\r\nfunction addItems(orderID, sku, product, variation, price, quantity) {\r\n\u00a0\u00a0\u00a0 transaction.transactionProducts.push({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'id': orderID,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'sku': sku,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'name': product,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'category': variation,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'price': price,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'quantity': quantity\r\n\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0 \/\/ console.log('a')\r\n}\r\n\r\nfunction trackTrans() {\r\n\u00a0\u00a0\u00a0 transaction.event = 'bcTransactionComplete';\r\n\u00a0\u00a0\u00a0 \/\/ console.log(transaction);\r\n\u00a0\u00a0\u00a0 dataLayer.push(transaction);\r\n}\r\n\r\nvar pageTracker = new trackGTMEcommerce();\r\n<\/script><\/pre>\nFor an easy setup:<\/p>\n
Go to Settings => Web Analytics and enable Google Analytics.
\nThen paste the script into the ‘Tracking Code’ box for Google Analytics<\/p>\nFor a more precise setup:<\/p>\n
This script really only needs to appear on the \/finishorder.php page.
\nThus you could put it into the <head> section of just that page.<\/p>\nCaveat: 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.
\nA comment works fine.<\/p>\nIMPORTANT:<\/p>\n
You will need to trigger the GA Transaction tag in GTM using a custom event.
\nIn the example script above the event name is set on the line:<\/p>\ntransaction.event = 'bcTransactionComplete';<\/pre>\nYou will need to configure GTM to fire the GA Transaction tag on the ‘bcTransactionComplete’ event.<\/p>\n","protected":false},"excerpt":{"rendered":"
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.\u00a0 I’m very new … Continue reading Google Tag Manager for BigCommerce<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[1,13,9],"tags":[],"_links":{"self":[{"href":"https:\/\/www.visualfuture.com\/davetech\/wp-json\/wp\/v2\/posts\/190"}],"collection":[{"href":"https:\/\/www.visualfuture.com\/davetech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.visualfuture.com\/davetech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.visualfuture.com\/davetech\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.visualfuture.com\/davetech\/wp-json\/wp\/v2\/comments?post=190"}],"version-history":[{"count":6,"href":"https:\/\/www.visualfuture.com\/davetech\/wp-json\/wp\/v2\/posts\/190\/revisions"}],"predecessor-version":[{"id":196,"href":"https:\/\/www.visualfuture.com\/davetech\/wp-json\/wp\/v2\/posts\/190\/revisions\/196"}],"wp:attachment":[{"href":"https:\/\/www.visualfuture.com\/davetech\/wp-json\/wp\/v2\/media?parent=190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.visualfuture.com\/davetech\/wp-json\/wp\/v2\/categories?post=190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.visualfuture.com\/davetech\/wp-json\/wp\/v2\/tags?post=190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}