> ## Documentation Index > Fetch the complete documentation index at: https://moengage-sdk-docs.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # 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 `` section of your .amp file where you want to use AMP analytics and track user attributes and events. ```HTML HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` ### Add Anywhere in your HTML ```HTML HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` Note Ensure to replace Your\_Workspace\_ID with the actual Workspace Id from MoEngage Dashboard -> Settings -> App -> General Settings For dataCenter, please contact our support team to know more. Note To 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](https://amp.dev/documentation/examples/components/amp-analytics/). ### Example 1: Element Click Event You can track a Click Event when an HTML element with id `test` is clicked as described: ```HTML HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` | 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 HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` 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](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md). ### Example 3: Form Submit Event ```HTML HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` 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 Important If any user attribute is configured as an identity for your account, then track it as part of [login](#Tracking-User-Login-and-Logout) instead of simply tracking it as a user attribute as it is shown in this section. Refer to [this document](https://help.moengage.com/hc/en-us/articles/24050999467284-Unified-Identity-Identity-Resolution) to learn more. You can track user attributes using the "EVENT\_ACTION\_USER\_ATTRIBUTE" event. For example, you have this button on your website: ```HTML HTML lines theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` Then, track the first name (considering it to be the user's first name) like this: ```HTML HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` Similarly, to track the user's email upon clicking the below button ```HTML HTML lines theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` ```HTML HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` In the same way, you can track other **pre-defined user attributes** ```HTML HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` ```HTML HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` Here, USER\_ATTRIBUTE\_NAME has to be replaced with one of the following ```javascript JavaScript lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} 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- ```HTML HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` In the above example, we are tracking a custom attribute named "colors". This attribute's value is an array- `["blue","green","red"]` ## Tracking User Login and Logout [Previous way of logging-in users](/developer-guide/web-sdk/other-supported-web-sdk-integration/User-Login-in-AMP-Older-Proces) has been changed. The below method follows the User Identity Resolution feature of MoEngage. [Learn More](https://help.moengage.com/hc/en-us/articles/24050999467284-Unified-Identity-Identity-Resolution). Ensure log in and log out of users are implemented correctly during the visit to your website and users are authenticated. Important If the user log in and log out is not handled correctly, user data may get corrupted. Refer [this section](/developer-guide/web-sdk/data-tracking/web-sdk-user-attributes-tracking#User-Login-and-Logout) for more details. ### Track Login ```HTML HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` Here, we want to track ID "someUniqueId" and Email "[emailValue@emailDomain.com](mailto:emailValue@emailDomain.com)" as the identities for the user. Important If 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` ```html HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` 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)- ```HTML HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` ```html HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` Note Here, 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`. Important After 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- ```html HTML wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` ```html HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` ### 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. ```HTML HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` ```html HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` Now, let's say you want to update the ID of the user. ```HTML HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` ```HTML HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` Note In 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 ```HTML HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` ```html HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}} ``` Important After 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.