Category: Google Tag Manager

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.

Analytics, Google Tag Manager

Tracking Google Analytics Events in Squarespace

Ateeq Ahmad

GA_SS

In the world of freelancers one does come up against massive walls of code that are really not made to work with one another. In setting up Google Analytics tracking on any site that is made in wordpress, Wix or Squarespace, one encounters all sorts of peculiarities.

I am going to talk of capturing events in Google Analytics from within the Squarespace environment.

First of all, the normal way to integrate Google Analytics in Squarespace is easy enough. Just do the following:

Config  — >  Settings  –> Advanced  –> External Services

and put the UA-XXXXXXX-Y number in there.

However, please note that this will conform to Google Analytics tracking that is several generations old.

Also, this is just page view tracking though. You won’t be tracking any events this way.


How does one add event tracking where a new page is not going to be called?


I am going to describe how you do this for a newsletter capture lightbox in Squarespace.


It turns out that there are three ways to do this although only one works for me. I am listing all three in case my environment is weird and the other ways might work for you.


1. Use Javascript shenanigans:

Essentially, what you want is to pass the event code to Google Analytics only when the submit button on the lightbox is clicked. For that you set up a listener to call a function which fires the event tracking code when called. This is very well described by Rocketeer SEO Hero and also by Silvabokis.

This did not work for me. Even though I tried several combinations but the variable value that should get assigned to 1, never happened.

2. Try and force Google Tag Manager(GTM) to do this for you:

GTM is not supported directly in Squarespace. You have to take your GTM header code below:

<!– Google Tag Manager –>

(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-XXXXXX’);

<!– End Google Tag Manager –>

and put this on Config  — >  Settings  –> Advanced  –> Injection (Header)

Then take the code that should reside in the body tag

<!– Google Tag Manager (noscript) –>

<noscript>https://www.googletagmanager.com/ns.html?id=GTM-MN8VFPH</noscript>

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

and put it here  Config  — >  Settings  –> Advanced  –> Injection (Footer)

This is also described well by Yoweb.

Now go to Google Tag Manager and build an event only tag that collects data when a trigger is fired upon a particular form class is seen. Please see this wonderful description ( read carefully for this process is convoluted) by Atomic Marketing.



3. Try to play within Squarespace:

This is a simple technique and did work for me. Go to the newsletter form and click on edit.

form_edit_GA_SS

Click on Advanced and then scroll down to ” Post-Submit HTML”.

Now, this is a place where you put in the event call as follows:

   <script>

ga(‘send’, ‘event’, ‘newsletter’, ‘click’, ‘submit’);

</script>

Effectively, you are stating the Event Category [newsletter], Event Action [click] and Event Label [submit]. There are single quotes in the code above. When you copy and paste from here, they sometimes don’t get picked up that way so make sure to error-check that.

Go into the Google Analytics interface and add these values as a desirable goal and you are done. This method is quite simple but please be aware that this may not work like this if Google stops supporting this or Squarespace updates their codebase.

In any event, I hope this article is of some use. Do let me know if you have any further questions.

Google Tag Manager

Gravity Form Tracking with Google Tag Manager

Ateeq Ahmad

Objective: Record all gravity form Interactions

Process:

There is no good way of linking Gravity Forms and GTM that is documented by either party.

I found a method devised by another power user that uses form submissions and started to follow that.

However, form tracking in the way he put it together does not work for us.

I suspect that is because multi-page gravity forms don’t have a submission until at the very end.

So, I devised a way that piggybacks on the tag generated when a Gravity Form(GF) is fired.

This tag is generated by placing a custom javascript event.

You can copy the contents below and it should work for you if you use jQuery[help link]

————————————————————————————————————————–

if(jQuery(‘.gform_confirmation_message’).is(“:visible”))/* page load */ { var formId=jQuery(‘.gform_confirmation_message’).attr(‘id’).replace(‘gform_confirmation_message_’,”); dataLayer.push({‘event’:’gform.submit.success’,’formId’:formId}); } jQuery(document).on(‘submit’,’form[id*=”gform_”]’,function(){/* for Ajax Load */ clearInterval(window.gsetInt); var formId=jQuery(this).attr(‘id’).replace(‘gform_’,”); jQuery(this).find(‘.gfield’).removeClass(‘gfield gfield_error ‘) window.gsetInt=setInterval(function(){ if(jQuery(‘.gform_confirmation_message_’+formId+’.gforms_confirmation_message,.gform_confirmation_message_’+formId+’.gform_confirmation_message’).is(“:visible”)) { clearInterval(window.gsetInt); dataLayer.push({‘event’:’gform.submit.success’,’formId’:formId}); } if(jQuery(‘#gform_fields_’+formId+’ .gfield_error’).is(“:visible”)) { clearInterval(window.gsetInt); dataLayer.push({‘event’:’gform.submit.error’,’formId’:formId}); } },200); });

————————————————————————————————————————–

Once you create the event, turn on the preview mode in GTM and see if the GFTrackEvent is firing.

This event works has the following content:

  1. That tag(“Gravity from custom tracking”) fires and creates an event called “GFTrackEvent”

gf_1

2. I created a trigger,”Find GFTrackEvent”, that fires after the above event fires

gf_2

3. I created a dataLayer variables to capture the label from “GFTrackEvent”. If needed,

you can also capture the action but we don’t need it right now.

GFTrackLabel

gf_3

4. I created another tag called  “Event Tracking Tag For Gravity Form” which stores the above dataLayer values

gf_4
This tag get fired when either “GFTrackEvent” occurs OR when we get to the lead thank you page.

5. The picture below shows them as events being recorded in Google Analytics.

gf_5

Result: The tracking of submission works and also includes the pages that were being paginated to.

Usage: We can use this pagination and lead capture in the dashboard stating now

Improvements Possible: If we want to track the exact options that a user chose on each of the

pages( apart from personal information which Google does not allow), then will have to pick up

information from click elements and somehow fire that as events.

Please let me know if you have any questions.