Apr 2021

How To Set Up GA EEC (Google Universal Analytics Enhanced E-commerce) into AMP Pages

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.

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:

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:

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

(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 🙁

“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 🙂

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:

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

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 🙂

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

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:

I created a WordPress demo website
I installed the WooCommerce plugin
I installed the official AMP plugin for WordPress
I used the network tab of Google Chrome DevTools (because Tag Assistant Google Chrome Extension will not see the hits 🙁 )
I used the GTM/GA Debug Google Chrome Extension by David Vallejo (Hi David, hope to see you soon!)

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.

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.

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

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).

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.

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

Here are the Promo parameters:

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.