How to Mimic the Google Tag Manager Click URL Variable When Using AMP

Learn how to bypass the lack of Click URL variable support in the AMP GTM container, and how to easily implement it with WordPress.

The Click URL Google Tag Manager variable allows you to automatically track all link clicks, and later filter them by their hrefs. This way you don’t have to worry about defining new link-related events – they are all automatically captured. This is nice.

But using AMP makes product analytics work much more difficult. When using an AMP Google Tag Manager container, the list of available variables is limited, and the Click URL variable isn’t in it.

Luckily, AMP allows variables as data attribute for click events. That is, you can pass variables using a data-vars-* the attribute in the click-element. For example:

<a href="example.com" data-vars-click-url="example.com"> Click here to generate an event </a>

The data attribute is later available for the JSON amp-analytics configuration as ${clickUrl} (mind the camelCase):

{ "click": { "on": "click", "selector": "a", "request": "event", "extraUrlParams": { "event": { "event_type": "link click", "event_properties": { "click url": "${clickUrl}" } } } } }
Code language: JSON / JSON with Comments (json)

How to do it on WordPress

So you need to copy each link href into a data-vars-click-url attribute. If you are using WordPress, it isn’t a trivial solution. You can start dig-in and look for filters, but as links can be formed in multiple ways and by multiple plugins you can never be sure you covered everything, and that things won’t change or be added in the future.

Luckily, there is a capture-them-all method, using this nice hack:

<?php add_action('wp_head', 'buffer_start'); function buffer_start() { if (!wp_doing_ajax()) { ob_start('callback'); } } add_action('wp_footer', 'buffer_end'); function buffer_end() { if (!wp_doing_ajax()) { ob_end_flush(); } } function callback($buffer) { $patterns = []; $patterns[0] = '/<a([^>]*?)href=["|\'](.*?)["|\']/'; $replacements = []; $replacements[0] = '<a${1}href="${2}" data-vars-click-url="${2}"'; ksort($patterns); ksort($replacements); $buffer = preg_replace($patterns, $replacements, $buffer); return $buffer; }
Code language: PHP (php)

In short, using ob_start() you filter the entire page HTML, and using regex and preg_replace() you copy each link href into a data-vars-click-url attribute.

That’s it, you are all set.

Bonus: pass Click Classes and Click Text variable

To better differentiate clicks, you can pass the clicked element classes and text. Change the callback function to:

function callback($buffer) { $patterns = []; $patterns[0] = '/<a([^>]*?)href=["|\'](.*?)["|\']/'; $patterns[1] = '/<a([^>]*?)class=["|\'](.*?)["|\']/'; $patterns[2] = '/<a([^>]*?)>(.*?)</'; $replacements = []; $replacements[0] = '<a${1}href="${2}" data-vars-click-url="${2}"'; $replacements[1] = '<a${1}class="${2}" data-vars-click-classes="${2}"'; $replacements[2] = '<a${1} data-vars-click-text="${2}">${2}<'; ksort($patterns); ksort($replacements); $buffer = preg_replace($patterns, $replacements, $buffer); return $buffer; }
Code language: PHP (php)

And in the JSON amp-analytics configuration, under event_properties add a comma and:

"Click Classes": "${clickClasses}", "Click Text": "${clickText}"
Code language: JSON / JSON with Comments (json)

Conclusion

The AMP Google Tag Container doesn’t support the Click URL variable, and that can make your analytics work much more tedious. Luckily AMP’s support for variables as data attribute allows a workaround. Using a nice hack, you can easily implement it for WordPress, even for pre-existing old links.

External links

Leave a comment

Your email address will not be published. Required fields are marked *