I\u2019ve noticed that setting up eCommerce<\/a> in Google Tag Manager<\/a> (and now the new Enhanced ecommerce<\/a>) is very difficult for many. I\u2019m sure part of the problem is that eCommerce is for many users the moment that GTM forces you to take steps in to the developer\u2019s domain, since it\u2019s obvious that you\u2019ll need to add some code to the web page.<\/p>\n This isn\u2019t a tutorial on how to do eCommerce in Google Tag Manager. To get started, you\u2019ll want to check out the official documentation. Sure, it might be inaccurate in places, and especially the translations are lacking, but Enhanced Ecommerce (UA) Developer Guide<\/a> This article has tips and answers to some frequently asked questions around eCommerce. Hopefully they will help you understand how eCommerce and Google Tag Manager work together.<\/p>\n \n \n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n <\/span><\/p>\n Here\u2019s how eCommerce and Google Tag Manager conspire to get you the all-important data of your web transactions.<\/p>\n Your eCommerce platform<\/strong> and\/or your Content Management Solution (CMS)<\/strong> render the source code<\/p>\n<\/li>\n If the page includes transactional information, this source code must include all required details about the transaction in the When the tag which carries the transaction to GA fires, it will look at the If it finds all the required information within, it will send the transaction hit to GA<\/p>\n<\/li>\n<\/ol>\n <\/p>\n <\/a><\/p>\n<\/div>\n Most of the following chapters will shed more light on these points, but the key thing to remember is this:<\/p>\n Your eCommerce and\/or CMS platform do almost all the work in tracking your transactions.<\/strong><\/p>\n The backend solution, whether it\u2019s your CMS or a dedicated eCommerce platform such as Magento<\/a>, or even a WordPress plugin (such as WooCommerce<\/a>), has to do the grunt work of populating the keys in the data layer.<\/p>\n With a Python-based application, the page template might look like this:<\/p>\n With PHP, it might look like this:<\/p>\n With QBASIC, it might look like this:<\/p>\n OK, the QBASIC script was fictitious, I was trying to be funny. But nostalgia, right? Right?<\/p>\n So don\u2019t expect GTM to come up with values for these variables magically. You will need a developer to help you here, and you will need a cooperative backend platform.<\/p>\n Now, sometimes you might be tempted to scrape the DOM for eCommerce information. That means that you have some JavaScript in place which retrieves all the necessary transactional data from elements on the page, such as headings, body text, even image ALT texts.<\/p>\n This is not the recommended approach!<\/em><\/p>\n There are many, excellent reasons for decoupling semantic information (information with no inherent value to what is rendered in the browser document) from the presentational layer. This is what the data layer was invented for. I strongly suggest you avoid taking the seemingly easy path of scraping on-page elements, especially with business-critical transactional tags.<\/p>\n Note, however, that some aspects of Enhanced eCommerce as it stands today might actually benefit from a combination of DOM scraping and Here are the actual tips:<\/p>\n dataLayer before GTM<\/p>\n<\/li>\n Use a custom event<\/p>\n<\/li>\n Make sure all the data is there<\/p>\n<\/li>\n Don\u2019t forget your JavaScript<\/p>\n<\/li>\n Enhanced eCommerce is special<\/p>\n<\/li>\n<\/ol>\n And we\u2019ll wrap it up with a neat summary.<\/p>\n This is a very common problem. The tag that carries your transaction information fires before<\/strong> the transaction data is in When a tag fires, it has access to the current state<\/em> of all variables in the global namespace. Here\u2019s an example. This is what your normal eCommerce tag looks like:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n As you can see, there are VERY few options to work with. You just set Track Type to Transaction, add a rule, and you\u2019re good to go.<\/p>\n The point is that this tag will fire as soon as the container snippet is loaded, i.e. when the container snippet<\/a> pushes Thus, this will work:<\/p>\n As you can see, the data is before<\/strong> the container snippet, so the However, this will NOT work:<\/p>\n This time, the transaction data is pushed after<\/strong> the container snippet has loaded, and there\u2019s a very strong possibility that the data is not rendered in The same applies to any data you might try to move in a Custom HTML Tag. The Custom HTML Tag fires at its earliest with {{event}} equals gtm.js<\/strong>, because that\u2019s the earliest possible event<\/a> to fire your tags on. However, your transaction tag is ALSO firing on that event, meaning there\u2019s a possibility that your transaction tag will fire first, and thus won\u2019t find the transaction details in If you can\u2019t push your data into For example, if you\u2019re using a Custom HTML Tag to build your eCommerce Then your transactional tag needs to fire on {{event}} equals transactionComplete<\/strong>. This way you\u2019ll be 100 % certain that the data is in The developer guides tell you exactly what variables are required. In traditional eCommerce, here\u2019s what your Transaction Tag will look for:<\/p>\n Transaction ID<\/strong> – If any of these fields are missing from Oh, and also: With Enhanced eCommerce, there are many more fields to observe, so be sure to read both the Google Tag Manager Developer Guide (linked to in the beginning of this post), as well as the general guide for Enhanced eCommerce in Google Analytics<\/a>.<\/p>\n We\u2019re in the developers\u2019 domain here. Don\u2019t forget that. Here are some things you should check first if your tags are not firing:<\/p>\n Each object key requires a value<\/strong> – If you want to omit a property from the push, either send it with an empty string, or drop it out of the push altogether. Don\u2019t send it without a value at all:<\/p>\ndataLayer<\/code> form and function is nicely described within.<\/p>\n
\nGoogle Analytics Ecommerce<\/a><\/p>\n
\n X<\/span><\/p>\n
\n The Simmer Newsletter<\/strong>\n <\/p>\nThe process in a nutshell<\/h2>\n
\n
dataLayer<\/code> object<\/p>\n<\/li>\ndataLayer<\/code> object<\/p>\n<\/li>\n![\"The](\"https:\/\/www.simoahava.com\/images\/2014\/09\/ecommerce-process.jpg#ZgotmplZ\")
<\/p>\ndataLayer.push({\n 'transactionId'<\/span> : '{{ transactionId }}'<\/span>,\n});\n<\/code><\/pre>\n<\/div>\ndataLayer.push({\n 'transactionId'<\/span> : ''<\/span>,\n});\n<\/code><\/pre>\n<\/div>\ndataLayer.push({\n 'transactionId'<\/span> : 'PRINT T$; GOTO END'<\/span>\n});\n<\/code><\/pre>\n<\/div>\ndataLayer<\/code> utilization. We\u2019ll go over this later in the post.<\/p>\n\n
dataLayer before GTM<\/h2>\n
dataLayer<\/code>. D\u2019uh!<\/p>\ndataLayer<\/code> is one of them. If dataLayer<\/code> doesn\u2019t have the required variables on the moment that the transactional tag fires, you won\u2019t see data from that hit in GA.<\/p>\n![\"transaction-tag\"\/](\"https:\/\/www.simoahava.com\/images\/2014\/09\/transaction-tag.jpg#ZgotmplZ\")
<\/p>\n'event' : 'gtm.js'<\/code> into dataLayer<\/code>. Because the tag looks into dataLayer<\/code> for the transaction details, they have to be there by the time the tag fires!<\/p>\nscript>\n window<\/span>.dataLayer = window<\/span>.dataLayer || [];\n dataLayer.push({\n 'transactionId'<\/span>: '1234'<\/span>,\n 'transactionAffiliation'<\/span>: 'Acme Clothing'<\/span>,\n 'transactionTotal'<\/span>: 38.26<\/span>,\n 'transactionTax'<\/span>: 1.29<\/span>,\n 'transactionShipping'<\/span>: 5<\/span>,\n 'transactionProducts'<\/span>: [{\n 'sku'<\/span>: 'DD44'<\/span>,\n 'name'<\/span>: 'T-Shirt'<\/span>,\n 'category'<\/span>: 'Apparel'<\/span>,\n 'price'<\/span>: 11.99<\/span>,\n 'quantity'<\/span>: 1<\/span>\n },{\n 'sku'<\/span>: 'AA1243544'<\/span>,\n 'name'<\/span>: 'Socks'<\/span>,\n 'category'<\/span>: 'Apparel'<\/span>,\n 'price'<\/span>: 9.99<\/span>,\n 'quantity'<\/span>: 1<\/span>\n }]\n });\nscript<\/span>>\n<\/span>\nnoscript>iframe src<\/span>=\"\/\/www.googletagmanager.com\/ns.html?id=GTM-P8XR\"<\/span>\n height<\/span>=\"0\"<\/span> width<\/span>=\"0\"<\/span> style<\/span>=\"display:none;visibility:hidden\"<\/span>>iframe<\/span>>noscript<\/span>>\nscript>(function<\/span>(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start'<\/span>:\n new<\/span> Date<\/span>().getTime(),event:'gtm.js'<\/span>});var<\/span> f=d.getElementsByTagName(s)[0<\/span>],\n j=d.createElement(s),dl=l!='dataLayer'<\/span>?'&l='<\/span>+l:''<\/span>;j.async=true<\/span>;j.src=\n '\/\/www.googletagmanager.com\/gtm.js?id='<\/span>+i+dl;f.parentNode.insertBefore(j,f);\n })(window<\/span>,document<\/span>,'script'<\/span>,'dataLayer'<\/span>,'GTM-P8XR'<\/span>);script<\/span>>\n<\/span><\/code><\/pre>\n<\/div>\ndataLayer<\/code> object is populated with all the required variables by the time the tag fires.<\/p>\n<\/span>;\nnoscript>iframe src<\/span>=\"\/\/www.googletagmanager.com\/ns.html?id=GTM-P8XR\"<\/span>\nheight<\/span>=\"0\"<\/span> width<\/span>=\"0\"<\/span> style<\/span>=\"display:none;visibility:hidden\"<\/span>>iframe<\/span>>noscript<\/span>>\nscript>(function<\/span>(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start'<\/span>:\nnew<\/span> Date<\/span>().getTime(),event:'gtm.js'<\/span>});var<\/span> f=d.getElementsByTagName(s)[0<\/span>],\nj=d.createElement(s),dl=l!='dataLayer'<\/span>?'&l='<\/span>+l:''<\/span>;j.async=true<\/span>;j.src=\n'\/\/www.googletagmanager.com\/gtm.js?id='<\/span>+i+dl;f.parentNode.insertBefore(j,f);\n})(window<\/span>,document<\/span>,'script'<\/span>,'dataLayer'<\/span>,'GTM-P8XR'<\/span>);script<\/span>>\n<\/span>\nscript>\n dataLayer.push({\n 'transactionId'<\/span>: '1234'<\/span>,\n 'transactionAffiliation'<\/span>: 'Acme Clothing'<\/span>,\n 'transactionTotal'<\/span>: 38.26<\/span>,\n 'transactionTax'<\/span>: 1.29<\/span>,\n 'transactionShipping'<\/span>: 5<\/span>,\n 'transactionProducts'<\/span>: [{\n 'sku'<\/span>: 'DD44'<\/span>,\n 'name'<\/span>: 'T-Shirt'<\/span>,\n 'category'<\/span>: 'Apparel'<\/span>,\n 'price'<\/span>: 11.99<\/span>,\n 'quantity'<\/span>: 1<\/span>\n },{\n 'sku'<\/span>: 'AA1243544'<\/span>,\n 'name'<\/span>: 'Socks'<\/span>,\n 'category'<\/span>: 'Apparel'<\/span>,\n 'price'<\/span>: 9.99<\/span>,\n 'quantity'<\/span>: 2<\/span>\n }]\n });\nscript<\/span>><\/code><\/pre>\n<\/div>\ndataLayer<\/code> when the Transaction Tag fires.<\/p>\ndataLayer<\/code>. You can try to rectify this with Tag Priority, but in this case it would be better to look at the next tip.<\/p>\nUse a custom event<\/h2>\n
dataLayer<\/code> before {{event}} equals gtm.js<\/strong> fires, or if there\u2019s even the tiniest possibility that the data won\u2019t be rendered in time, you could just as well push a custom event of your own.<\/p>\ndataLayer<\/code>, add an \u2018event\u2019 push in there, which you\u2019ll then use as the firing rule for your transactional tags:<\/p>\nscript>\n dataLayer.push({\n ... eCommerce properties ...,\n 'event'<\/span> : 'transactionComplete'<\/span>\n });\nscript<\/span>><\/code><\/pre>\n<\/div>\ndataLayer<\/code> by the time the tag fires, because the trigger event is pushed at the same times as the transactional data!<\/p>\nMake sure all the data is there<\/h2>\n
transactionId<\/code>
\nTransaction Total<\/strong> – transactionTotal<\/code>
\nProduct Name<\/strong> – name<\/code>
\nProduct SKU<\/strong> – sku<\/code>
\nProduct Price<\/strong> – price<\/code>
\nProduct Quantity<\/strong> – quantity<\/code><\/p>\ndataLayer<\/code>, the Transaction Tag will not get sent.<\/p>\ntransactionId<\/code> and sku<\/code> need to be unique. If you have multiple transactions with the same ID, or if you have many products with the same SKU, your data will be skewed.<\/p>\nDon\u2019t forget your JavaScript<\/h2>\n
dataLayer.push({\n 'ecommerce'<\/span> : {\n 'purchase'<\/span> : {\n 'actionField'<\/span> : , \/\/ WRONG! This key requires a value\n<\/span>