Google Analytics conversion tracking for AMP

Note: Building AMP page experiences is available exclusively for our Enterprise subscribers. Click here to get in touch with our team for more details.

An AMP (Accelerated Mobile Page) is designed for campaigns targeted primarily at mobile users, which help you keep your visitors’ attention with loading times of under 1 second. AMP pages are generated differently compared to standard pages, which means the code used on them has to be adapted specifically for AMP. In this article, you can find the code you need to add to your AMP in order to track conversions inside your Google Analytics account.

NOTE: If you want to implement Google Analytics conversion tracking on an AMP, do not use our native Google Analytics integration at the same time. It is enough to use the code in this article. If you use both, the page views will be tracked twice.

Any of the codes below will need to be placed in HTML > Body. AMP validation will return errors if the codes are placed anywhere else.

1. Use the following code snippet for tracking only form submissions:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars": {
    "gtag_id": "UA-123456789-1",
    "config": {
         "UA-123456789-1": { "groups": "default" }
  }
},
  "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        },
        "formSubmit": {
          "on": "amp-form-submit-success",
          "request": "event",
                "vars": {
                "event_name": "insert event name parameter here",
                "method": "Google",
                "event_category": "insert event category parameter here",
                "event_action": "insert event action parameter here"
              }
        }
   }
}
</script>
</amp-analytics>

You will need to replace the underlined sections in the code by adding your Google Analytics ID on the "account" line and then customizing the “eventCategory” and the “eventAction” values to match your desired category and action of the event.

2. Use the following code snippet for tracking only a button click. This works with only 1 specific button; if more than 1 button needs to be tracked, the code needs to be edited to contain multiple “buttonClick” key - value pairs while each key needs to be unique. Example: “buttonClick1”, “buttonClick2” etc.

<amp-analytics type="googleanalytics" id="google-analytics">
<script type="application/json">
{
  "vars": {
    "gtag_id": "UA-123456789-1",
    "config": {
         "UA-123456789-1": { "groups": "default" }
  }
},
  "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        },
        "buttonClick": {
        "selector":"#element-ID",
          "on": "click",
          "request": "event",
          "vars": {
            "event_name": "insert event name parameter here",
            "method": "Google",
            "event_category": "insert event category parameter here",
            "event_action": "insert event action parameter here"
          }
        }
   }
}
</script>
</amp-analytics>

You will need to replace the underlined sections in the code by adding your Google Analytics ID on the "account" line, adding the element ID of the button you want to track on the "selector" line, and then customizing the “eventCategory” and the “eventAction” values to match your desired category and action of the event.

To get the element ID of a button, go to the preview mode or the live page and right click the button, select Inspect and copy the ID as shown in the gif below. The ID will be of the w-A-1 format.

ampbutton.gif

3. Use the following code for tracking a form submission and a button click at the same time:

<amp-analytics type="googleanalytics" id="google-analytics">
<script type="application/json">
{
  "vars": {
    "gtag_id": "UA-123456789-1",
    "config": {
         "UA-123456789-1": { "groups": "default" }
  }
},
  "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        },
        "formSubmit": {
          "on": "amp-form-submit-success",
          "request": "event",
            "vars": {
            "event_name": "insert event name parameter here",
            "method": "Google",
            "event_category": "insert event category parameter here",
            "event_action": "insert event action parameter here"
          }
        },
        "buttonClick": {
        "selector":"#element-ID",
          "on": "click",
          "request": "event",
          "vars": {
            "event_name": "insert event name parameter here",
            "method": "Google",
            "event_category": "insert event category parameter here",
            "event_action": "insert event action parameter here"
          }
        }
        }
}
</script>
</amp-analytics>

You will need to replace the underlined sections in the code by adding your Google Analytics ID on the "account" line, adding the element ID of the button you want to track on the "selector" line, and then customizing the “eventCategory” and the “eventAction” values to match your desired category and action of the event.