You're in the right place! Segment documentation is now part of Twilio Docs. The content you are used to is still here—just in a new home with a refreshed look.

Analytics for AMP

Community ✓

Maintenance x

Flagship x

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 the AMP source sends data directly to Segment's servers, only destinations that support cloud-mode are compatible with AMP.

Getting started

If you're new to AMP, go through AMP's excellent Quickstart. Once you're setup, follow the steps below to implement Segment.

Step 1: Include AMP component

Before the closing </head> tag, include the amp-analytics component:

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

Step 2: Include Segment analytics

Within your <body> tags, include the following Segment analytics snippet:

1<body>
2<amp-analytics type="segment">
3<script type="application/json">
4  {
5    "vars": {
6      "writeKey": "WRITE_KEY",
7      "name": "My Page Name"
8    }
9  }
10</script>
11</amp-analytics>
12</body>

Replace WRITE_KEY with the write key you obtain from the AMP Source you've set up within the Segment UI.

For sources in EU workspaces, use the following snippet:

1<amp-analytics type="segment">
2    <script type="application/json">
3    {
4      "vars": {
5        "writeKey": "<SOURCE_WRITE_KEY>"
6      },
7      "requests": {
8        "host": "https://eu1.api.segmentapis.com/v1/pixel"
9      }
10    }
11    </script>
12</amp-analytics>

By default, the snippet will automatically fire a page event which you can read more about in the Page section of this documentation.

Page

The Page method lets you record page views on your website, along with your choice of custom properties about the page being viewed.

A page call is included by default when you include Segment Analytics into your code with the ability to customize the name of your page:

1<amp-analytics type="segment">
2<script type="application/json">
3  {
4    "vars": {
5      "writeKey": "WRITE_KEY",
6      "name": "My Page Name"
7    }
8  }
9</script>
10</amp-analytics>

Track

The Track method (referred to as click in AMP) lets you record any actions your users perform.

In order to track these click events simply add a trigger with a selector, which behaves the same way as CSS Selectors, which will send that event once the user clicks:

1<body>
2<amp-analytics type="segment">
3<script type="application/json">
4  {
5    "vars": {
6      "writeKey": "WRITE_KEY",
7      "name": "My Page Name"
8    },
9    "triggers": {
10      "click": {
11        "on": "click",
12        "selector": ".read-more-button",
13        "request": "track",
14        "vars": {
15          "event": "Read More Clicked"
16        }
17      }
18    }
19  }
20</script>
21</amp-analytics>
22<button class="read-more-button">Read More</button>
23</body>

Properties

Default properties

A few properties are automatically collected with each page view and track call:

1{
2  "anonymousId": "amp-<unique-id>",
3  "context.locale": "en-US",
4  "context.page.path": "/article",
5  "context.page.url": "http://example.com/article",
6  "context.page.referrer": "referrer",
7  "context.page.title": "My Article",
8  "context.screen.width": 600,
9  "context.screen.height": 800
10}

Custom properties

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

1<amp-analytics type="segment">
2<script type="application/json">
3  {
4    "vars": {
5      "writeKey": "WRITE_KEY",
6      "name": "My Page Name"
7    },
8    "extraUrlParams": {
9      "properties.type": "article",
10      "properties.published_at": "2016-06-28",
11      "properties.author": "John Doe",
12      "properties.button_type": "read-more",
13      "properties.article_id": "my-article-id"
14    }
15  }
16</script>
17</amp-analytics>

UTM parameters

Segment's AMP Source doesn't collect UTM parameters for you but you can define them as a property. An example of this is shown below:

1<amp-analytics type="segment">
2<script type="application/json">
3  {
4    "vars": {
5      "writeKey": "WRITE_KEY",
6      "name": "My Page Name"
7    },
8    "extraUrlParams": {
9      "properties.utm_source": "google",
10      "properties.utm_campaign": "2016-06-28",
11      "properties.utm_medium": "email"
12    }
13  }
14</script>
15</amp-analytics>

AMP Linker

In order to maintain a merged session for a user navigating from an AMP page served from AMP cache to AMP pages hosted on your domain, you will need to use the AMP Linker feature. It works by decorating outgoing links from AMP cache with params such as AMP Client ID in a URL parameter and gets written into a first-party cookie.

In order to enable this feature, you'll need to include a linkers object set to true within your configuration.

1<amp-analytics type="segment">
2<script type="application/json">
3  {
4    "vars": {
5      "writeKey": "WRITE_KEY",
6      "name": "My Page Name"
7    },
8    "linkers": {
9      "enabled": true
10    }
11  }
12</script>
13</amp-analytics>
14</body>

Troubleshooting

Can I use client-side Destinations?

No. All AMP data is sent from Google's servers to Segment's server-side API and subsequently only onto Segment's server-side destinations. You'll only be able to use Segment's server-side destinations and their relevant settings. For example, for Google Analytics, use the "Server-side Tracking ID".

How do I identify users?

Because AMP is static, it doesn't provide many options for persistently identifying users. AMP provides a basic cookie mechanism called an AMP Client ID which is a uniquely generated cookie for every unique end user's AMP session. Depending on Google's caching settings, you may receive multiple AMP Client IDs for the same user. Segment will capture this AMP Client ID as an anonymous_id and it will be of this format: amp-REDmCPH4F0QX44kCFomrcA.

How do I manage user identities client-side and server-side?

There is no user identity management client-side with AMP, so to join user sessions together you'll need to capture the AMP Client ID on your server-side and join it with your user_id in your warehouse.

1AMP Source: amp_client_id as anonymous_id
2Server Source: amp_client_id as anonymous_id, user_id as user_id

This identity schema will allow you to join down funnel interaction with earlier website browsing behavior. On the server-side, you can grab the amp_client_id from the ajs_anonymous_id header.

Why aren't all my IDs prefixed with an 'amp-'?

All AMP events won't consistently have an 'amp-' prefixed ID as this is only included in the event that the AMP page is directly visited on your domain. For further details refer to the various Client ID scenarios in relation to AMP pages in Google's docs (Segment can only guarantee that if the third scenario happens, the AMP ID will get generated and picked up).

See a live AMP with Segment analytics.