WebEngage supports tracking of users and events on web pages built using the AMP framework. Since AMP's focus is making the web pages fast to load, there are a number of restrictions around the tracking of users and events on these pages as AMP does not allow third party scripts to run on these pages. As a result, the website integration you may have completed previously as per the steps here will not work on your AMP pages.

In the next few sections, we'll cover how you can enable integration with WebEngage on your AMP pages and also the restrictions associated with tracking users and events on AMP pages.

1. Getting started

You need to first enable the AMP setup on your dashboard under Integrations > SDK > Website before proceeding with the steps listed here. Please note that the AMP setup is disabled by default for your project and you need to enable it from the dashboard before proceeding with the steps mentioned below.

Please include the following code snippet to load the amp-analytics component on your AMP pages.

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

You will also have to define the WebEngage related config on each of your AMP pages in order to track users and events.

For Global Data Center (Default): By default, your data is stored in our global data centers. Therefore, if you're not specifically using our India data center to store/access your data, please use the following code.

<amp-analytics id="webengage" type="webengage">
    <script type="application/json">
    {
      "vars": {
        "licenseCode": "<YOUR_PROJECT_LICENSE_CODE>",
        "region": "us"
      }
    }
    </script>
</amp-analytics>

For India Data Center: If you're using our India data center to store/access your data, please ensure that you use the following code instead of the code above.

<amp-analytics id="webengage" type="webengage">
    <script type="application/json">
    {
      "vars": {
        "licenseCode": "<YOUR_PROJECT_LICENSE_CODE>",
        "region": "in"
      }
    }
    </script>
</amp-analytics>

Make sure you replace <YOUR_PROJECT_LICENSE_CODE> above with your WebEngage license code.

In your contract with WebEngage, if you have not specifically requested for your data to be stored in our India data center, then your data will be stored in our Global data center.
-
If your WebEngage dashboard URL starts with dashboard.webengage.com, then it means you're using our Global data center.
-
If your WebEngage dashboard URL starts with dashboard.in.webengage.com, then it means you're using our India data center.

2. Tracking users

After you have completed the step above, any user visiting any of your AMP pages will get registered as an unknown user. Please note that, unlike website integration, you will not be able to identify users or update user attributes on the AMP pages.

Therefore, users of your AMP pages are treated as unknown users by default. However, if a previous user of your website (either known or unknown) who has not deleted their cookies visits one of your AMP pages, WebEngage will be able to seamlessly stitch this user's activity on the AMP pages to their user profile.

3. Tracking events

AMP framework has limitations on the events that can be tracked on AMP pages. It enables you to track events such as Page Viewed, Page Scrolled, Element Clicked etc. You can find a complete list of these events here.

However, except the Page Viewed event, WebEngage does not track any of these other events by default. Please note that the Page Viewed event is tracked by default and you do not have to write any code in order to track this event.

Once you've integrated WebEngage with your AMP pages, you can go to the Events section of your WebEngage dashboard. In the Events section, you can see details of the pages in which users did the Page Viewed event by running the query: Show Occurrences of Page Viewed over Page URL

To track any of the other events supported by AMP, you will have to add the necessary configuration in your AMP pages. For example, if you would like to track the Element Clicked event whenever a HTML element with id as test1 (i.e the CSS selector path #test1) is clicked, you can do so through the code below.

<amp-analytics type="webengage" id="webengage" >
  <script type="application/json">
    {
      "vars": {
        "licenseCode": "<YOUR_PROJECT_LICENSE_CODE>"
      },
      "requests": {
        "weClick": {
          "baseUrl": "${base}&eventName=Element Clicked&elementName=test1&attribute2Name=abc-xyz&attribute3Name=pqr-xyz"
        }
      },
      "triggers": {
        "weClickTrigger": {
          "on": "click",
          "selector": "#test1",
          "request": "weClick"
        }
      }
    }
  </script>
</amp-analytics>

In the code snippet above, eventName refers to the name of the event and can be anything you like. Attribute of this event is represented by the keys (i.e the attribute names): elementName, attribute2Name and attribute3Name and their respective values (i.e the attribute values): test1, abc-xyz and pqr-xyz. These attribute names and values can be anything you like

You will not be able to track any other system events or custom events on AMP pages.

All events related to your AMP pages are available under the list of Custom Events in your WebEngage dashboard

4. Web Push for AMP

Please follow our documentation here to enable your users to opt-in to web push notifications on your AMP web pages.

AMP


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.