In this guide, I’ll show you how to track GA EEC (Google Universal Analytics Enhanced E-Commerce) on AMP Pages 🙂

Introduction

AMP (https://amp.dev/) is an open-source HTML framework for the creation of user-first websites, stories, ads, and email.

The use cases of AMP pages

Launched on October 7, 2015, it was originally created by Google as a competitor to services like Facebook Instant Articles and Apple News. AMP is optimized for mobile web browsing and conceived for crafting web pages with a very fast loading time.

AMP is used even on the mobile Google SERP:

amp search engine result page

How does Google AMP work?

The AMP pages are nothing more than HTML5 with a set of specifications (requirements and restrictions).

As Google’s AMP Product Manager Rudy Galfi said to SearchEngineLand.com, “…the optimization is powered by JavaScript, styling can be customized via CSS3, and pages are cached.

For more information about how AMP works, check out this page: amp.dev/about/how-amp-works

 

How to track Analytics data from an AMP Page

The AMP Project has created the <amp-analytics> component to enable page tracking on AMP pages.

To enable page tracking on AMP Pages, you need to include this script in the <head>, before the <amp-analytics> component:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Then you can insert in the amp-analytics component the JSON-LD which contains the parameters of the tracking tool that you want to use on your page.

For example:

amp analytics example

Take a look at the type attribute.


<amp-analytics type="myVendor" id="myVendor" data-credentials="include">

 

The type attribute can be used to load a configuration made by a specific vendor. Of course, Google is in the vendor list of amp-analytics type attribute 🙂

In detail, here are the parameters to be set for some Google tools:

  • for Google Universal Analytics, use the type attribute value googleanalytics
  • for the gtag library, use the type attribute value gtag
  • for Google Tag Manager there isn’t a type attribute value, because GTM injects the type attribute on the AMP page through the tags that you have published in GTM

AMP type attribute vendors - a google list

(You can find more information about the amp-analytics component in the official guide: https://amp.dev/documentation/components/amp-analytics/)

 

How to track AMP Pages with Google Universal Analytics

Ok, maybe you already guessed how to do it 😀

To track AMP Pages with Google Universal Analytics, you need to insert the googleanalytics or gtag type attribute in the AMP Page tracking script.

(In the official guide, Google explains only the gtag type attribute usage: https://developers.google.com/analytics/devguides/collection/amp-analytics)

Let’s see some examples:

This is the AMP Page tracking script with the googleanalytics version of the type attribute:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="googleanalytics">
<script type="application/json">
{
    "vars":{
    "account":"UA-XXXXX-Y"
},
   "triggers":{
      "trackPageview":{
          "on":"visible",
          "request":"pageview"
      }
   }
}
</script>
</amp-analytics>

 

This is the AMP Page tracking script with the gtag version of the type attribute:


<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

 

In this guide, I’ll cover the tracking of GA EEC (Google Universal Analytics Enhanced E-commerce) into AMP Pages with the googleanalytics version of the type attribute, and not with the gtag version.

Now let’s dive into event tracking.

To measure events in AMP pages, we need to use triggers and we need to define their parameters.

Trigger parameters are used to track actions like pageviews, render-start, ini-load, click, scroll, timer, visible, hidden, user-error, access-*, video-*, and so on.

(Here’s the complete guide to the available triggers: https://amp.dev/documentation/components/amp-analytics/#available-triggers)

In a trigger configuration, we can use the following properties:

  • on: specifies the type of event (i.e. click)
  • selector: a CSS selector which specifies the target element or elements (i.e. .buttonclass)
  • vars: specifies the event name and add additional parameters if necessary (in the following code example, vars refers to the second occurrence of the property, indicated in blue)

In AMP you can track pageviews and events just like you would do in a non-AMP webpage.

For example, you can use this code to track button clicks with the .buttonclass .cta CSS selector:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> 
<amp-analytics type="googleanalytics"> 
<script type="application/json"> 
{ 
     "vars":{ 
     "account":"UA-XXXXX-Y" 
     }, 
     "triggers":{ 
         "buttonClick":{ // this is the event name
            "on":"click", 
            "selector":".buttonclass .cta", 
            "request":"event", 
            "vars":{ 
               "eventCategory":"click", 
               "eventAction":"button", 
               "eventLabel":"cta button" 
            }
         } 
     } 
}
</script>
</amp-analytics> 

 

Great!

“Yeah, that’s great! But…what about the enhanced e-commerce tracking?”

Oh… well… there is a little problem.

“What’s the problem?”

There is no official Google documentation to do it.

“What? Are you kidding me?”

Nope. There are no specific parameters in googleanalytics or gtag to do it 🙁

homer simpson doh

“Doh! So what can we do?”

Non c’è problema [nón ˈtʃɛ pro·blè·ma]. I found a nice #barbatrucco (which stands for trick, in Italian) to do it.

 

How to track GA EEC (Google Universal Analytics Enhanced E-commerce) in AMP Pages

Let’s see how to track all these Enhanced E-commerce actions:

  • Product Impressions
  • Product Clicks
  • Product Details
  • Add To Cart
  • Remove From Cart
  • Checkout
  • Purchase
  • Refund
  • Promotion Impressions
  • Promotion Clicks

As you probably know, Enhanced E-commerce actions are nothing more than extra parameters included in the Google Analytics pageview hit or event hit.

So, the question is: “can I add extra parameters even on AMP analytics?”

The answer is… YES 🙂

homer simpson woo hoo

 

What are the Extra URL Parameters in AMP?

An AMP-analytics request can contain an extraUrlParams configuration object; this object specifies additional parameters to be included in the pageview request or event request.

These additional parameters are the Extra URL Parameters.

By default, the extra URL parameters are appended to the query string of a request URL via the usual query string syntax (i.e. https://example.com?a=1&b=2&c=3)

Here’s an example that would append ?a=1&b=2&c=3 to a AMP request:

"extraUrlParams": {
  "a": "1",
  "b": "2",
  "c": "3"
}

 

(You can find the full Extra URL Parameters documentation here:
https://amp.dev/documentation/components/amp-analytics/#extra-url-parameters)

The problem with Extra URL Parameters in AMP is that their nomenclature is not very intuitive, so we need a simple way to visualize them.

To do this, we can look at them from an Enhanced E-commerce perspective, which may sound familiar to you.

So, before digging deeper on AMP extraUrlParams, let’s go back for a moment to the Enhanced E-commerce Parameters. 

Why? Because soon we will “convert” the Enhanced E-commerce Parameters in Extra URL parameters for AMP.

 

The EEC Parameters that we will “convert” in Extra URL parameters

Let’s take EEC Product Impressions as an example.

In Google Tag Manager, this is the code to be pushed into the dataLayer to track the Product Impressions.

The parameters of this EEC Product Impressions action are indicated in red.

<script>
dataLayer.push({
  'ecommerce': {
    'currencyCode': 'EUR',
    'impressions': [
     {
       'name': 'Triblend Android T-Shirt',
       'id': '12345',
       'price': '15.25',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Gray',
       'list': 'Search Results',
       'position': 1
     },
     {
       'name': 'Donut Friday Scented T-Shirt',
       'id': '67890',
       'price': '33.75',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Black',
       'list': 'Search Results',
       'position': 2
     }]
  }
});
</script>

 

As you can see in this example, the EEC Parameters (currencyCode, impressions, name, id, price, brand, category, etc. ) are the additional parameters that specify the details about the Product Impressions.

Keep them in mind, because soon we will “convert” them as promised.

Now let’s go back to the extra URL parameters in AMP. 

The next question is:

“Which Extra URL Parameters do I need to use in AMP? And where I can find them?”

The short answer is: in the Measurement Protocol.

The Measurement Protocol

According to Google, the Measurement Protocol is “a standard set of rules for collecting and sending hits from any internet-connected device to Analytics”.

We can think of the Measurement Protocol as the source code of Google Analytics, where data are displayed in their raw form.

This raw form data may seem intimidating at first, but actually, it is nothing more than a query string with some parameters attached.

Having said that, the best way of approaching the Measurement Protocol is by far with a real-world example.

Go to https://enhancedecommerce.appspot.com/ (it’s an e-commerce demo website of Google Analytics) and:

  1. Open the Network Tab of your Google Chrome DevTools
  2. Filter for “v=1”
  3. Select one of the hits of Google Analytics
  4. Click the Headers Tab
  5. Check the parameters

understand the google universal analytics measurement protocol

As you can see in Step 3, the “collect?v=1&_v=j89…” part is a query string with several parameters related to the product impression.

Let’s see them in detail:

&il1nm=homepage                         // this parameter is the Product Impression "Search Results" or list
&il1pi1id=9bdd2                         // this parameter is the Product Impression ID
&il1pi1nm=Compton%20T-Shirt             // this parameter is the Product Impression name
&il1pi1pr=44.00                         // this parameter is the Product Impression price
&il1pi1br=Compton                       // this parameter is the Product Impression brand
&il1pi1ca=T-Shirt                       // this parameter is the Product Impression category 

 

See any familiarity with the EEC Parameters? I bet you do!

This list of parameters coincides with the extraUrlParams that we need to insert into the JSON of the amp-analytics component.

(Here is the official Google guide to all the EEC measurement protocol parameters:
https://developers.google.com/analytics/devguides/collection/protocol/v1/devguide#enhancedecom)

 

Let’s consider another example taken by the official Google guide that I have just mentioned.

&il1nm=Search%20Results                  // Impression list 1. Required.
&il1pi1id=12345                          // Product Impression 1 ID. Either ID or name must be set.
&il1pi1nm=Triblend%20Android%20T-Shirt   // Product Impression 1 name. Either ID or name must be set.
&il1pi1pr=15.25                          // Product Impression 1 price.
&il1pi1ca=Apparel                        // Product Impression 1 category.
&il1pi1br=Google                         // Product Impression 1 brand.
&il1pi1va=Gray                           // Product Impression 1 variant.
&il1pi1ps=1                              // Product Impression 1 position.
&il1pi1cd1=Member                        // Custom dimension.

 

Once more, this list of parameters coincides with the extraUrlParams that we need to insert into the JSON of the amp-analytics component.

We are definitely moving forward to our tracking goal! 😀

 

The final JSON with the extraUrlParams

Now, we can build the list of the extraUrlParams that need to be inserted into the JSON of the amp-analytics component.

Here is the code:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="googleanalytics">  
<script type="application/json">  
{ 
  "vars": { 
     "account":"UA-XXXXX-Y" 
   }, 
   "triggers":{ 
     "trackPageview":{ 
       "on":"visible", 
       "request":"pageview", 
       "vars":{ 
         "title":"Name of the Article" 
       }, 
       "extraUrlParams":{ 
         "il1nm":"Search Results",                  // list or search results 
         "il1pi1id":"12345",                        // product #1 id 
         "il1pi1nm":"Triblend Android T-Shirt",     // product #1 name 
         "il1pi1ca":"Apparel",                      // product #1 category
         "il1pi1br":"Google",                       // product #1 brand
         "il1pi1pr":"15.25",                        // product #1 price
         "il1pi1va":"Gray",                         // product #1 variant
         "il1pi1ps":"1",                            // product #1 position
         "il1pi2id":"67890",                        // product #2 id 
         "il1pi2nm":"Donut Friday Scented T-Shirt", // product #2 name 
         "il1pi2ca":"Apparel",                      // product #2 category
         "il1pi2br":"Google",                       // product #2 brand
         "il1pi2pr":"33.75",                        // product #2 price
         "il1pi2va":"Black",                        // product #2 variant 
         "il1pi2ps":"2"                             // product #2 position 
       } 
     } 
   } 
}
</script> 
</amp-analytics> 


As you can see, there is a correspondence between the Measurement Protocol Parameters and the dataLayer parameters that we have seen earlier.


Here is a summary table that I hope you’ll find useful:

Tracking type Measurement Protocol parameter dataLayer parameter Example value JSON parameter
Product Impressions
il1nm
list
Search Results
"il1nm":"Search Results",
Product Impressions
il1pi1id
id
19
"il1pi1id":"19",
Product Impressions
il1pi1nm
name
Triblend Android T-Shirt
"il1pi1nm":"Triblend Android T-Shirt",
Product Impressions
il1pi1ca
category
Google
"il1pi1ca":"Google",
Product Impressions
il1pi1br
brand
Apparel
"il1pi1br":"Apparel",
Product Impressions
il1pi1pr
price
15,25
"il1pi1pr":"15,25",
Product Impressions
il1pi1ps
position
1
"il1pi1ps":"1",
Product Impressions
il1pi2id
id
717
"il1pi2id":"717",
Product Impressions
il1pi2nm
name
Donut Friday Scented T-Shirt
"il1pi2nm":"Donut Friday Scented T-Shirt",
Product Impressions
il1pi2ca
category
Apparel
"il1pi2ca":"Apparel",
Product Impressions
il1pi2br
brand
Google
"il1pi2br":"Google",
Product Impressions
il1pi2pr
price
33,3
"il1pi2pr":"33,3",
Product Impressions
il1pi2ps
position
2
"il1pi2ps":"2",

 


How to validate the JSON

Now we need to make sure that our JSON is working smoothly.

To send all Enhanced E-commerce actions with Google Universal Analytics requests, I set up a demo website with the JSON of the amp-analytics component.

The set-up parameters are contained in a Google Sheet named “AMP Google Analytics Enhanced E-commerce by Tag Manager Italia” which has the following columns:

  • Tracking Type (contains the EEC action type)
  • Measurement Protocol (contains the Measurement Protocol parameter in Google Universal Analytics)
  • Example of value (contains the example value taken by the official Google guide to all the EEC measurement protocol parameters)
  • dataLayer push (contains an example of the full dataLayer request for the e-commerce action; I used dataLayer because I’m really comfortable with GTM 😀 )
  • JSON parameters (contains the parameters that you can copy and paste in your JSON)
  • JSON for AMP (contains the full JSON for AMP request for the e-commerce action)

Of course, I filled the Google Sheet with ALL the Enhanced E-commerce action examples 🙂

 

google sheet enhanced e-commerce measurement protocol, datalayer and JSON parameters examples

 

You can get your FREE copy of the Google Sheet here: https://docs.google.com/spreadsheets/d/1ZM229cUWLvHYcvnfm5xAIk1TBYijAL8i-YDcgTOSo7A/edit?usp=sharing

As you will see, in the J column (JSON for AMP) I included the full JSON code to be inserted in the AMP page.

Here’s how I did it (and how you can create your own JSON code):

  • I copied the googleanalytics Pageview JSON for AMP code from the “How to track AMP Pages with Google Universal Analytics” section of this guide (you can find it on the top of this page)
  • I added the “extraUrlParams: { … }” code portion to the JSON for AMP and filled it with the list of JSON parameters listed in the Google Sheet
  • I copied the JSON for AMP
  • I pasted it on JSON Formatter & Validator online website (it’s free!), so I got some validated and formatted code
  • I pasted the validated and formatted code on the column JSON for AMP of the Google Sheet

 

json formatter and validator

 

Great!

“Yeah! But how can I test this code?”

Let’s do it together!

 

How to test Enhanced E-commerce tracking on AMP Pages

Of course, to test AMP Pages I had to use a website demo with AMP Pages. To do this:

amp plugin for wordpress

 

Why did I use the AMP plugin?

Because it has a cool analytics section where you can add all the JSON for AMP code that you need to test.

amp plugin for wordpress - analytics section

 

Of course, you can create static HTML pages if you prefer.

Let’s go with the test! 😀

 

Testing and debugging AMP Enhanced E-commerce Google Analytics

 

Test of the Promotion Impressions EEC action

Step one: open the Google Sheet “AMP Google Analytics Enhanced E-commerce by Tag Manager Italia and copy column J on the Promotion Impression rows.

Google Sheet AMP Google Analytics Enhanced E-commerce by Tag Manager Italia - promotion impressions

Step two:

  • Open the analytics section of the AMP Plugin
  • Insert googleanalytics on the text type field
  • Paste the JSON code that you have copied into the JSON Configuration section. (Important: don’t forget to change the example Google Universal ID tracking (UA-1111111-1) with your ID, and pay attention to the double-quote character (use the character  because the character or the character will not work)
  • Save

JSON AMP enhanced ecommerce Google Universal Analytics - promotion impressions

In this case, the extraUrlParams will be sent on every pageview.

Step three:

  • Open the Network tab on your Chrome DevTools by pressing Control + Shift + J or Command + Option + J (Mac). The Console panel opens. You might prefer to dock DevTools to the bottom of your window. Click the Network Tab.
  • Go to the AMP page. To display the AMP page, I just add ?amp to the URL (http://demo.tagmanageritalia.it/esempio/?amp); in the alternative, use Google Chrome Extension like AMP Validator to find the AMP URL.
  • Find the google-analytics.com requests. Insert google-analytics.com on the search filter (1), select the collect?v=1 request (2) click the Headers Tab (3) then scroll down: you will see the extraUrlParams of Enhanced E-commerce (4).

debug promotion impressions AMP enhanced ecommerce google analytics

Step four:

Now we need to use the GTM/GA Google Chrome Extension: it allows you to easily find the Enhanced E-Commerce (EEC) Hit.

Let’s see how to do it.

Select the GTM/GA Debug tab and reload the page. Now select the GA Tab.

debug promotion impressions AMP enhanced ecommerce google analytics with GTM-GA

To display only the EEC parameters, just click the EEC tab and… Bingo!

Here are the Promo parameters:

debug promotion impressions AMP enhanced ecommerce google analytics with GTM-GA EEC

Great! Now let’s take a look at other Enhanced E-Commerce actions 🙂

The procedure is the same:

  • copy the JSON for AMP
  • paste it into the AMP analytics section of the Plugin
  • test and debug with Network Tab or GTM/GA Google Chrome Extension

Here is a short summary video:

 

Test of the Promotion Clicks EEC action

Copy the JSON for AMP Promotion Clicks from the Google Sheet and replace the AMP Analytics section.

Be careful: to track the click-based EEC actions (i.e. Promotion Click, Add to Cart, Product Click, and so on), you should NOT use a JSON trigger pageview event type; use instead a JSON trigger event type, making sure to set up correctly the CSS selector.

 

debug promotion clicks AMP enhanced ecommerce google analytics with GTM-GA EEC

 

Test of the Product Impressions EEC action

Use the same procedure as the previous test:

debug product impressions AMP enhanced ecommerce google analytics with GTM-GA EEC

Test of the Product Clicks EEC action

Use the same procedure as the previous test:

Be careful: to track the click-based EEC actions (i.e. Promotion Click, Add to Cart, Product Click, and so on), you should NOT use a JSON trigger pageview event type; use instead a JSON trigger event type, making sure to set up correctly the CSS selector.

 

debug product clicks AMP enhanced ecommerce google analytics with GTM-GA EEC

 

Test of the Product Details EEC action

Use the same procedure as the previous test:

debug product details AMP enhanced ecommerce google analytics with GTM-GA EEC

 

Test of the Add to Cart EEC action

Use the same procedure as the previous test:

Be careful: to track the click-based EEC actions (i.e. Promotion Click, Add to Cart, Product Click, and so on), you should NOT use a JSON trigger pageview event type; use instead a JSON trigger event type, making sure to set up correctly the CSS selector.

debug add to cart AMP enhanced ecommerce google analytics with GTM-GA EEC

 

Test of the Remove from Cart EEC action

Use the same procedure as the previous test:

Be careful: to track the click-based EEC actions (i.e. Promotion Click, Add to Cart, Product Click, and so on), you should NOT use a JSON trigger pageview event type; use instead a JSON trigger event type, making sure to set up correctly the CSS selector.

debug remove from cart AMP enhanced ecommerce google analytics with GTM-GA EEC

 

Test of the Checkout Step 1 EEC action

Use the same procedure as the previous test:

debug checkout step1 AMP enhanced ecommerce google analytics with GTM-GA EEC

 

Test of the Purchase EEC action

Use the same procedure as the previous test:

debug purchase enhanced ecommerce google analytics with GTM-GA EEC

Test of the Refund EEC action

Use the same procedure as the previous test:

debug refund enhanced ecommerce google analytics with GTM-GA EEC

Conclusion

As you can see, it is possible to send Enhanced E-Commerce data to Google Universal Analytics from AMP Pages.

The trick is to understand the Measurement Protocol of GA and then use the parameters of the extraUrlParams configuration object.

Thanks to my Google Sheet filled with all examples, now you can do it without much hassle 😀

Now you have no more excuses! You can track Enhanced E-Commerce on AMP Pages 🙂

But…what about Google Analytics 4?

Well, I asked myself the same question…

<amp-analytics type="gtag" data-credentials="include">

GA4 works on gtag.js library… so the solution is to use gtag AMP analytics!

Nope 🙁

The gtag AMP analytics type doesn’t support GA4 (it’s not the same JavaScript library).

Too bad! 

So, how we can send hits on GA4?

Would you like to know the GA4 #barbatrucco?

I found a special #barbatrucco (trick) that allows me to track GA4 E-Commerce on AMP Pages. Would you like an article on this topic?

Let me know in the comments below!

 

Condividi anche tu Google Tag Manager!
  • Reply

    Nandan

    09 04 2021

    Great detailed article Thanks for sharing in the community helping us

    • Matteo Zambon

      12 04 2021

      Thanks Nandan for your feedback!

Hai ancora qualche dubbio?
Chiedi pure qui sotto, sarò pronto a risponderti!

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.