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.

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

Add Anywhere in your HTML

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

NoteEnsure to replace Your_Workspace_ID with the actual Workspace Id from MoEngage Dashboard -> Settings -> App -> General SettingsFor dataCenter, please contact our support team to know more.

NoteTo redirect data to test environment, append ‘_DEBUG’ to appId. For example, if your appId is
YOUR_WORKSPACE_ID then for test environment, it would be YOUR_WORKSPACE_ID_DEBUG

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:

<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

<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.

Example 3: Form Submit Event

<form id="testForm" method="post" action-xhr="YOUR_SUBMIT_URL" target="YOUR_TARGET_VALUE">
   <input type="text" name="name" placeholder="Name..." required>
   <input type="submit" value="Subscribe">
</form>

<amp-analytics type="moengage" id="moengage">
<script type="application/json">
{
  "vars": {
    "appId": "XXXXXXXXXXXXXXXX",
    "dataCenter": "sdk-01"
  },
  "triggers": {
    "formSubmit": {
      "on": "amp-form-submit",
      "request": "event",
      "selector": "#testForm",
      "extraUrlParams": {
        "a": {
          "anyKey": "anyValue"
        },
        "e": "FormSubmit"
      }
    }
  }
}
</script>
</amp-analytics>

In the above example, we are setting the id of the form as the selector value (#testForm). Inside “extraUrlParams”, “e” is the event name and “a” contains the key and the value which we want to track for this event.

Tracking User Attributes

ImportantIf any user attribute is configured as an identity for your account, then track it as part of login instead of simply tracking it as a user attribute as it is shown in this section. Refer to this document to learn more.

You can track user attributes using the “EVENT_ACTION_USER_ATTRIBUTE” event. For example, you have this button on your website:

<button id="first-name" data-vars-first-name="someFirstName">  Click here to track first name</button>

Then, track the first name (considering it to be the user’s first name) like this:

<amp-analytics type="moengage" id="moengage">
<script type="application/json">
{
  "vars": {
    "appId": "XXXXXXXXXXXXXXXX",
    "dataCenter": "sdk-01"
  },
  "triggers": {
    "clickTrigger": {
      "on": "click",
      "selector": "#first-name",
      "request": "event",
      "extraUrlParams": {
        "a": {
          "USER_ATTRIBUTE_USER_FIRST_NAME": "${first-name}"
        },
        "e": "EVENT_ACTION_USER_ATTRIBUTE"
      }
    }
  }
}
</script>
</amp-analytics>

Similarly, to track the user’s email upon clicking the below button

<button id="email" data-vars-email="someEmail">  Click here to track email</button>

<amp-analytics type="moengage" id="moengage">
<script type="application/json">
{
  "vars": {
    "appId": "XXXXXXXXXXXXXXXX",
    "dataCenter": "sdk-01"
  },
  "triggers": {
    "clickTrigger": {
      "on": "click",
      "selector": "#email",
      "request": "event",
      "extraUrlParams": {
        "a": {
          "USER_ATTRIBUTE_USER_EMAIL": "${email}"
        },
        "e": "EVENT_ACTION_USER_ATTRIBUTE"
      }
    }
  }
}
</script>
</amp-analytics>

In the same way, you can track other pre-defined user attributes

<button id="btnId" data-vars-attribute-value="someValue">  Click here to track the user attribute</button>

<amp-analytics type="moengage" id="moengage">
<script type="application/json">
{
  "vars": {
    "appId": "XXXXXXXXXXXXXXXX",
    "dataCenter": "sdk-01"
  },
  "triggers": {
    "clickTrigger": {
      "on": "click",
      "selector": "#btnId",
      "request": "event",
      "extraUrlParams": {
        "a": {
         "USER_ATTRIBUTE_NAME": "${attribute-value}"
        },
        "e": "EVENT_ACTION_USER_ATTRIBUTE"
      }
    }
  }
}
</script>
</amp-analytics>

Here, USER_ATTRIBUTE_NAME has to be replaced with one of the following

USER_ATTRIBUTE_USER_EMAIL //for user email - value needs to be string, eg: "dom@level5.com"
USER_ATTRIBUTE_USER_NAME //for user name - value needs to be string, eg: "Dominick (Dom) Cobb"
USER_ATTRIBUTE_USER_FIRST_NAME //for user first name - value needs to be string, eg: "Dominick"
USER_ATTRIBUTE_USER_LAST_NAME //for user last name - value needs to be string, eg: "Cobb"
USER_ATTRIBUTE_USER_MOBILE //for user mobile - value needs to be string, eg: "+12399999999"
USER_ATTRIBUTE_USER_GENDER //for user gender - value needs to be string, eg: "M"
USER_ATTRIBUTE_USER_BDAY //for user birthday - value needs to be in date format, eg: new Date(1980, 2, 31)

To track a custom user attribute, in place of USER_ATTRIBUTE_NAME you have to use your own custom attribute name. For example-

<amp-analytics type="moengage" id="moengage">
<script type="application/json">
{
"vars": {
"appId": "XXXXXXXXXXXXXXXX",
"dataCenter": "sdk-01"
},
"triggers": {
    "clickTrigger": {
      "on": "click",
      "selector": "#btnId",
      "request": "event",
      "extraUrlParams": {
        "a": {
         "colors": ["blue","green","red"]
        },
        "e": "EVENT_ACTION_USER_ATTRIBUTE"
      }
    }
  }
}
</script>
</amp-analytics>

In the above example, we are tracking a custom attribute named “colors”. This attribute’s value is an array- ["blue","green","red"] Previous way of logging-in users has been changed. The below method follows the User Identity Resolution feature of MoEngage. Learn More. Ensure log in and log out of users are implemented correctly during the visit to your website and users are authenticated.

ImportantIf the user log in and log out is not handled correctly, user data may get corrupted. Refer this section for more details.

<button id="login" data-vars-unique-id="someUniqueId" data-vars-user-email="emailValue@emailDomain.com">Click here to track user login</button>

Here, we want to track ID “someUniqueId” and Email “emailValue@emailDomain.com” as the identities for the user.

ImportantIf you are setting the ID, make sure to add/update its value in both identifiers -> moe_user_id as well as inside identifiers -> user_identities

<amp-analytics type="moengage" id="moengage">
<script type="application/json">
{
"vars": {
"appId": "XXXXXXXXXXXXXXXX",
"dataCenter": "sdk-01"
},
"triggers": {
    "clickTrigger": {
      "on": "click",
      "selector": "#login",
      "request": "event",
      "extraUrlParams": {
        "identifiers": {
            "moe_user_id": "${unique-id}",
            "user_identities": { 
              "uid": "${unique-id}", 
              "u_em": "${user-email}" 
            }
        }
      }
    }
  }
}
</script>
</amp-analytics>

Here, uid is ID and u_em is Email (Standard) attributes. Please refer to the below table for key names which need to be used to set standard user attributes as identities.

User Attribute Name	Key name to be used in user_identities
ID	uid
Email (Standard)	u_em
Gender	u_gd
Birthday	u_bd
Name	u_n
First Name	u_fn
Last Name	u_ln
Mobile Number (Standard)	u_mb

If we want to identify the user with just mobile number (for example)-

<button id="login" data-vars-user-mobile="7777777777">Click here to track user login</button>

<amp-analytics type="moengage" id="moengage">
<script type="application/json">
{
"vars": {
"appId": "XXXXXXXXXXXXXXXX",
"dataCenter": "sdk-01"
},
"triggers": {
    "clickTrigger": {
      "on": "click",
      "selector": "#login",
      "request": "event",
      "extraUrlParams": {
        "identifiers": {
            "user_identities": { 
              "u_mb": "${user-mobile}" 
            }
        }
      }
    }
  }
}
</script>
</amp-analytics>

NoteHere, we do not have to send the value of mobile number in identifiers -> moe_user_id as Mobile and ID are two different attributes of a user. Only while adding/updating ID, the value of the ID has to be sent in moe_user_id as well as in user_identities.

ImportantAfter tracking the login, all further attributes and events tracking should have the “identifiers” object defined inside the tracking code (with the “moe_user_id” and/or “user_identities”) as above, until logout event is performed. Otherwise, that attribute or event tracking will not be associated with this logged-in user in your MoEngage dashboard.

For example, if we want to track an event after identities have been set for the user-

<button id="title" 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": "#title",
      "request": "event",
      "extraUrlParams": {
        "a": {
          "title": "${title}"
        },
        "e": "amp example button click",
        "identifiers": {
            "moe_user_id": "someUniqueId",
            "user_identities": { 
              "uid": "someUniqueId", 
              "u_em": "emailValue@emailDomain.com" 
            } //because we logged-in the user with "someUniqueId" as the ID and "emailValue@emailDomain.com" as the Email
        }
      }
    }
  }
}
</script>
</amp-analytics>

