AMP: how to collect advanced e-commerce data? – Part 2

Data Architecture 16 November 2018

Here, discover an overview of the technical possibilities offered to brands to collect data on AMP pages with web analytics solutions, and in particular with Google Analytics’ Enhanced Ecommerce feature.

We will see in particular:

– How to transmit e-commerce data to Google Analytics on AMP pages without a TMS

– How to transmit this data with Google Tag Manager (GTM)

– Finally, how to send this data to any type of web analytics tool, with or without a TMS

How to transmit Enhanced Ecommerce data to Google Analytics on AMP pages without a TMS?

Enhanced Ecommerce is a Google Analytics feature that allows to accurately measure user interactions with products on ecommerce websites and apps. This can be impressions of a product, clicks on it, displaying its details, or adding it to the shopping cart. All interactions are also recorded throughout the purchasing process, such as transactions or refunds.

To collect this type of ‘ raw data’ in Google Analytics on AMP pages, you must first call the AMP analytics extension in the <head> HTML tag of the page.

src=“https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>

Once the call to the JavaScript file is made, Google Analytics is set up in a dedicated tag.

<amp-analytics type=“googleanalytics”>
. . .
</amp-analytics>

In this tag, you will just have to insert a JSON object. Below is the configuration of a classic pageview hit for Google Analytics.

Native features in the Google Analytics library are currently limited. For example, Enhanced Ecommerce variables are not included by default. On the other hand, this library offers the possibility to enrich your hit by adding parameters via Measurement Protocol. This method allows us to send Enhanced Ecommerce data to Google Analytics on AMP pages dynamically and easily.

Below, the configuration for a Google Analytics hit tracking ecommerce data from a product page:

<amp-analytics type=“googleanalytics”>
<script type=“application/json”>
{
“vars”: {
“account”: “UA-XXXXX-Y”
},
“triggers”: {
  “trackPageview”: {
“on”: “visible”,
   “request”: “pageview”,
  “extraUrlParams”: {
“pa”: “detail”,
“pr1id”: “P12345”,
   “pr1nm”: “Android Warhol T-Shirt”,
  “pr1ca”: “Apparel”,
“pr1br”: “Google”,
  “pr1va”: “black”,
   “pr1pr”: “29.20”
}
}
}
}
</script>
</amp-analytics>

How to transmit Enhanced Ecommerce data in Google Analytics on AMP pages with Google Tag Manager?

The alternative to the Google Analytics library called directly on an AMP site is to use a TMS (Tag Management System). In our example, we will use Google Tag Manager (GTM) by creating an AMP container to collect the data. The use of a TMS is indeed very widespread on traditional web pages, because it allows analytics and media teams to modify their tracking with a lot of autonomy towards teams of front-end developers.

GTM interface: creation of an AMP container

AMP GTM containers are easy to configure. The tag templates provided facilitate the tracking of pages viewed and actions taken by users on the AMP site. However, at the time of writing, it is only possible to use the Google Universal Analytics tag template to trace back simple custom dimensions and metrics. And the possibilities offered by this template stop there. There are many features available in the Google Universal Analytics template of a web-based GTM container that do not exist in AMP containers, including the ability to retrieve Enhanced Ecommerce data for transmission to Google Analytics.

GTM: Universal Analytics template

To collect Enhanced Ecommerce data in Google Analytics, the solution consists in adding parameters via Measurement Protocol in the JSON configuration object (dataLayer) of the AMP GTM container. The e-commerce variables are therefore added upstream to the URL of the hit configured in GTM using the Measurement Protocol and the “extraUrlParams” variable.

Below is an example of a Universal Analytics hit to collect data to be added to the basket, via an AMP-type GTM container. The e-commerce variables sent are the product id, product name, category, brand and price:

AMP and other analytics solutions: Adobe Analytics, Facebook Analytics….

With AMP pages, it is in fact possible to send all types of data to any web analytics solution, with or without a TMS.

If the analytics solution has developed its own <amp-analytics> tag , it will be sufficient to change the value of the “type” attribute of the tag when the solution is available in the library. For example:

<amp-analytics type=“facebookpixel”>
. . .
</amp-analytics>

<amp-analytics type=“adobeanalytics”>
. . .
</amp-analytics>

Each solution has its own variables expected in a hit. And it is always possible to complete these hits with the “extraUrlParams” object.

If the solution you want to implement is not part of the list proposed by the AMP library, it is still possible to implement it. To do this, simply remove the attribute “type” from the “amp-analytics” tag.

<amp-analytics>
<script type=“application/json”>
{
“requests”: {
   “pageview”: “https://www.exemple.com/pixel?pixelid=12345”
},
“triggers”: {
  “trackPageview”: {
  “on”: “visible”,
“request”: “pageview”
}
}
}
</script>
</amp-analytics>

Thus, whether or not the solution exists in the AMP library, it is possible to send advanced e-commerce data to any solution via the “extraUrlParams” variable, adapting the parameters. Below is an example of how to configure a page view for the Facebook pixel.

<amp-analytics type=“facebookpixel”>
<script type=“application/json”>
{
“vars”: {
“pixelId”: “01234567890”,
  “currency”: “EUR”,
  “content_name”: “Android Warhol T-Shirt”,
“content_ids”: “P12345”,
  “content_type”: “Apparel”,
“value”: “29.20”
},
“triggers”: {
  “trackPageview”: {
“on”: “visible”,
“request”: “pageview”
}
}
}
</script>
</amp-analytics>

If you want to use an AMP-compatible TMS like Google Tag Manager, you can choose an analytics or media tag template from the proposed marketplace. This allows you to fill in the basic variables available in the tag if necessary and complete the information using the “extraUrlParams” variable to send ecommerce data, as explained above with the Google Analytics tag. Here is an example of an Adobe Analytics tag template:

For all media or web analytics solutions that do not have a template in GTM, it is always possible to use the “Custom Image” tag template. You can thus write the URL of the hit to be sent, complete the variables by retrieving their values from AMP variables and finally complete the hit if necessary with the “extraUrlParams” variable. Below, an example of a “Custom Image” tag template :

However, we recommend the use of GTM’s tag templates whenever possible. These do not yet allow to fill all the variables expected by the hit but future features should inevitably emerge, simplifying the configuration. Finally, do we necessarily have to go through a TMS to track AMP pages in Enhanced Ecommerce? It will be used on a case-by-case basis, depending on the needs and regulatory constraints to which the brand is subject.

The possibilities of Google Analytics tracking on AMP pages are numerous, using hard coding or via a TMS such as GTM. Currently, whatever the solution chosen, it will be necessary to master the Measurement Protocol.

Want to know more about it? Contact us! At 55, we support our clients in this tracking method, going well beyond websites (physical terminals, points of sale, etc.).