Learning AMP: Adding GTM via AMP-Analytics — AMPire.city

What Will I Learn?

This tutorial demonstrates a simple way to add Google Tag Manager and AMP-Analytics code on your website built with AMP & WordPress.

Requirements:

Google Tag Manager for AMP-Analytics Code Example

<!-- AMP Analytics --><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<!-- Google Tag Manager -->
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-XXXXXXX&gtm.url=SOURCE_URL" data-credentials="include"></amp-analytics>

This is all the code required to get Google Tag Manager working on AMP website, with the help of AMP-analytics library. If you don't know what to do with this code, follow step-by-step tutorial below.

Installing Google Tag Manager on AMP Website

Installing Google Tag Manager on any AMP-friendly website could be done by following 4 simple steps listed below.

1. Creating AMP Account on GTM

In order to add Google Tag Manager code to an AMP website, first — you need to create an account. This is important, because AMP requires a different Google Tag Manager property account than a regular website. You can create one, following this URL and clicking on Create Account. This is easier than it sounds. As you can see below, all you need to do is to select AMP instead of Web — a small but important difference.

2. Getting AMP-Analytics & GTM Code

Now that we have our AMP account on Google Tag Manager, what we need to do is to add the required code to our AMP website. You can get the required code from the popup, which should have appeared after the creation of your AMP account, or by clicking on your unique Google Tag Manager ID, right next to Workspace Changes.

The required code almost identical per every site, the only difference being is Google Tag Manager unique ID. It should be in this format GTM-XXXXXXX. You can simply code the code from below and replace that part with your unique GTM AMP ID.

<!-- Google Tag Manager -->
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-XXXXXXX&gtm.url=SOURCE_URL" data-credentials="include"></amp-analytics>

Requirements for AMP Google Tag Manager

If you don’t have AMP for WordPress — the official AMP plugin — you’ll have to add amp-analytics-0.1.js code manually. Otherwise, this plugin will do the job for you.

<!-- AMP Analytics --><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

3. Adding AMP-Analytics & GTM Code to AMP Website

The main Google Tag Manager code should be placed at the beginning of the <body> tag, while AMP-analytics code should be inserted into <head> tag. I'm personally inserting this code directly to my website's header.php., while AMP-analytics is added for me by AMP for WordPress plugin. If you don't know how to do, just read my tutorial of inserting code to header, body and footer on AMP websites.

4. Testing GTM on AMP Website

Before adding the first tags and triggers to your AMP website, I recommend testing if the required code was successfully added to your website. The simplest way to do so isvia browser developers tools CTRL+SHIFT+I on Windows browsers and Option + ⌘ + C on Apple Safari.

Getting Google Tag Manager to Work on AMP Website

Adding Google Tag Manager to AMP-friendly website is relatively simple. If you have troubles doing so, you’ll definitely going to have problems setting-up tags on your website. In that case consider hiring a professional.

Originally published at https://ampire.city on October 7, 2020.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store