Track Identities Update

When updating the value of an identity, send the changed identities in identifiers -> previous_identities. For example, let’s assume you first set ID and Email as identities of the user.

<button id="login" data-vars-unique-id="someUniqueId" data-vars-user-email="emailValue@emailDomain.com">Click here to track user login</button>

<amp-analytics type="moengage" id="moengage">
<script type="application/json">
{
"vars": {
"appId": "XXXXXXXXXXXXXXXX",
"dataCenter": "sdk-01"
},
"triggers": {
    "clickTrigger": {
      "on": "click",
      "selector": "#login",
      "request": "event",
      "extraUrlParams": {
        "identifiers": {
            "moe_user_id": "${unique-id}",
            "user_identities": { 
              "uid": "${unique-id}", 
              "u_em": "${user-email}" 
            }
        }
      }
    }
  }
}
</script>
</amp-analytics>

Now, let’s say you want to update the ID of the user.

<button id="update" data-vars-updated-id="updatedUniqueId">Click here to track update identities</button>

<amp-analytics type="moengage" id="moengage">
<script type="application/json">
{
"vars": {
"appId": "XXXXXXXXXXXXXXXX",
"dataCenter": "sdk-01"
},
"triggers": {
    "clickTrigger": {
      "on": "click",
      "selector": "#update",
      "request": "event",
      "extraUrlParams": {
        "identifiers": {
            "moe_user_id": "${updated-id}",
            "user_identities": {
              "uid": "${updated-id}", 
              "u_em": "${user-email}" 
            },
            "previous_identities": {
              "uid": "someUniqueId" // because we updated the ID from "someUniqueId"
            }
        }
      }
    }
  }
}
</script>
</amp-analytics>

