If you’re like us, you are loving the new Google Tag Manager (GTM). It makes the process of adding, editing and deleting tags (like Google Analytics) a snap! However, it has been somewhat frustrating trying to use Google Tag Manager while some of the basic features were still yet to be launched. As an example, when GTM first launched, the Google Analytics tag template only supported basic pageviews, with no custom settings.

Well… the tag template has been updated, and it’s no longer basic. In fact, there are tons of options, from hit types to configuration settings to campaign tracking and custom variables. Yay! One of the newest options is the ability to track eCommerce data using the GA tag template. It’s still a little tricky, however, because you have to use the dataLayer. Not only that, but the Google Analytics documentation for using the dataLayer to track eCommerce data is still a bit lacking.

Well fear not; we can help! Here’s how you can implement the dataLayer properly, create the right macros and successfully track eCommerce data to Google Analytics.

Pass in relevant data using the GTM DataLayer

To start, you’ll need to pass in the relevant eCommerce transaction and item data using the GTM dataLayer. If you haven’t used the dataLayer in the past, it’s basically a JavaScript object that sends data to your GTM tags. Now, this part isn’t documented very well at all, so pay close attention. You’ll need JavaScript on the page that looks similar to this:

    gtm_products = [];    gtm_products.push({  'name': 'Test Product',  'sku': 'SKU12345',  'category': 'Best Sellers',  'price': 15.99,  'quantity': 1  });
    //repeat for additional products        dataLayer.push({  'event': 'trackTrans',  'transactionId': '001',  'transactionAffiliation': 'Test',  'transactionTotal': 67.58,  'transactionTax': 4.62,  'transactionShipping': 6.99,  'transactionPaymentType': 'Credit Card',  'transactionCurrency': 'USD',  'transactionPromoCode': '',  'transactionProducts': gtm_products  });

I’ll walk you through this. First, we create a new JavaScript object called “gtm_products”.  This array is going to hold all of the information about the items being purchased. Notice how for each item we loop through and set values for name, SKU, category, price, etc.

The second part is the transaction data, including the total price, shipping, transaction ID, etc.  Notice the last variable in this object is the “gtm_products” object.  It’s an object inside an object, similar to a dream inside a dream…

Also notice that the first key in this transaction object is “event” and the value is “trackTrans”.  This value can actually be anything, but we’re going to use that in our rules to know when to fire the GA tag. (Right now it seems you need to do this, even though Google doesn’t mention it anywhere. Hopefully this will change, or at least be documented in the future.)

Anyways…that’s all you have to do as far as coding on the page.  Remember, this is JavaScript, so wrap it in script tags.

Create the Tag & Rule

OK, now it’s time to work inside GTM. Create a new tag that looks like this:

Add New Tag_Ecommerce Tracking with Google Analytics Using Tag Manager_Vertical Nerve blog

 

For the firing rule, you’ll want to add a new rule that looks like this:

Firing Tag_Ecommerce Tracking with Google Analytics Using Tag Manager_Vertical Nerve blog

 

This rule says to only fire the tag when the dataLayer variable gets set. Remember, this is important and currently not documented anywhere.

OK, that’s about it! Leave a comment below if you have questions or if you found this helpful.