AMP Event Analytics

Since the implementation of website build using AMP framework is quite different from the normal HTML pages with many restrictions in tracking the user attributes and events and also in running third party javascripts, MoEngage has developed the plugins AMP event analytics.
This document will guide you through the process of adding event tracking and user attribute tracking in your AMP pages:

1. Add AMP analytics script

Add this line in the <head> section of your .amp file where you want to use AMP analytics and track user and events.

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

📘

Include this in all of your AMP pages if you want to track events

2. Add this script anywhere in your HTML

<amp-analytics type="moengage" id="moengage" >
  <script type="application/json">
    {
      "vars": {
        "appId": "YOUR_APP_ID"
      }
    }
  </script>
</amp-analytics>

📘

Do not forget to replace your appID. You can get it from your MoEngage Dashboard -> Settings -> App -> General

3. Tracking Users:

All the users visiting your AMP pages will be tracked automatically once you followed the above steps.
But these users will be anonymous users by default.
However, if any user of your website who visited your normal HTML pages earlier and has not deleted their cookies, will be treated as same user in AMP pages also.

4. Tracking events:

Page Viewed event is tracked by default if you followed the above steps.
However with AMP framework limitations on event tracking, only few kind of events can be tracked like Page Viewed, Element Clicked, Page Scroll. Find all the details and list of events here
Example 1: "Element Click Event"
You can track a Click Event when a HTML element with id test is clicked like this:

<button id="test" data-vars-title="Example request title">
  Click here to generate an event
</button>

<amp-analytics type="moengage" id="moengage">
  <script type="application/json">
    {
      "vars": {
        "appId": "XXXXXXXXXXXXXXXX"
      },
      "triggers": {
        "clickTrigger": {
          "on": "click",
          "selector": "#test",
          "request": "event",
          "extraUrlParams": {
            "a": {
              "title": "${title}"
            },
            "e": "amp example button click"
          }
        }
      }
    }
  </script>
</amp-analytics>

on: type of event,
selector: standard CSS selector,
request: should always be event,
a: Event attributes. In this example we are passing title as attribute. check how we are passing variable title using data-vars-title from the button element.
e: Event name.

Example 2: Page Scroll Event

<amp-analytics type="moengage" id="moengage">
  <script type="application/json">
    {
      "vars": {
        "appId": "XXXXXXXXXXXXXXXX"
      },
      "triggers": {
        "scrollPings": {
          "on": "scroll",
          "scrollSpec": {
            "verticalBoundaries": [25, 50, 90]
          },
          "request": "event",
          "extraUrlParams": {
            "a": {
              "scrolledUpto": "${scrollTop}"
            },
            "e": "PageScroll"
          }
        }
      }
    }
  </script>
</amp-analytics>

This scroll event needs scrollSpec object, which can contain verticalBoundaries and horizontalBoundaries. At least one of the two properties is required for a scroll event to fire.
The values for both of the properties should be arrays of numbers containing the boundaries on which a scroll event is generated. For instance, in the following code snippet, the scroll event will be fired when page is scrolled vertically by 25%, 50% and 90%.
The attributes sent here is scrolledUpto which holds an inbuilt variable scrollTop which provides the number of pixels that the user has scrolled from top.
Check this for this list of all supported variables


What’s Next

Step-by-step guide to setting up Web Push opt-in for AMP pages