AMP, or Accelerated Mobile Pages, is an open-source initiative 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 icon in the corner, those pages will load using AMP.
AMP uses a subset of HTML and does not allow the embedding of arbitrary JavaScript. However, Amplitude has created a custom plugin for AMP that enables you to track Amplitude events on AMP websites.
Before you begin
AMP pages do not have any session support or means of generating a session ID.
The AMP SDK does not support setting identify operations. You would need to pass a user properties object in your event parameters, as documented below.
Implement Amplitude on AMP
In order to use Amplitude with AMP, you will need to insert a code snippet into your AMP pages.
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 this:
<amp-analytics type="amplitude" id="amplitude">
<script type="application/json">
{
"vars": {
"apiKey": "YOUR AMPLITUDE API KEY"
}
}
</script>You can log events by adding triggers and event requests to the JSON in your amplitude snippet.
Example 1: Logging a click
Imagine you wanted to log an event named story click when your users click on a link with the ID story . In this case, you would add a trigger on click:
<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
Imagine you wanted to log an event named page view when a user lands on your page. You 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.
NOTE: 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. Instead, AMP will generate a unique client ID that Amplitude 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 who 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. We also recommend that you look at Segment's documentation on the subject.
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>