Send event data from your AMP page to RudderStack.
6 minute read
The RudderStack AMP component makes it easy to send the event data from your AMP page to your specified destinations via RudderStack. Now you don’t need to implement or test multiple components for different destinations for your event data. This component collects the default properties and sends a page event to RudderStack.
Since the AMP source sends the data directly to the RudderStack backend, it supports only cloud mode destinations. For more information on cloud mode, see RudderStack Connection Modes.
Setup requirements
To use the RudderStack AMP component, the following prerequisites must be met:
Once signed up, set up an AMP source in the dashboard. You should be able to see a Write Key for this source, as shown below:
You will also need a data plane URL. Refer to the Glossary for more information on the data plane URL and where to find it.
The Setup tab in the RudderStack dashboard (seen above) has an SDK installation snippet containing both the write key and the data plane URL. You can use it to integrate the AMP component into your project.
Getting started
Learn more about the AMP project from their official website. To get started and set up your AMP project, check out their Quick Start Guide.
After completing the initial setup of your AMP project, follow these steps to start sending your event data to RudderStack:
You can record the page views on your website using the page request. To add custom properties to your page request, you can use the extraUrlParams object.
RudderStack’s AMP analytics component includes an automatic page view. You can set the name of the automatic page view through pageName, as shown in the following snippet:
If you fail to provide the value for the pageName variable, RudderStack automatically sets the page name to Unknown Page.
Track
You can record any user event on your website using the track request, or create a trigger to do so. You need to set the event’s name in the trigger’s variables, as shown in the code snippet below:
You can send extra properties for your page or track events to add more information along with the event request. Once you mention the properties as extraUrlParams in the amp-analytics tag of your implementation, they will be passed to RudderStack for further processing.
Prepend properties. to the property name within the extraUrlParams object so that it can be parsed as the property value in RudderStack. For more information, refer to the Custom properties section below.
Default properties
RudderStack collects the following properties with each track and page view:
Any property set at the top-level extraUrlParams object will be sent with each request. For example, the property article_id will be sent for all requests triggered by this snippet.
If you want to add custom properties to a specific event or a page call, you need to add an extraUrlParams object within your trigger configuration. The following code snippet shows how to do so:
The property clickType will be sent only for the track request, whereas the property article_id will be sent for both the requests (the automatic page and track call).
UTM parameters
RudderStack does not collect the UTM information from the SDK. Instead, we encourage you to send the properties as extraUrlParams.
You can use the AMP Linker feature to ensure a merged session for users navigating from cached AMP pages (on an AMP cache) to AMP pages on your domain. When a user navigates from a cached AMP page to an AMP page on your domain, the linker sends the current AMP ClientID by adding a URL parameter to the outgoing link. The AMP page on your domain receives this parameter and uses it to set a first-party cookie.
Once this cookie is set, both AMP and Non-AMP pages on your domain use this cookie to identify the user uniquely. This way, the same AMP Client ID (set by the cached AMP page) can be used to identify the user in all contexts.
The following code snippet demonstrates how to enable this feature:
You can also use the query parameter from the decorated outgoing link from an AMP cache page to a non-AMP page on your domain by using the RudderStack JavaScript SDK.
This site uses cookies to improve your experience while you navigate through the website. Out of
these
cookies, the cookies that are categorized as necessary are stored on your browser as they are as
essential
for the working of basic functionalities of the website. We also use third-party cookies that
help
us
analyze and understand how you use this website. These cookies will be stored in your browser
only
with
your
consent. You also have the option to opt-out of these cookies. But opting out of some of these
cookies
may
have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This
category only includes cookies that ensures basic functionalities and security
features of the website. These cookies do not store any personal information.
This site uses cookies to improve your experience. If you want to
learn more about cookies and why we use them, visit our cookie
policy. We'll assume you're ok with this, but you can opt-out if you wish Cookie Settings.