Category: Web Analytics

Introducing: the Google Tag Manager & Google Analytics for AMP – WordPress Plugin

Today it’s time to make it easier for sites running AMP on WordPress to track & measure their web site traffic. Over the past weeks I’ve been working on a WordPress Plugin which supports adding Google Tag Manager and Google Analytics to your AMP pages. As AMP itself is quite a hard new platform to get completely right, I thought it was time to make it easier for developers, marketers and analysts to do more with the platform.

Over the last year AMP had as massive increase in support and their WordPress plugin is rising to the charts of the most downloaded plugins on WordPress but overall the support for web analytics & tag management is lacking. The documentation is available, but as the abilities within WordPress are still limited I thought it would be pretty straight forward to come up with a plugin to enable users to start using GTM & GA on AMP pages.

So that’s what this plugin will help you with, the ability to add Google Analytics or Google Tag Manager to your pages, start tracking more advanced features (outbound click tracking) and provide 10 (for now) custom variables that you can use as custom dimensions.

You’re curious how to start? Check this out:

Moving away from onclick events, data attributes it is

Onclick attributes are amazing to easily sent some data to the dataLayer. It will make sure that on every click the data is being sent:

<a href=”http://example.com” onclick=”dataLayer.push({‘eventCategory’:’Click’, ‘eventAction’:’This Link’, ’eventLabel’:’Anchor Text’});”>Link</a>

Looks valid right? It is and it will work for you. But the problem is that with external links the dataLayer push won’t hit the browser + Google Tag Manager before the browser moves on to the external link (not taken into account links that open in a new tab/window). Which means that you’ll lose the onclick event in Google Tag Manager and won’t be able to record it.

But there is a great alternative, which we switched to for The Next Web when we found out this was happening. Data attributes can be very useful instead. If you’d use them like this:

<a href=”http://example.com” data-eventCategory:’Click’, data-eventAction:’This Link’, data-eventLabel:’Anchor Text’”>Link</a>

Why this works? The link attributes on click will always be sent automatically to Google Tag Manager. So making sure that the data attributes are part of the link and not in a separate dataLayer.push will improve it. Next step is to create a variable in Google Tag Manager for all three attributes:

Make sure to set the default value to undefined. In this case Google Tag Manager won’t take any actions in the next step, which will be defining the Trigger. Repeat this another two times for the Event Action and Event Label.

This trigger will check all incoming links, with a data-event-category attribute that doesn’t equal undefined and that has any values. In the next step for your Tag you can use all three variables that you’ve defined before.

You’re all set! You can now use data-attributes for your links to make sure that you won’t lose any data when the browser isn’t ready to receive dataLayer pushes and you just made your tracking a bit more efficient!

The discovery & benefits of using ga:dataSource in Google Analytics

As there is always something new to learn in this world I recently came across (by a tip from Simon Vreeman) the dimension: dataSource in Google Analytics. It’s one that isn’t very well known, as it’s not available through any of the default reports, but can help bigger companies with integrations in multiple places in a great way. In our case it was incredibly useful to make reporting on AMP performance more easy.

DataSource is meant to provide an additional field to send where you’re sending the data from. But it’s different from a hostname or page path because it’s more about the source. By default it will always send the value: ‘web’ for sites, ‘app’ for mobile apps and apparently ‘amp’ for AMP tracking. Something that, in our case, was very valuable as traffic on AMP pages can be hard to find as a bulk. Filtering on pages that have ?amp or /amp/ as a pageview ain’t great if you want to see the traffic sources for 1 specific article. With LinkedIn also supporting AMP that won’t make it easier. Discovering dataSource makes it easier for us to kill a custom dimension to set the dataSource and immediately being able to filter down on this and then on referral traffic.
How you can leverage it? Send data from a specific source, for example your CRM, data warehouse or your email campaigns. We’re sending for The Next Web a hit to Google Analytics via the measurement protocol to track email opens. We’ll probably move this over as we would see it as a different dataSource then it being a ‘web’ hit.

How to configure the dataSource

Google Tag Manager: You can easily set it up in Google Tag Manager by creating an additional field that you can set, apparently it’s so unknown that it isn’t covered in the default field that are suggested. But if you add ‘dataSource’ as a field and enter the value (in this case a hardcoded value, but I would recommend going with a GTM variable).

Google Analytics: Setting this up in Google Analytics works in about the same way, you can add it as an additional field in your hit call to GA to set it by adding it like this.

@GoogleAnalytics: I know you’re reading this, please help us and update the documentation to also mention ‘amp’ being a default data source for tracking on AMP pages.

How to report

Creating a custom report

As the dimension isn’t available through a standard report you’ll have to create a custom report to do so. With our data I created a report like this that can be used to report on where traffic is coming from specifically (I’ll talk about the hit referral path in another blog post).

Look at this table 😃 with information about the dataSource dimension