Implementing Enhanced E-Commerce by using custom JavaScript tags instead of the Data Layer

So what do you do if you don’t have access to your template files in order to code JavaScript event handlers to your add to cart buttons and your checkout buttons?

You use custom JavaScript tags in Google tag manager. The way you do it is to set up your tag to get trigger when a certain element is triggered on a certain page. Now you should probably have a pattern for all your product pages that you can use for this. If your add to cart button doesn’t have a specific ID, you will have to use a different pattern to identify the element (for example, a class or something else).

Next you’re going to add in code for a function that manually inserts a JavaScript object into your web page with Google tag manager. Instead of reading from the data layer, you’ll be reading from a custom variable. It’s going to take some JavaScript skills and some knowledge of the syntax of Google Tag Manager, but it works.

Specifically, you’ll be adding in an add to cart JavaScript object or a check out object for Google analytics eCommerce.

How are you going to get all the information you need for your product name, ID, price, other details, Etc? You’re going to have to scrape the DOM, and that’s where your JavaScript skills will have to come in. Basically you’re going to have to use JavaScript functions to read and transcribe text from the web page so that it’s read and picked up by your JavaScript object and fed into your Google Tag Manager eCommerce code. From there that information will be sent into Google Analytics where it’ll become part of your reports. Good luck!

Example Code:

Measuring Enhanced E-Commerce Purchases

(You’ll need to put code like the one below inside a Customer JavaScript variable in Google Tag Manager. You’ll set up your Purchase tag to read from this variable instead of the Data Layer.)

function() {  

var shipping = document.getElementsByTagName("table")[0]; 
var shipping = shipping.replace(/\s+/g, ''); 
var shipping = shipping.innerHTML

// use the pattern above as an example to help you scrape the DOM for all of the other values that you'll need to include in your ecommerce data object below. (you already have shipping above, so now you'll need revenue, tax, id, and products). 

return { 
'currencyCode': 'USD',
'purchase': { 
'actionField': { 
'shipping': shipping, 
'revenue': revenue, 
'tax': tax, 
'id': id 
'products': products 

For more information, visit the Google documentation here:

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s