Add Google Analytics Tracking Code To Accelerated Mobile Pages (AMP) in WordPress

Updated September 20, 2017     25 Comments
Originally posted February 15, 2016

WordPress Code Snippets

This shows you how to successfully add the Google Analytics Tracking Code to your Accelerated Mobile Pages (AMP) if you’re using the WordPress AMP plugin by Automattic. Follow the steps below if you want to be able to track your AMP pages in your Google Analytics account.

First, Google recommends that you “set up and use a separate Google Analytics property for AMP measurement.” This will let you track your AMP pages separately from your site’s regular pages. To set this up, follow these steps from Google: Set up a property. (On that page, for step 3, choose the Account for the website in question. On that page, for number 6, enter a name such as “your_site_name AMP.” When you’re done setting up the new property, copy the “Tracking ID,” also known as the “Property ID,” for this new property since you will use it below.)

Next, for Google Analytics to work on WordPress AMP pages, you must add the AMP analytics script to the head of your AMP pages. The script can be easily added with the amp_post_template_data filter. To add the script, add this to your functions (see how to add code):

/**
 * Add the AMP analytics script to head of AMP pages
 */
function isa_amp_scripts( $data ) {
	$data['amp_component_scripts']['amp-analytics'] = 'https://cdn.ampproject.org/v0/amp-analytics-0.1.js';
	return $data;
}
add_filter( 'amp_post_template_data', 'isa_amp_scripts' );

Finally, you must add the actual Google Analytics tracking code to your AMP pages. You can’t simply paste the regular analytics tracking code on AMP pages. You must use the amp-analytics tag. This is where you will need your “Tracking ID,” also known as the “Property ID,” for the new property that you set up above.

You can add the tracking code to the bottom of your AMP pages with the amp_post_template_footer hook. Add it like this, but you must replace “UA-XXXXX-Y” on line 9 with your own Tracking ID (this code goes in your functions file): 

/**
 * Add amp-analytics to the amp post template footer
 */
function isa_amp_analytics( $amp_template ) {
	?><amp-analytics type="googleanalytics">
	<script type="application/json">
	{
	  "vars": {
	    "account": "UA-XXXXX-Y"
	  },
	  "triggers": {
	    "trackPageview": {
	      "on": "visible",
	      "request": "pageview"
	    }
	  }
	}
	</script>
	</amp-analytics><?php
}
add_action( 'amp_post_template_footer', 'isa_amp_analytics' );

That’s it. (Be sure to clear any cache plugins to make sure that your changes take effect.) Now, you can track the traffic to your WordPress AMP pages in your Google Analytics account.

I know this code works because I’m using it on live sites. If you suspect that the code is not working, you can confirm that it works like this: In your Google Analytics account, go to the “Reporting” tab for this property. In the sidebar, click on “Real-Time” -> “Overview”. Leave that open, then open a new browser tab so that you can visit one of your AMP pages. To visit one of your AMP pages, simply add /amp/ to the URL of one of your single posts. Leave that page open, and return to other browser tab with your Analytics. Under “Right now,” you should see the number increase by 1. It could take a few seconds before the number is updated. This confirms that the Google Analytics is tracking the traffic to your AMP pages.

See more: , ,

We've 25 Responses

  1. February 16th, 2016 at 6:44 pm

    What do you mean with “in the function”?

    do you mean my “function.php”-file in child-theme root-folder or do i have a create a folder/file like this: child-theme/amp/function.php?

    Thx

    Reply ↓
    Denis

  2. February 22nd, 2016 at 3:58 pm

    Great code and instructions, setup and worked right away.

    If you have any tips however on why Google webmaster tools says fix errors and “We did not find any Accelerated Mobile Pages in your site” would be appreciated.

    Their structured data testing tool result is “all good” and the Chrome browser developer tool also shows validation successful, setup was done yesterday and the site was crawled this AM.

    Thanks,

    Reply ↓
    Tester

    • February 22nd, 2016 at 7:55 pm

      Thank you.

      1. Regarding the “We did not find any Accelerated Mobile Pages in your site,” Google can take at least a couple of weeks before they notice your AMP pages. You can possibly speed this up in your Search Console (Webmaster Tools) sidebar –> “Crawl” –> “Fetch as Google”. Fetch one of your AMP urls, change the “Desktop” dropdown to “Mobile:Smartphone”. After it fetches, click to submit that URL to the index.

      2. I find that they take many weeks and even months to update the list of errors in the Search Console, even after they crawl.

      Hope that helps.

      Reply ↓
      Isabel

  3. February 22nd, 2016 at 6:37 pm

    I would like to use Google Analytics for AMP, but the version with JavaScript and the WP Function does not work.

    I would therefore alternatively use the AMP pixels.

    By what I have to replace the $TITLE, $CANONICAL_URL, $CLIENT_ID?

    These data have yet to be replaced automatically, but how in wordpress?

    Thank u for help

    Best wishes

    Reply ↓
    Dalee

  5. February 24th, 2016 at 8:12 am

    Done it. Thanks. What I don’t understand is why we need to set up AMP in a separate Google Analytics code. Now we have the visits split in 2 different projects and we can’t see the complete overview on the website…

    Reply ↓
    Quique Cardona

  9. November 21st, 2016 at 2:23 am

    Hey, just a quick comment for the lazy folks such as me : if you copy paste the code , don’t forget to remove the comment ‘ // Replace with your property ID. ‘ from the json code area. Json doesn’t accept comment, so the script will silently fail if you keep this line.

    Reply ↓
    Jean-Christophe Lavocat

  10. January 5th, 2017 at 3:49 pm

    At first I thought it is simply copy and paste the code. Then I read all the comments, added the other bits of code. It worked great on my site. Thank you Isabel
    /Lee from Wearable In Ear

    Reply ↓
    Lee

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this:

[code]

YOUR CODE HERE 

[/code]