Add AMP pages to Google Analytics

Bad news – as with all other mark up elements in AMP you can’t just add the standard “web” JavaScript tag.

You need to add the AMP analytics tag below in the <HEAD> section *before* the AMP .js library so immediately after the <HEAD> tag might be safest.

<HEAD>

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

To add AMP page views and event tracking (only) to Goggle Analytics add this immediately after the body tag changing UA-XXXXX-Y to your Tracking ID.

Your Tracking ID can be found in

Admin Cog (bottom left) –> .js Tracking Info –> Tracking Code

(or your standard Google Analytics web page tags).

<BODY>

  <amp-analytics type="googleanalytics">
  <script type="application/json">
  {
    "vars": {
      "account": "UA-XXXXX-Y"
    },
    "triggers": {
      "trackPageview": {
        "on": "visible",
        "request": "pageview"
      },
      "trackEvent": {
        "selector": "#event-test",
        "on": "click",
        "request": "event",
        "vars": {
          "eventCategory": "ui-components",
          "eventAction": "click"
        }
      }
    }
  }
  </script>
  </amp-analytics>

More detail on how to extend and customise Google Analytics for AMP can be found in this comprehensive (but quite technical) article from developers.google.com.

Have fun :)


Check out interim.team for interim talent on demand. Talent where you need it, when you want it and only for as long as you need it.