Tips & Tricks for Google Analytics (GA) + Google Tag Manager (GTM) + Accelerated Mobile Pages (AMP)

Setting up GTM + GA + AMP can be a “pull your hairs out” experience. So let me help you with this list of tips, tricks and pitfalls to avoid when setting up AMP with GTM and GA.

Event Logging in Google Analytics

So far the greatest pitfall has been with events. Events have 4 dimensions: category, action, label and value.

Now there is an article about events here https://support.google.com/analytics/answer/1033068?hl=en and it tells you that value needs to be an integer. But it doesn’t tell you what happens when you don’t adhere to value being an integer. What happens is that your event won’t get logged at all, even though your request to google analytics will get a 200 OK. It also doesn’t tell you, that having an undefined variable will result in the same problem. For example, if you have in GTM value = {{someValue}} , but someValue is undefined, the request being sent to GA is https://www.google-analytics.com/collect?…&ev=&… which results in the event not being logged.

Submitting information about a clicked element

Now in the regular tag manager, you get the Element Id / Click Id as built-in variable for clicked html elements. Not so for AMP. I thought you can’t transport information about a html element in AMP through GTM until I found this: https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md

Somewhere hidden in the darkest corner of some github repository’s readme lies a very important information on how to send information about html elements: through the data-vars-* attribute. So for example you could use data-vars-event-id , which you could then use in GTM’s variables like so:

So the dash-case from the html attribute gets transformed to camel case for the variable configuration. Or as the they put it in the github doc:

The variables passed as data attributes should follow the format data-vars-*.

Example:

<span id="test1" class="box" data-vars-event-id="22"> Click here to generate an event </span>

And in the request url the token would be of the format ${eventId} (follows camelcase).

(BTW: I only stumbled on it by reading through https://github.com/ampproject/amphtml/issues/1298 . Reading through github issues is so much fun…)

Generic Click Trigger

To log every click as an event, you can use the following trigger in GTM:


Subscribe to stay posted.

Top 6 Google Analytics Features for Beginners

Google Analytics is quite crammed with options, making it hard to find the useful ones. Here’s a list of the most useful features from the reporting tab, the most important one for starting.

Screen Shot 2016-05-14 at 22.20.56

#6 Dashboard

Somewhat hidden under Dashboards > Private > My Dashboard you’ll find the following metrics:

Screen Shot 2016-05-14 at 22.13.28

This gives you a good overview over your users. You see how many new users you’re gaining and how many you have in total and where they’re located. About the bounce rate you shouldn’t worry too. I’d stay clear of focusing too much on improving it, as it will improve naturally if you just provide an interesting page.

#5 Behaviour Flow

Screen Shot 2016-05-14 at 22.07.16

This view can be found under Behaviour > Behaviour Flow. This is interesting, if you have a complex website and you want to reduce the number of clicks a user needs to get to his or her goal.

#4 Pages

Here you can see which pages are doing best:

Screen Shot 2016-05-14 at 23.24.33

It’s found under Behaviour > Site Content > All Pages. This lets you know where you have done an exceptionally good job and what still needs improvement.

#3 Heat Map

In order to see which buttons get used on your page, it’s useful to install the Page Analytics (by Google) plugin for the Chrome Browser.Screen Shot 2016-05-14 at 23.35.07

Using this feedback, you can optimize your website by removing buttons that never get clicked anyways, or position important links more prominently.

#2 Audience Overview (Default Screen)

Screen Shot 2016-05-14 at 22.23.23

Google Analytics sets the default screen to Audience > Overview. Here you can gain a quick overview over what’s happening on your site. Of course you’ll want Sessions and Users to increase. That’s the page you’ll get addicted to, in order to see whether traffic on your page is increasing.

#1 Connecting Search Console with Google Analytics

A really useful screen is Acquisition > Search Console > Queries. But before this will work, you’ll need to connect your search console with Google Analytics. If you don’t have you’re site registered in google search console, you have to do so first. That’s important to be found on Google in any case.

Once you have established the connection, you can see which queries resulted in an impression of your website on Google and how often the search result was clicked:

Screen Shot 2016-05-14 at 23.10.42

So for this page, you see that some impressions were displayed, but none were clicked, which will hurt the ranking in the future. The (not set) is explained by Google like so:

To protect user privacy, queries made a very small number of times or containing personal or sensitive information are grouped as “(not set)”.

It’s possible that the view is not entirely up to date:

No data is available for the 2 most recent days.

Screen Shot 2016-05-15 at 15.33.04

The SEO view is so important, because it lets you know where you rank good on Google and where you could improve. For example, if something has 100 impressions but no clicks, you might consider putting a better description on the page. Or when you already rank good in “bla” for a page, you might consider to optimize the page even more for “bla” so it’ll get to Google page one, increasing your user numbers.