AMP

Our AMP plugin makes it very easy to send your data to any tool without having to learn, test or implement a new AMP plugin every time. The plugin automatically collects default properties and sends a page view.

Getting Started

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

Once you have an AMP page up and running, include the analytics plugin:

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

Include the segment plugin in any page you want to track, the plugin by default will track page views.

<amp-analytics type="segment">
<script>
  {
    "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. For example, if you call:

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

We will add extra properties without any work from you:

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

Our AMP plugin will track pageviews automatically for you, once it is included in the body tag:

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

To collect additional, custom properties, include an "extraUrlParams" object like so:

<amp-analytics type="segment">
<script>
  {
    "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

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

<amp-analytics type="segment">
<script>
  {
    "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 like so:

<amp-analytics type="segment">
<script>
  {
    "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>

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!