DOM Scraping Together a Datalayer for Google Analytics Ecommerce Tracking

Google Analytics' e-commerce tracking is generally the most developer-intensive part of a Google Analytics implementation, because it requires a developer-built data layer on the transaction confirmation page. The data layer collects all the relevant data -- the transaction ID, the checkout total, the product names, the prices, and so on -- and lays them out in an standardized syntax that can be read by Google Tag Manager and sent off to GA's servers.

But what if... you had to implement e-commerce tracking without any outside developer assistance, entirely through Google Tag Manager?

This post will show how to set up e-commerce tracking on your own, entirely through GTM. There will still be an e-commerce data layer, but you'll build it yourself, by scraping the data you need off the page and adding it to a custom HTML tag. Since this type of DOM scraping isn't reliable in the long run, this tracking should usually just be used for protoyping, short term patches, or cases where there's no other option (it happens). For this example we'll use GA's Standard Ecommerce Tracking, but you could modify the script slightly for Enhanced Ecommerce.

Please note that this endeavor requires the ability to identify CSS selectors and edit some basic JavaScript. I've provided complete code snippets, but you will likely need to adjust them for your own site.

COLLECT THE DATA INTO VARIABLES

These are the required elements for ecommerce tracking, as shown in Google Tag Manager's documentation on the Google Analytics data layer requirements for ecommerce tracking.

What this means is that at a minimum we only need to set up variables that collect the transaction ID and transaction total. All the Product Data values are located inside the transactionProducts array, which is optional. However since this aspect of ecommerce tracking is usually included, I'll show how to include it here as well. Let's go through the process of collecting these off the page.

SCRAPING TRANSACTION DATA

The transaction data is very straightforward, because there's only one transaction ID and one total per checkout. To access these, inspect the page to find their selectors.  Here I've hovered over the transaction total on an ecommerce site and right-clicked to select Inspect and open the Developer Tools pane, revealing the following:

This shows that the Total value is located under div class = "order-summary:total", and can be accessed via this JS snippet:

document.querySelector("div.order-summary\\:total span:nth-child(2)").innerText;

Since that returns a string, we also need to convert it into a number, by adding this to the end:

.replace(/[^0-9\.-]+/g,"")

Putting it all together, in GTM we navigate to Variables > New >  Custom JavaScript and enter the following:

function(){
  return document.querySelector("div.order-summary\\:total span:nth-child(2)").innerText.replace(/[^0-9\.-]+/g,"");
}

The completed Variable should look like this:

Repeat the above for the transaction ID. Since the transaction ID doesn't have to be a number, you can leave off the .replace(/[^0-9\.-]+/g,"") part of the function.

SCRAPING PRODUCT DATA

The product data is a little more complicated as there may be multiple products in a single checkout. As with the transaction data, you find the selector that identifies your products, and then you need to loop through it and push all the relevant information into an array. You will also be using document.querySelectorAll (rather than document.querySelector) because you want to capture ALL the product values, not just the first one. This code snippet should work, but you need to replace ".ItemName" with your site's specific CSS selector.

function(){  
var itemNames = document.querySelectorAll(".ItemName");
var iLen = itemNames.length;
var nameArray = []
for (i = 0; i < iLen; i++) {   
    nameArray.push(itemNames[i].innerText);	 
}
  return nameArray;  
}

The completed Variable should look like this:

Repeat this for each of the 4 product variables, modifying only the query selector (the value located in the parentheses after .querySelectorAll). The product prices will also need to be converted into a number.

As mentioned above, the list of products is optional, so if you find this step difficult, or you don't actually need to track the specific products, you can just leave it out.

Once you've completed scraping the transaction and product data, you should have the following variables:
{{JS - Transaction ID}}
{{JS - Transaction Total}}
{{JS - Product Names}} //optional
{{JS - Product SKUs}} //optional
{{JS - Product Prices}} //optional
{{JS - Product Quantities}} //optional

CUSTOM HTML TAG FOR GOOGLE ANALYTICS ECOMMERCE DATA LAYER

Once you have the variables above, you can copy and paste this code as is into a custom HTML tag:

<script>
var ecomProducts = [];
for (var i = 0; i < {{JS - Product SKUs}}.length; i++) {
  ecomProducts.push({
    'sku' : {{JS - Product SKUs}}[i],
    'name' : {{JS - Product Names}}[i],
    'category' : '',
    'price' : {{JS - Product Prices}}[i],
    'quantity' : {{JS - Product Quantities}}[i]
  });
}  
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event' : 'trackTransaction',
  'transactionId' : {{JS - Transaction ID}},
  'transactionAffiliation' : '',
  'transactionTotal' : {{JS - Transaction Total}},
  'transactionTax' : 0,
  'transactionShipping' : 0,
  'transactionProducts' : ecomProducts 
});
</script>

If you aren't tracking specific products, just edit out that section of the script and paste in the following snippet instead:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event' : 'trackTransaction',
  'transactionId' : {{JS - Transaction ID}},
  'transactionAffiliation' : '',
  'transactionTotal' : {{JS - Transaction Total}},
  'transactionTax' : 0,
  'transactionShipping' : 0,
  'transactionProducts' : '' 
});
</script>

Attach a pageview trigger to this datalayer push tag, so that it fires on your transaction complete page.

SET A TRIGGER

In the above code we're pushing a GTM event called trackTransaction to the data layer.

Set a trigger to read this event, with the following settings:

Trigger Type = Custom Event
Event name = trackTransaction
This trigger fires on: All Custom Events

SET THE GOOGLE ANALYTICS TRANSACTION TAG

Set up a transaction tag with the following settings:

Tag Type = Universal Analytics
Track Type = Transaction
Trigger = trackTransaction custom event

CONCLUSION

In the above steps, we grab all the pertinent ecommerce values off the page using JavaScript and CSS selectors, and collect them into GTM Variables. We then set a custom HTML tag that creates an ecommerce data layer using those Variables, including a custom event trigger. Finally, we created a Universal Analytics Transaction tag that reads that data layer and submits the information to Google Analytics to populate the Ecommerce reports.  Again, it's not recommended as a long-term solution, since any changes to the page layout can break the CSS selectors, but it demonstrates the power of GTM and is a very convenient option when you need it.