AMP Analytics

Step-by-step guide to send your event data from your AMP page to RudderStack.

The RudderStack AMP component makes it easy to send the event data from your AMP page to your specified destinations via RudderStack. Now you don't need to implement or test multiple components for different destinations for your event data. This component collects the default properties and sends a page event to RudderStack.

Since the AMP source sends the data directly to the RudderStack backend, it supports only the cloud mode destinations. For more information on the cloud mode, refer to the guide.

Setup requirements

To use the AMP component, the following prerequisites must be met:

You must have signed up for a .
You need a data plane URL. Follow for more information on the data plane URL and where to get it.

Getting started

Learn more about the AMP project from their . To get started and set up your AMP project, check out their .

After completing the initial setup of your AMP project, follow these steps to start sending your event data to RudderStack:

Add an AMP source in your RudderStack .
Note the Write Key. This will be required later when using the AMP Analytics component.

Include the RudderStack AMP component before the closing </head> tag, as shown:

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

Start sending the event data to RudderStack by adding the following script inside of your <body> tag.
You can fetch the AMP config JSON from our . The following snippet shows you how to do this:

<amp-analytics config="https://cdn.rudderlabs.com/amp/rudderstack.json">
  <script type="application/json">
    {
      "vars": {
        "writeKey": WRITE_KEY,
        "dataPlaneUrl": DATA_PLANE_URL,
        "pageName": "Your Page Name"
      }
    }
  </script>
</amp-analytics>

Page

You can record the page views on your website using the page request. To add custom properties to your page request, you can use the extraUrlParams object.

RudderStack's AMP analytics component includes an automatic page view. You can set the name of the automatic page view through pageName, as shown in the following snippet:

<amp-analytics config="https://cdn.rudderlabs.com/amp/rudderstack.json">
<script type="application/json">
  {
    "vars": {
      "writeKey": WRITE_KEY,
      "dataPlaneUrl": DATA_PLANE_URL,
      "pageName": "Your Page Name"
    }
  }
</script>
</amp-analytics>

If you fail to provide the value for the pageName variable, RudderStack automatically sets the page name to Unknown Page.

Track

<body>
<amp-analytics config="https://cdn.rudderlabs.com/amp/rudderstack.json">
  <script type="application/json">
  {
    "vars": {
      "writeKey": WRITE_KEY,
      "dataPlaneUrl": DATA_PLANE_URL,
      "pageName": "My AMP Page"
    },
    "triggers": {
      "clickEvent": {
        "on": "click",
        "selector":"#clickTrigger",
        "request": "track",
        "vars": {
          "eventName": "new click event"
        },
        "extraUrlParams": {
          "properties.clickType": "href"
        }
      }
    }
  }
  </script>
</amp-analytics>
Track - Click <a href="#" id="clickTrigger">here</a> to send
</body>

Properties

You can send extra properties for your page or track events to add more information along with the event request. Once you mention the properties as extraUrlParams in the amp-analytics tag of your implementation, they will be passed to RudderStack for further processing.

Default properties

RudderStack collects the following properties with each track and page view:

{
  "anonymousId": "amp-<unique-id>",
  "context.locale": "en-US",
  "context.page.path": "/article",
  "context.page.url": "http://example.com/article",
  "context.page.referrer": "referrer",
  "context.page.title": "My Article",
  "context.screen.width": 600,
  "context.screen.height": 800
}

Custom properties

You can choose to send custom properties by adding the extraUrlParams object. Every property name should be prefixed with properties..

A sample call with the custom properties is shown below:

<amp-analytics config="https://cdn.rudderlabs.com/amp/rudderstack.json">
<script type="application/json">
  {
    "vars": {
      "writeKey": WRITE_KEY,
      "dataPlaneUrl": DATA_PLANE_URL,
      "pageName": "Your Page Name"
    },
    "extraUrlParams": {
      "properties.type": "article",
      "properties.published_at": "2016-06-28",
      "properties.author": "John Doe",
      "properties.button_type": "read-more",
      "properties.article_id": "my-article-id"
    }
  }
</script>
</amp-analytics>

Any property set at the top-level extraUrlParams object will be sent with each request. For example, the property article_id will be sent for all the requests triggered by this snippet.

If you want to add custom properties to a specific event or a page call, you need to add an extraUrlParams object within your trigger configuration. The following code snippet shows how to do so:

<body>
  <amp-analytics config="https://cdn.rudderlabs.com/amp/rudderstack.json">
    <script type="application/json">
    {
      "vars": {
        "writeKey": WRITE_KEY,
        "dataPlaneUrl": DATA_PLANE_URL,
        "pageName": "My AMP Page"
      },
      "triggers": {
        "clickEvent": {
          "on": "click",
          "selector":"#clickTrigger",
          "request": "track",
          "vars": {
            "eventName": "new click event"
          },
          "extraUrlParams": {
            "properties.clickType":"href"
          }
        }
      },
      "extraUrlParams": {
        "properties.type": "article",
        "properties.published_at": "2016-06-28",
        "properties.author": "John Doe",
        "properties.button_type": "read-more",
        "properties.article_id": "my-article-id"
      }
    }
    </script>
  </amp-analytics>
  Track - Click <a href="#" id="clickTrigger">here</a> to send
</body>

The property clickType will be sent only for the track request, whereas the property article_id will be sent for both the requests (the automatic page and track call).

UTM parameters

RudderStack does not collect the UTM information from the SDK. Instead, we encourage you to send the properties as extraUrlParams.

An example of using extraUrlParams is as shown:

<amp-analytics config="https://cdn.rudderlabs.com/amp/rudderstack.json">
  <script type="application/json">
    {
    "vars": {
      "writeKey": WRITE_KEY,
      "dataPlaneUrl": DATA_PLANE_URL,
      "pageName": "Your Page Name"
    },
    "extraUrlParams": {
      "properties.utm_source": "google",
      "properties.utm_campaign": "2016-06-28",
      "properties.utm_medium": "email"
    }
  }
  </script>
</amp-analytics>

AMP Linker

Once this cookie is set, both AMP and Non-AMP pages on your domain use this cookie to identify the user uniquely. This way, the same AMP Client ID (set by the cached AMP page) can be used to identify the user in all contexts.

The following code snippet demonstrates how to enable this feature:

<body>
  <amp-analytics config="https://cdn.rudderlabs.com/amp/rudderstack.json">
    <script type="application/json">
      {
        "vars": {
          "writeKey": WRITE_KEY,
          "dataPlaneUrl": DATA_PLANE_URL,
          "pageName": "Your Page Name"
        },
        "linkers": {
          "enabled": true
        }
      }
    </script>
  </amp-analytics>
</body>

Contact us

PreviousSDKs NextCordova

Last updated 3 years ago

Was this helpful?