Table of Contents
What is AMP?
AMP, or Accelerated Mobile Pages, is an open source initiative started by Google that allows web pages to load faster for mobile users. For example, when you view search results on a mobile device and see articles with a lightning bolt over them, those pages will load using AMP.
AMP uses a subset of HTML and does not allow the embedding of arbitrary JavaScript. To allow tracking of Amplitude events on AMP websites, Amplitude has created a custom plugin for AMP.
How Do I Use Amplitude with AMP?
In order to use Amplitude with AMP, you will need to insert a code snippet into your AMP pages.
Initial Setup
First, add the amp-analytics component to your AMP HTML pages at the bottom of your <head> tag.
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
You will need to add the amplitude snippet to your AMP HTML page within your <body> tag. Replace the apiKey value with your amplitude project’s API key.
It will look something like the following:
<amp-analytics type="amplitude" id="amplitude">
<script type="application/json">
{
"vars": {
"apiKey": "YOUR AMPLITUDE API KEY"
}
}
</script>
Logging Events
You can log events by adding triggers and event requests to the JSON in your amplitude snippet.
Example 1: Logging a Click
Let’s say you wanted to log an event named story click when your users clicks on a link with the id story. In this case we would add a trigger on click like so:
<amp-analytics type="amplitude" id="amplitude">
<script type="application/json">
{
"vars": {
"apiKey": "YOUR AMPLITUDE API KEY"
},
"triggers": {
"click": {
"on": "click",
"selector": "#story",
"request": "event",
"extraUrlParams": {
"event": {
"event_type": "story click",
}
}
}
}
}
</script>
Note that the event params are nested under the event object in extraUrlParams. Int this case, we just log the event type, which is required.
Example 2: Logging a Page View with Event Properties
Let’s say you wanted to log an event named page view when a user lands on your page. We also want an event property page title to identify the page that was viewed. In this case, your trigger would listen on visible, and there is also an event_properties object in your JSON that identifies the page title.
<amp-analytics type="amplitude" id="amplitude">
<script type="application/json">
{
"vars": {
"apiKey": "YOUR AMPLITUDE API KEY"
},
"triggers": {
"pageView": {
"on": "visible",
"request": "event",
"extraUrlParams": {
"event": {
"event_type": "page view",
"event_properties": {
"page title": "${title}"
}
}
}
}
}
}
</script>
To set the page title property you use variable substitution to substitute in the title variable as in the example above. See the amp-analytics documentation for more on triggers and variable substitutions.
Example 3: Logging Events With User Properties and Group Properties
User properties and group properties can be added similarly to event properties by introducing user_properties and groups objects to your JSON. Group properties are only available if you have the accounts add-on
<amp-analytics type="amplitude" id="amplitude">
<script type="application/json">
{
"vars": {
"apiKey": "YOUR AMPLITUDE API KEY"
},
"triggers": {
"click": {
"on": "click",
"selector": "#story1",
"request": "event",
"extraUrlParams": {
"event": {
"event_type": "story click",
"event_properties": {
"story id": "story1"
},
"groups": {
"company": "Google"
},
"user_properties": {
"utm_source": "${queryParam(utm_source)}"
}
}
}
}
}
}
</script>
User Identification
AMP doesn't have a concept of a user ID. AMP will generate a unique client ID that we can use for the device ID. This ID is stored as a cookie for that AMP site.
AMP does, however, have a mechanism for sharing the client ID to other websites that are part of the same navigation flow. This will allow customers that link from their AMP site to their non-AMP site to carry over the same device ID, so that they can then identify the user ID.
This mechanism is called "a linker". Here are docs for sending and receiving the linker id.
It is also recommended that you look at Segment's docs: https://segment.com/docs/sources/mobile/amp/#how-do-i-identify-users-
UTM Parameters
UTM parameters are not automatically collected by the SDK. They can be passed through explicitly as user_properties that are pulled from query parameters in the url.
<amp-analytics type="amplitude" id="amplitude">
<script type="application/json">
{
"vars": {
"apiKey": "YOUR AMPLITUDE API KEY"
},
"triggers": {
"click": {
"on": "click",
"selector": "#story1",
"request": "event",
"extraUrlParams": {
"event": {
"event_type": "story click",
"user_properties": {
"utm_source": "${queryParam(utm_source)}",
"utm_campaign": "${queryParam(utm_campaign)}",
"utm_medium": "${queryParam(utm_medium)}"
}
}
}
}
}
}
</script>
Caveats
Sessions
AMP pages do not have any session support or means of generating a session id.
Identify operations
The AMP SDK does not support setting identify operations. You would need to pass a user properties object in your event parameters as documented above.
Misc Resources
Here are some other resources that might be useful in implementing AMP on your site.
General AMP analytics docs
https://www.ampproject.org/docs/reference/components/amp-analytics
Available variables for customers to use for event/user properties
https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md
Segment's AMP docs
https://segment.com/docs/sources/mobile/amp/