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.

Analytics, Business Intelligence

Some Sample Dashboards in Google Data Studio

Here is a collection of dashboards that I generally promote to clients because they can be immediately put into operation. All you have to do is replace the sample data set with your own personal data. These are copyright free. Just understand them well before using them.

Sample of Adwords Dashboard

As you can see, this is a simple dashboard that gives you the performance of your campaigns at a quick glance. You can see a demo or download it from here.

Comprehensive e-Commerce Sample Dashboard

This is a huge dashboard bordering on a comprehensive report that e-commerce companies will usually want to see right away. It includes 5 sheets and can get you off the mark right away. You can download it right here.

Content Performance Sample Dashboard

If you are working for a content site that really needs to know how each landing page performs, I have used the above dashboard to start the conversation with a client many a time. This dashboard has several filters that allow you to segment the traffic and judge performance accordingly. You can copy this report from this link.

There are a lot more dashboards and reports that other people have shared with me so if you need something more specific, drop me a line here and I will get it for you.

Analytics

Adding Google Analytics and Google Ads Conversion tags to Cvent landing pages

Step 1

Cvent has provided a guide to add Google Analytics integration to its landing pages. Please pick up the guide here and follow the steps 1 to 3 on page 9. Please enable the linker plugin there too. See picture below:

image.png

Step 2

Now, that Google Tracking is in place, add the conversion tracking code for Google Ads.

Please add the two code snippets posted below to the “Admin>Account>Account>Code Snippets>”. Please follow this video for the details.


The re-marketing pixel for each Cvent form:

—————————————————————————————————————

<!– Global site tag (gtag.js) – Google Ads: 1002231020 –><script async src=”https://www.googletagmanager.com/gtag/js?id=AW-1002231020“></script><script>  window.dataLayer = window.dataLayer || [];  function gtag(){dataLayer.push(arguments);}  gtag(‘js’, new Date());
  gtag(‘config’, ‘AW-1002231020’);

</script>

—————————————————————————————————————  

The conversion pixel for each time a lead is submitted via Cvent:

<!– Event snippet for Cvent Form Conversion conversion page –> <script>  gtag(‘event’, ‘conversion’, {‘send_to’: ‘AW-1002231020/bYQ2CJDy25oBEOyp890D’});</script>

Step 3

  
Once done, and the code is assigned to the right places, as per the video link above, please enable cross-domain tracking from within Google Analytics. Excellent video provided by Benjamin at LovesData.com


Step 4

One more thing left to do is to add cvent.com to the Referral Domain Exclusion list in Google Analytics. To do that, please go to the Property( the middle portion of the Analytics account) as shown below

Please click on the yellow “Referral Exclusion List” and enter this text into the referral exclusion list.

That’s it! You are done and will be able to track Google Ads conversions as well as page views on the Cvent landing pages to your heart’s content.

The same process can be followed for Facebook and other traffic sources by just replacing the code in Step 2 with the equivalent for tracking the other traffic sources.

I do realize that this is a bit confusing so I can get on a call with the developer putting this in place if needed. To contact me, get me on Upwork or just write to me here.

Analytics, Google Tag Manager, Shopify

How to Enable Google Tag Manager in Shopify

I get lots of questions on how to add events in Shopify. It is tough to do that without using Google Tag Manager(GTM). However, there is no space in Shopify preferences to add the GTM code. So one is stymied.

Not quite. There is a sneakier way to still do this. So let’s give it a shot.

Step 1

First, add the UA-XXXXXXXX code that you get from Google Analytics into the box marked in Shopify as seen in the picture below.

 To get to this page, you need to click on “Online Store” on the left Menu and then click “Preferences”.

Step 2

Now, go and build a GTM container. An excellent video to show you how.

Now that you are done deploying Google Tag Manager, put a couple of events together in the container besides page view tracking.

Step 3

Let’s choose scroll tracking and outbound click tracking because they can apply to pretty much every website.

For Scroll Tracking, again an excellent video by LovesData will guide you.

Now, try and put together an event for tracking outbound links. We will use another great video by Whole Whale on YouTube.

Step 4

Now that you have configured both events, go ahead and pause the tag for page view tracking. Let me show you how to do that.

Step 5

Now that all these steps are done, copy the code for the header from GTM. It will look like this

<!– Google Tag Manager –>

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:

new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],

j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=

https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);

})(window,document,’script’,’dataLayer’,’GTM-XXXXXXX’);</script>

<!– End Google Tag Manager –>

Step 6

Let’s go back to the Shopify interface and add the GTM code above into the yellow area shown in the image below

Click Save in the top right corner(not shown in the picture).

This is going to make sure that all the events that are added can be fired through Google Tag Manager. The page view collection will be done by the Shopify integrated Google Analytics code. In case you are not able to add the GTM code and get an error that says, “Analytics extras is disabled for the moment. Contact support to enable editing of this field”, you do not have admin permissions. Either get them assigned to you or ask the admin to put in this code for you.

Step 7

There is just one more thing, add a product in your shopping cart and go to the “/cart” page. You will notice that GTM does not show up at all. This is a bit of a doozy and has to do with the interaction between GTM and Shopify. To get over this, you will have to take the footer code in GTM, given below:

<!– Google Tag Manager (noscript) –>

<noscript><iframe src=”https://www.googletagmanager.com/ns.html?id=GTM-NHJDFPQ&#8221;

height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>

<!– End Google Tag Manager (noscript) –>

..and add it to the start of the <body> tag in theme. liquid file. You can place it at the end of the body tag too. This will enable GTM code on the checkout page. Please save the theme.liquid file and please re-load the website to make sure nothing is broken. Of necessity, you are doing this in production( small shops don’t have a staging Shopify environment), so it pays to be extra careful.

What happens if the site breaks?

Don’t panic! Just revert to the earlier theme.liquid file and make sure that your copy-paste job has the correct code. Re-input the code within the body tag; save again and check again. If it doesn’t work again, revert to previously working code and notify your programmer. They will help you fix this issue.

This is a hack and you should not assume that it will work in your account. Please test and make sure that only one pageview tracker is firing. A surefire way to know that two trackers are firing is to observe bounce rates in Google Analytics. They will immediately go to zero.

I hope this works for you. Do let me know if you have any questions.