Analytics, Google Analytics, Google Tag Manager

A Simple Guide for implementing Google Analytics 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.

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.

Analytics, BigCommerce, Google Analytics, Google Tag Manager

Integrate BigCommerce and Google Analytics

One of the most common platforms in use today is BigCommerce and it allows seamless integration with Google Analytics. However, their own documentation and other tutorials don’t explain it very well. This post attempts to do so simply and with lots of pictures. We will also implement a couple of events in Google Tag Manager that will allow us to track the behavior of our visitors on the BigCommerce Checkout page.

I feel it is best to proceed in steps as this is a prescriptive post. So here it is.

Step 1: Google Tag Manager Set up

We do need to set up Google Tag Manager(GTM) for our website (it will become apparent why in Step 5). There are a million guides on how to do that so I will not add any value writing my own implementation. Let’s assume you have seen this video….

Note: I profess adoration for Benjamin and the simple and comprehensive manner in which he explains some very tricky concepts. Please subscribe to his channel and learn.

…and implemented the Google Analytics pageview tag from within GTM.

Step 2: BigCommerce Google Analytics set up

  1. Login to your account in BigCommerce.
  2. Click on Advanced Setting on the left-hand tab as shown below
  • Then click on Web Analytics on the sub-menu of Advanced Settings.
  • You will see the following screen with some selections to make.
  • Please select Google Analytics and click the save button in the bottom right corner.
  • You will be taken to this screen. Click the Google Analytics tab marked in Green.
  • You are now presented with two options
  1. One, just add the Google Analytics code here. It looks like this

<!– Global site tag (gtag.js) – Google Analytics –>

<script async src=”https://www.googletagmanager.com/gtag/js?id=UA-2124872-7″></script&gt;

<script>

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

  function gtag(){dataLayer.push(arguments);}

  gtag(‘js’, new Date());

  gtag(‘config’, ‘UA-XXXXXXX-X’);

</script>

And you can get the UA ID from your Google Analytics > Admin > Property > Tracking Code

  • Two, you can enable enhanced ecommerce tracking with just a click. I highly recommend you choose this second option because it gives you a lot more data with no real downsides.
  • Click save and you are done with the implementation in BigCommerce.

Step 3: Enable eCommerce in Google Analytics

Enable eCommerce settings in Google Analytics by going to Admin > View Settings > Ecommerce Settings and configuring the set up exactly as below:

You can name your funnel steps differently but there are only two of them in the BigCommerce checkout process.

Step 4: Check the events using Data Layer inspector

If you have not downloaded the Data Layer Inspector extension by Adswerve, please do so before proceeding forward.

Now go to your website and add a product to the cart. If you are on a PC, press CTRL+SHIFT+I to see the developer tools. You can also get there by following the path shown in this picture below.

Once you are there, click on the Console tab. It is to be found between Elements and Sources. You will notice that a page view(with your tracking domain) and an add-to-cart event have both been fired as seen in the picture below.

Once you go to the checkout page, you will see more enhanced eCommerce events firing, as shown in the picture below.

All these events will feed into the Google Analytics conversion reporting section and will help you see where customers are dropping off.  

Step 5: Add the button events on the Checkout page

The one thing that you are not able to determine is how people behaved at the checkout step. There are no events automatically set up to capture the “Continue as Guest” button and the “Continue” button after the shipping and billing information is submitted.

To set these up, we will use Google Tag Manager(GTM). We will set two events.

  1. Continue as Guest Button: Add a trigger to fire when the click text value is “CONTINUE AS GUEST” and the page path is “/checkout” exactly as the picture below.

Now, create a tag to record an event when the above trigger fires. You can configure it exactly as the picture below

  • Continue after Shipping Address: Add a trigger to fire when the click text value is “checkout-shipping-continue” and the page path contains “/checkout”. You can copy the picture below.

Now, create a tag to record an event when the trigger is fired. You can configure it exactly like the picture below.

These events will give you a sense of how people behave at the checkout step. There are a few other events you can capture on the checkout page. For example, the type of payment chosen(Paypal, Google Pay, etc.)

Step 6: You are all set! High fives all around!

Just make sure that you have configured all the above steps correctly. If you have any questions or encounter problems, please write to me and I will help you get set up properly.