Configure and Integrate AMP Event Analytics

MoEngage AMP event analytics plugin helps in track user attributes and events, and run third-party javascript. MoEngage AMP event analytics plugin ensures to address the differences in AMP pages and HTML page restriction for tracking user attributes and events.

The MoEngage AMP event analytics plugin is different from the AMP analytics module.

To add event tracking and user attribute tracking to your AMP pages follow these steps:

 

Add AMP Analytics Script

Ensure to include the script in all of your AMP pages in the <head> section of your .amp file where you want to use AMP analytics and track user attributes and events.

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

Add Anywhere in your HTML

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

NOTE

Ensure to replace Your_APP_ID with the actual APP Id from MoEngage Dashboard -> Settings -> App -> General

For dataCenter, please contact our support team to know more.

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 the same user in AMP pages also.

Tracking Events

Page Viewed event is tracked by default if you followed the above steps.
However with AMP framework limitations on event tracking, only a few kinds of events can be tracked such as Page Viewed, Element Clicked, Page Scroll.

For more information on the list of events, refer to AMP Analytics Examples.

Example 1: "Element Click Event"

You can track a Click Event when an HTML element with id test is clicked as described:

HTML
<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",
  "dataCenter": "sdk-01"
  },
  "triggers": {
  "clickTrigger": {
  "on": "click",
  "selector": "#test",
  "request": "event",
  "extraUrlParams": {
  "a": {
  "title": "${title}"
  },
  "e": "amp example button click"
  }
  }
  }
  }
  </script>
  </amp-analytics>

 

Parameter Description
on Type of event
selector standard CSS selector
request Should always be an event
a

Event attributes.

In this example, the title is an attribute. Verify the change in the variable title using data-vars-title from the button element.

e

Event name

Example 2: Page Scroll Event

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

The scroll event needs scrollSpec object, that contains 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 the page is scrolled vertically by 25%, 50% and 90%. The attributes sent here is scrolledUpto which holds an inbuilt variable scrollTop that provides the number of pixels that the user has scrolled from the top.

For more information about the list of all supported variables, refer to Supported Variables.

Was this article helpful?
0 out of 0 found this helpful