A Simple Guide for implementing Standard Ecommerce Transaction Tag

There are lots of theoretical posts showing pretty pictures of e-commerce reports and also telling you how to implement enhanced e-commerce via Shopify or WooCommerce. However, when I set out to learn how to implement e-commerce in Google Tag Manager (GTM) using the transaction tag, there was no simple step-by step-instruction that was free for the beginner. This post is an effort to simplify the implementation of the transaction tag.

For those looking to gather data in GA4 by using an existing transaction tag that uses the old purchase trigger for standard ecommerce, there is another post here for that.

Step 1: Enable eCommerce settings in your Google Analytics account. 

Go to Admin> [View that you are working with]>Ecommerce Setting and set the “Enable eCommerce” toggle to “ON” as shown in the picture below.

Step 2: Set up a purchase trigger in GTM

Now, you need something that will trigger the transaction tag to fire(we will build that in a minute). Ideally, you have an order confirmation or “thank you” page after someone submits their order. You can use that as a trigger as seen below

Sometimes, you don’t have a true “next page” when a customer buys from you. In such cases, it is recommended that we use a custom dataLayer event (Step 5 will make this crystal clear. Hold your horses please!). Set up the purchase trigger, exactly as pictured below:

Step 3: Set up the transaction pixel in GTM

Now let’s set up the Transaction tag that will collect data based on the triggers being fired in Step 2. Please see the picture below:

Step 4: Push the GTM container live

Everyone forgets this step in the excitement of setting up eCommerce to work perfectly so I made sure to remind you of doing that as a separate step.

Step 5: Send the dataLayer code to the developer

At this point, we have a trigger to fire on a custom event and a transaction tag that is supposed to pick up transactionID, revenue and products sold. This step is the key to get all the data collected via GTM and pushed through to Google Analytics. The code below will need to be present on the DOM(document object model) the moment a customer clicks on the “Buy” button(or whatever is the last step in your order process).

<script>

window.dataLayer = window.dataLayer || [];

dataLayer.push({

‘event’: ‘purchase’,

  ‘transactionId’: ‘1234’,

 ‘transactionAffiliation’: ‘Acme Clothing’,

  ‘transactionTotal’: 38.26,

  ‘transactionTax’: 1.29,

  ‘transactionShipping’: 5,

  ‘transactionProducts’: [{

   ‘sku’: ‘DD44’,

   ‘name’: ‘T-Shirt’,

    ‘category’: ‘Apparel’,

    ‘price’: 11.99, 

   ‘quantity’: 1

 },{

   ‘sku’: ‘AA1243544’,

   ‘name’: ‘Socks’,

   ‘category’: ‘Apparel’,

   ‘price’: 9.99,

   ‘quantity’: 2

 }]

});

</script>

Addendum: Some points to keep in mind.

The formatting above leaves a bit to be desired. For a properly formatted “Thankyou” page, please go to the following sample page and right-click to view the HTML source.

Please note that this code needs to be fired above the GTM code on the thank you page for the dataLayer to be populated before the GTM container fires. This is key to capture the data and cannot be stressed enough.

You will see that there is an event being fired that is called ‘purchase’. You will recall that we built a trigger in step 2 specifically to fire when this custom event fires. So now you can understand why we did that.

Make sure that the developer understands that the names of the variables within this dataLayer need to be EXACTLY as laid out in the example script above. TransactionId cannot be named anything else like transactionID or myOrderId or aPoxOnYouMarketing. No cuteness is allowed here.

Also, make sure to study the guidelines by Google on the types of these variables. For example, transactionTotal has to be a number and can’t have quotes around it. You will note that some variables are required, and some are not. All the values for these variables must come from the order itself. Please do not just copy and paste it into the codebase.

Speaking of quotes, please do not just copy the code from this blog post because the single quotes in the dataLayer above do not copy well. Please make sure to send them as plain text to the developer and point out that they are single quotes, just to make sure.

All the values for these variables must come from the order itself. Please do not just copy and paste it into the codebase.

You are done! Please understand that the code set up here is the bare minimum that the developer will need to implement for you to see product revenue, transactions and total revenue per order. If you want to implement enhanced e-commerce, I recommend the following links for you to read and digest. 

AnalyticsMania: How to Set up eCommerce Tracking in Google Tag Manager.

Simo Ahava: Enhanced Ecommerce Guide For Google Tag Manager.

Always remember that you are not alone in this walk along the dark caverns of e-commerce tracking. There are many lights that shine if you were but to look for them. Please let me know if something is not clear. I am always available to answer questions and to help if you get stuck somewhere.