NoteIn the above example, we updated ID. You can update more than one identities but you have to mandatorily send all the changing identities in previous_identities.

Track Logout

<button id="logout">Click here to track user logout</button>

<amp-analytics type="moengage" id="moengage">
<script type="application/json">
{
"vars": {
"appId": "XXXXXXXXXXXXXXXX",
"dataCenter": "sdk-01"
},
"triggers": {
    "clickTrigger": {
      "on": "click",
      "selector": "#logout",
      "request": "event",
      "extraUrlParams": {
        "a": {},
        "e": "MOE_LOGOUT"
      }
    }
  }
}
</script>
</amp-analytics>

ImportantAfter performing the above Moengage logout event, do NOT send “identifiers” with any further tracking code. Because the user had logged-out and further attribute/event tracking must not be associated with this user.

Getting Started

SDKs

Configure and Integrate AMP Event Analytics

Add AMP Analytics Script

Add Anywhere in your HTML

Tracking Users

Tracking Events

Example 1: Element Click Event

Example 2: Page Scroll Event

Example 3: Form Submit Event

Tracking User Attributes

Track Identities Update

Track Logout

​Add AMP Analytics Script

​Add Anywhere in your HTML

​Tracking Users

​Tracking Events

​Example 1: Element Click Event

​Example 2: Page Scroll Event

​Example 3: Form Submit Event

​Tracking User Attributes

​Tracking User Login and Logout

​Track Login

​Track Identities Update

​Track Logout

Add AMP Analytics Script

Add Anywhere in your HTML

Tracking Users

Tracking Events

Example 1: Element Click Event

Example 2: Page Scroll Event

Example 3: Form Submit Event

Tracking User Attributes

Tracking User Login and Logout

Track Login

Track Identities Update

Track Logout