⚡ Analytics for AMP ⚡
The Segment
<amp-analytics> component is an easy way 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.
Top note! It's a good idea to create a new Segment Source for AMPs; choose a Server or Legacy type!
Data will be sent from your AMP to Segment and fanned to all enabled end-tools, server to server!
Getting Started
If you’re new to AMP, go through the excellent Quickstart Guide.
Once you have an AMP up and running, include the amp-analytics component before closing </head>:
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
Include Segment analytics, using <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
Segment AMP component will track pageviews automatically once it is included in the body tag.
To collect additional, custom properties, include an "extraUrlParams" object like so:
<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
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 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 like so:
<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>
If this isn't working for ya, contact your friends on the Success team