AMP Source

The Segment AMP component makes it easy to send your data to lots of tools without having to learn, test or implement a new AMP component every time. The component automatically collects default properties and sends a page view.

Note: Since our AMP destination sends data directly to our servers, only destinations that support Cloud-based connection modes are compatible with AMP.

Choosing a Segment Source type

Because data moves from AMP > Segment > end-tool, destination settings will require server-side or mobile keys.
Create a source of Mobile, Server, or Legacy type for AMPs.

Getting Started

If you’re new to AMP, go through their excellent Quickstart.

Once you have an AMP page up and running, include the amp-analytics component before the closing </head> tag:

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

Include Segment analytics, using the <amp-analytics type="segment"?> as follows will automatically collect Page views:

<amp-analytics type="segment">
<script type="application/json">
  {
    "vars": {
      "writeKey": "WRITE_KEY",
      "name": "My Page Name"
    }
  }
</script>
</amp-analytics>

Default Properties Collected

A few properties are automatically collected with each page view and event call.

{
  "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
}

Page

Track pageviews by including in the body tag:

<amp-analytics type="segment">
<script type="application/json">
  {
    "vars": {
      "writeKey": "WRITE_KEY",
      "name": "my page name"
    }
  }
</script>
</amp-analytics>

To collect additional, custom properties, include an "extraUrlParams" object. All properties you’d like to include must follow the format of properties.<property_name>:

<amp-analytics type="segment">
<script type="application/json">
  {
    "vars": {
      "writeKey": "WRITE_KEY",
      "name": "my page name"
    },
    "extraUrlParams": {
      "properties.type": "article",
      "properties.published_at": "2016-06-28",
      "properties.author": "John Doe"
    }
  }
</script>
</amp-analytics>

Events

Track click events, add a simple trigger with a selector which will send that event once the user clicks:

<amp-analytics type="segment">
<script type="application/json">
  {
    "vars": {
      "writeKey": "WRITE_KEY"
    }
    "triggers": {
      "click": {
        "on": "click",
        "selector": ".read-more-button",
        "request": "track",
        "vars": {
          "event": "Read More Clicked"
        }
      }
    }
  }
</script>
</amp-analytics>

To collect additional, custom properties, include an "extraUrlParams" object. All custom properties must be formatted as properties.<property_name>:

<amp-analytics type="segment">
<script type="application/json">
  {
    "vars": {
      "writeKey": "WRITE_KEY"
    },
    "extraUrlParams": {
      "properties.button_type": "read-more",
      "properties.article_id": "my-article-id"
    },
    "triggers": {
      "click": {
        "on": "click",
        "selector": ".read-more-button",
        "request": "track",
        "vars": {
          "event": "Read More Clicked"
        }
      }
    }
  }
</script>
</amp-analytics>

See a live AMP with Segment analytics


If you have any questions or see anywhere we can improve our documentation, please let us know or kick off a conversation in the Segment Community!