Category: Tag Management

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!