Category: Google Tag Manager

Analytics, Google Analytics, Google Tag Manager

A Simple Guide for implementing Google Analytics Transaction Tag

Ateeq Ahmad

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

Ateeq Ahmad

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, Google Tag Manager, Shopify

How to Enable Google Tag Manager in Shopify

Ateeq Ahmad

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.

Google Tag Manager

GDPR Compliance for Google Tag Manager and Google Analytics

Ateeq Ahmad

The time is upon us when we all have to comply with the EU’s regulations on privacy. While websites in the USA don’t have to technically comply BUT everyone accessing your site from the EU is protected under this statute and so it is best for all of us to “get with the ball game”, so to speak.

So what are we supposed to do? Let me list down the steps that need to be taken.

Step 1: Data storage in Google Analytics. Please go into the Property Setting and look for the Data Retention menu as below:

gdpr_ga_01
Make Data Retention as long as possible

Click on the tab and you will see choices of how many months of data to keep. I went for 50 months because that is the maximum time explicitly allowed. I wouldn’t recommend “Do not automatically expire” option because it is quite vague.

The option “26 months” is a Google-suggested default, just so you know. Here is some more information on Retention.

Step 2: Anonymize IP. If you use Google Tag Manager as any normal human being should, this is a very simple setting change. Please go into the Universal Analytics tag that fires on every page view and set the Fields to Set to have anonymizeip as TRUE.

gdpr_ga_02

Now, the last 4 digits of a user’s IP will be marked as ‘0000’ and you cannot identify them in any way. Not that you were doing anything with it but still, that is the guideline.

If you are not able to use GTM for any reason, just change the normative collection by adding the following to every page of your site.

<!– Global site tag (gtag.js) – Google Analytics –>
https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID

Step 3: Advertising and Re-targeting. Some of the more conservative folks are recommending that you shut down the re-targeting and advertising features in Google Analytics. If you are not using them, do turn them off, otherwise there is no harm in keeping them on.

gdpr_ga_03

Step 4: Set up a cookie consent form. The best recipe that I have seen is by our friends at AnalyticsMania. This is a great a quick recipe to install using Google Tag Manager. It will put you in more compliance than is absolutely necessary.

One more thing…..

Step 5: Audit your site so that there is no PII being sent to Google Analytics. So any emails, userID’s or any unencrypted content. I know a lot of folks who have email addresses floating around in URL’s or events.

Please desist!

You do not want to be banned from Google. Getting back in requires and lot of work. Clean all new data collection to make sure nothing personal gets recorded in Google Analytics. Read this article; memorize if necessary.

You are all done and now can rest easy that the EU will not come after you.

Analytics, Google Tag Manager

UserID tracking in Google Tag Manager(GTM)

Ateeq Ahmad

uid_gtm

Why do we need to do that?

Ostensibly Google says that you do this for tracking true users of your site. Since multiple devices generate a visitor cookie each, they get counted as different visitors. You can stitch sessions cross-device by creating a userid view.

However, if we want to track CAC and LTV by referral sources and we have only Google Analytics and an internal database around, we can piggyback on this method to measure them.

It is tricky and will require some testing before it runs in your environment. However, it works and I have managed to figure it out in Google Tag Manager and will lay it out for you dear analyst, step by step.


Step 1

Create the User-ID view in Google Analytics. Go to the Property and expand “.js tracking Info”. Then follow the prompts as seen in the picture below.

uid_gtm_02

After you have done the above, let’s create a dimension to store this data.

Step 2

In the same property column, below the PRODUCT LINKING tab, sits a place to create custom dimensions as shown in this picture below.

uid_gtm_03_02

 

Click on create dimension and add the custom dimension as shown below:

uid_gtm_04

Please note that you have to name it userID. This is because I am going to name the data layer variable later the same. They have to be so to capture your user information.

Step 3

Have your awesome developer pass the user-id value to the data layer variable called userID. The values that it should spit out if you click “view-source” on your site should look like this:

dataLayer = [{‘userID’: ‘yyyyyy’}];

dataLayer.push( {‘event’:’uidAvailable’, ‘uid’:’yyyyyy’} );

They can push this change live anytime and will be quite thankful for the Starbucks drink you will treat them to.

Make very sure that this userID being made cannot be Personally identifiable information(PII). So no names, email addresses, etc.

Step 4

Ok! Let’s push on now to the Google Tag Manager and the last part of this implementation.

Open up your tag manager and on the left hand side where it says, variables, click and add a user defined variable. We will call it userID.

uid_gtm_05

Now, on the left hand side open up the tags section. On all the tags that have anything to do with an event or page view, we will make slight edits. Let’s start with the Google Analytics tag (it should be set to universal Analytics otherwise this will not work).

step_4_2

We add two variable to be filled when the tag fires, one is the userId (please note that this is the exact name you need to set). The other is the custom dimension that we have created in Google Analytics so we can run reports based on our own user-ids, which I am sure, are aligned to email addresses.


Step 5

Now, let’s set our workspace on Google Tag Manager to Preview the changes that we have made. If this works, the Real-Time reports in Google Analytics will immediately start collecting data. Once it works, then go ahead and publish the new tags.

Now, you should be free to download the userID and referral source. You can download the LTV and userID from your own database and analyze in Excel or any other spreadsheet of your choice.

You would have noticed that I keep harping on the name and case of the variable “userID” and “userId”. I thought to name all variables the same and it didn’t work. However, hard-coding the variables works perfectly!

Do let me know if you have any issues with this and I can walk you through the implementation, if need be.