Come tracciare l’E-Commerce avanzato (EEC) di Google Analytics nelle pagine AMP

Attenzione: in seguito al provvedimento del Garante Privacy italiano che ha dichiarato illecita l’implementazione di Google Universal Analytics (GA3) su un sito web, è necessario eliminare il prima possibile la proprietà di GA3 dai propri progetti web e passare subito a GA4.

Se non hai dimestichezza con GA4 e desideri imparare a padroneggiare nel modo corretto questo strumento, nel mio libro su GA4 “Google Analytics 4 per chi inizia” ti guido passo passo per imparare a utilizzarlo in maniera semplice e pratica.

–

In questa guida ti mostrerò come monitorare l’EEC (E-commerce Avanzato o Enhanced E-Commerce) in Google Universal Analytics sulle pagine AMP 🙂

Introduzione

AMP (https://amp.dev/) è un framework HTML open source per la creazione di siti web, storie, annunci ed e-mail per l’utente al primo posto.

Lanciato il 7 ottobre 2015, è stato creato da Google come concorrente di servizi come Facebook Instant Articles e Apple News. AMP è ottimizzato per la navigazione web mobile e concepito per creare pagine web con un tempo di caricamento molto veloce.

AMP viene utilizzato anche sulla SERP di Google mobile:

Come funziona Google AMP?

Le pagine AMP non sono altro che pagine HTML 5 con una serie di specifiche (requisiti e restrizioni).

Rudy Galfi, Product Manager AMP di Google, ha dichiarato a SearchEngineLand.com, che in AMP ” l’ottimizzazione è basata su JavaScript, lo stile può essere personalizzato tramite CSS3 e le pagine vengono memorizzate nella cache.”

(Per ulteriori informazioni su come funziona AMP: amp.dev/about/how-amp-works)

Come tracciare la web analytics in una pagina AMP

Il progetto AMP ha introdotto il componente <amp-analytics> per abilitare il monitoraggio sulle pagine AMP.

Nel dettaglio, per abilitare il monitoraggio, devi includere questo script nella <head>, prima del componente <amp-analytics> :

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

Quindi puoi inserire nel amp-analytics il JSON-LD che contiene i parametri dello strumento di tracciamento che vuoi usare nella tua pagina.

Ad esempio:

Dai un’occhiata all’attributo type:


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

L’attributo type può essere utilizzato per caricare una configurazione realizzata da un fornitore (o vendor). Ovviamente Google è nella lista dei vendor dell’attributo type di amp-analytics. 🙂

A questo proposito, ecco i parametri da impostare per alcuni strumenti di Google:

per Google Universal Analytics, utilizza il valore googleanalytics per l’attributo type
per la libreria gtag, utilizza il valore gtag per l’attributo type
per Google Tag Manager non c’è un valore specifico per l’attributo type, perché il contenitore AMP di GTM inserisce l’attributo type nella pagina AMP tramite i tag che hai pubblicato in GTM

(Puoi trovare ulteriori informazioni sul componente amp-analytics nella guida ufficiale: https://amp.dev/documentation/components/amp-analytics/)

Come tracciare le pagine AMP con Google Universal Analytics

Ok, forse hai già indovinato come si fa 😀

Per monitorare le pagine AMP con Google Universal Analytics, devi inserire i valori googleanalytics o gtag per l’attributo type nello script di tracking della pagina AMP.

(Nella guida ufficiale, Google spiega solo l’utilizzo del valore gtag: https://developers.google.com/analytics/devguides/collection/amp-analytics)

Vediamo alcuni esempi.

Questo è lo script della pagina AMP con la versione googleanalytics dell’attributo type :

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

Questo è lo script della pagina AMP con la versione gtag dell’attributo type :

<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 questa guida vedremo insieme come effettuare il tracking di GA EEC (Google Universal Analytics Enhanced E-commerce) nelle pagine AMP con la versione googleanalytics dell’attributo type e non con la versione gtag.

Detto questo, diamoci dentro con il tracking! 😀

Per misurare gli eventi nelle pagine AMP, dobbiamo utilizzare i trigger e dobbiamo definire i loro parametri.

I parametri vengono utilizzati per tenere traccia di azioni come pageviews, render-start, ini-load, click, scroll, timer, visible, hidden, user-error, access-*, video-* e così via.

(Ecco la guida completa ai trigger disponibili: https://amp.dev/documentation/components/amp-analytics/#available-triggers)

In una configurazione di trigger per AMP, possiamo utilizzare i seguenti parametri:

on: specifica il tipo di evento (e.s. clic)
selector: un selettore CSS che specifica l’elemento o gli elementi di destinazione (es. buttonclass)
vars: specifica il nome dell’evento e aggiunge parametri aggiuntivi se necessario (nel seguente esempio di codice, vars si riferisce alla seconda occorrenza della proprietà, indicato in blu)

In AMP puoi monitorare le visualizzazioni di pagina e gli eventi proprio come faresti in una pagina web non-AMP.

Ad esempio, per tenere traccia dei clic sui pulsanti con il selettore CSS .buttonclass .cta , puoi utilizzare questo codice:

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

Bella storia!

“Bella storia sì! Ma… cosa mi dici dell’E-commerce avanzato?

Eh, c’è un piccolo problema…

“Qual è il problema?”

Non esiste una documentazione ufficiale di Google per tracciarlo in AMP.

“Cosa? Ma stai scherzando?”

No, dico davvero. Non ci sono parametri specifici in googleanalytics o gtag per farlo 🙁

“Doh! Allora cosa si fa?”

Uh, non ti preoccupare… ho trovato un bel #barbatrucco!

Come tracciare l’E-commerce avanzato in Google Analytics (Google Universal Analytics Enhanced E-Commerce) nelle pagine AMP

Vediamo come monitorare tutte queste azioni dell’E-commerce avanzato (EEC) di Google Analytics:

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

Come probabilmente saprai, le azioni dell’EEC non sono altro che parametri extra inclusi nell’hit visualizzazione di pagina o nell’hit evento di Google Analytics (se hai bisogno di maggiori informazioni, puoi trovare dei corsi nello Shop di Tag Manager Italia).

Quindi, la domanda è: “posso aggiungere parametri extra anche nell’AMP Analytics?”

La risposta è … SI 🙂

Cosa sono i parametri URL aggiuntivi (extra URL parameters) in AMP?

Una richiesta (request) in AMP-Analytics può contenere un oggetto di configurazione extraUrlParams; questo oggetto specifica dei parametri aggiuntivi da includere nella request pageview o nella request event.

Questi parametri sono proprio i parametri URL aggiuntivi (o Extra URL Parameters).

Di default, i parametri URL aggiuntivi vengono aggiunti alla query string dell’URL della request tramite la consueta sintassi query string (ad esempio: https://paginadiesempio.com?a=1&b=2&c=3)

Ecco un esempio di codice che aggiunge ?a=1&b=2&c=3 a una request AMP:

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

(Qui puoi trovare la documentazione completa dei parametri URL aggiuntivi:
https://amp.dev/documentation/components/amp-analytics/#extra-url-parameters)

Il problema con i parametri URL aggiuntivi in AMP è che la loro nomenclatura non è molto intuitiva, quindi abbiamo bisogno di un modo semplice per visualizzarli.

Per fare ciò, possiamo guardali dalla prospettiva dell’E-commerce avanzato, che immagino ti suoni molto familiare.

Quindi, prima di approfondire i parametri URL aggiuntivi in AMP, torniamo per un momento ai parametri E-commerce avanzato.

Perché? Perché a breve ti mostrerò come “convertire” i parametri dell’E-commerce avanzato in parametri URL aggiuntivi per AMP.

I parametri dell’E-commerce avanzato che “convertiremo” in parametri URL aggiuntivi

Prendiamo la gestione delle Product Impressions nell’EEC come esempio.

In Google Tag Manager, questo è il codice da inserire nel dataLayer per monitorarle.

I parametri di questa action per le Product Impressions sono indicati in rosso.

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

Come puoi vedere in questo esempio, i parametri EEC (currencyCode, impressions, name, id, price, brand, category, ecc. ) sono i parametri aggiuntivi che specificano i dettagli sulle Product Impressions.

Tienili a mente, perché presto li “convertiremo” come promesso.

Ora torniamo ai parametri URL aggiuntivi in AMP.

La domanda successiva è:

“Quali parametri URL aggiuntivi devo utilizzare in AMP? E dove posso trovarli? “

La risposta breve è: nel protocollo di misurazione.

Il protocollo di misurazione (measurement protocol)

Secondo Google, il protocollo di misurazione è “un insieme standard di regole per la raccolta e l’invio di hit a Google Analytics da qualsiasi dispositivo connesso a Internet”.

Possiamo pensare al protocollo di misurazione come al codice sorgente di Google Analytics, in cui i dati vengono visualizzati nella loro forma grezza.

Questa forma grezza dei dati inizialmente può apparirti ostica, ma come vedremo non è altro che una query string con alcuni parametri allegati.

Detto questo, il modo migliore per avvicinarsi al protocollo di misurazione è di gran lunga con un esempio pratico.

Vai su https://enhancedecommerce.appspot.com/ (è un e-commerce demo di Google Analytics) e:

Apri la tab Network dell’estensione DevTools di Google Chrome
filtra per “v = 1”
Seleziona una delle hit di Google Analytics
Clicca sulla Tab Headers
Controlla i parametri

Come puoi vedere nello step 3, “collect?v=1&_v=j89…” è una query string con diversi parametri relativi alla Product Impression.

Vediamoli in dettaglio:

&il1nm=homepage                         // questo parametro sono i "Risultati di ricerca" o l’elenco
&il1pi1id=9bdd2                         // questo parametro è l'ID della Product Impression
&il1pi1nm=Compton%20T-Shirt             // questo parametro è il nome della Product Impression
&il1pi1pr=44.00                         // questo parametro è il prezzo della Product Impression
&il1pi1br=Compton                       // questo parametro è il marchio della Product Impression
&il1pi1ca=T-Shirt                       // questo parametro è la categoria della Product Impression

Noti qualche somiglianza con i parametri dell’E-commerce avanzato? Scommetto proprio di si!

Infatti questo elenco di parametri coincide con gli extraUrlParams che dobbiamo inserire nel JSON del componente amp-analytics.

(Qui trovi la guida ufficiale di Google a tutti i parametri EEC del protocollo di misurazione: https://developers.google.com/analytics/devguides/collection/protocol/v1/devguide#enhancedecom)

Consideriamo un altro esempio tratto dalla guida ufficiale di Google che ti ho appena linkato.

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

Ancora una volta, questo elenco di parametri coincide con gli extraUrlParams che dobbiamo inserire nel JSON del componente amp-analytics.

Stiamo facendo grossi passi avanti verso il nostro obiettivo di tracking! 😀

Il JSON finale con gli extraUrlparams

Ora possiamo costruire l’elenco degli extraUrlParams che devono essere inseriti nel JSON del componente amp-analytics.

Ecco il codice:

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

Come puoi vedere, c’è una corrispondenza tra i parametri del protocollo di misurazione e i parametri del dataLayer che abbiamo visto in precedenza.

Ecco una tabella di riepilogo che spero troverai utile:

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",

Come validare il JSON

Ora dobbiamo assicurarci che il nostro JSON funzioni senza problemi.

Per inviare tutte le azioni dell’ E-commerce avanzato con le request per Google Universal Analytics, ho realizzato un sito web di demo con il JSON del componente amp-analytics.

I parametri per l’impostazione dell’e-commerce avanzato sono contenuti in un Google Sheet denominato “AMP Google Analytics Enhanced E-commerce by Tag Manager Italia” che ha le seguenti colonne:

Tracking Type (contiene il tipo di azione dell’EEC)
Measurement Protocol (contiene il parametro del protocollo di misurazione in Google Universal Analytics)
Example of value (contiene il valore di esempio preso dalla guida ufficiale di Google tutti i parametri del protocollo di misurazione dell’EEC)
dataLayer push (contiene un esempio della request dataLayer completa per l’azione dell’EEC; ho usato il dataLayer perché mi trovo bene con GTM 😀)
JSON parameters (contiene i parametri che puoi copiare e incollare nel tuo JSON)
JSON per AMP (contiene la request JSON per AMP completa per l’azione di e-commerce)

Ovviamente, ho riempito il Google Sheet con TUTTI gli esempi delle azioni dell’E-commerce avanzato. 🙂

Puoi ottenere la tua copia GRATUITA del mio Google Sheet qui: https://docs.google.com/spreadsheets/d/1ZM229cUWLvHYcvnfm5xAIk1TBYijAL8i-YDcgTOSo7A/edit?usp=sharing

Come vedrai, nella colonna J (JSON per AMP) ho incluso il codice JSON completo da inserire nella pagina AMP.

Ecco come ci sono riuscito (e come puoi creare il tuo codice JSON):

Ho copiato il codice JSON per AMP per la visualizzazione di pagina con il parametro googleanalytics dalla sezione “Come tracciare le pagine AMP con Google Universal Analytics” di questa guida (puoi trovarla poco dopo l’inizio della guida)
Ho aggiunto la porzione di codice “extraUrlParams: { … }” al JSON per AMP e vi ho inserito l’elenco dei parametri JSON elencati nel Google Sheet
Ho copiato il JSON per AMP
Ho incollato il codice sul sito JSON Formatter & Validator (è gratuito!), ottenendo del codice validato e formattato

Ho incollato il codice validato e formattato nella colonna JSON per AMP del Google Sheet

Wow grande!

“Maaa… come posso testare questo codice? “

Vediamolo insieme.

Come testare il tracking dell’E-commerce avanzato sulle pagine AMP

Per testare le pagine AMP ho dovuto realizzare un sito web di demo con le pagine AMP. Per fare questo:

Ho creato un sito di demo con WordPress
Ho installato il plugin WooCommerce
Ho installato il plugin ufficiale AMP plugin for WordPress
Ho usato la Tab Network di Google Chrome DevTools (perché Tag Assistant Google Chrome Extension non avrebbe visto le hit 🙁)

Ho usato il GTM / GA Debug Google Chrome Extension di David Vallejo (Ciao David, spero di vederti presto!)

Perché ho utilizzato il plug-in AMP?

Perché ha una sezione analytics interessante dove puoi aggiungere tutto il codice JSON per AMP che devi testare.

Ovviamente puoi creare pagine HTML statiche se preferisci.

Procediamo con il test! 😀

Testare e debuggare l’E-commerce avanzato su pagine AMP con Google Universal Analytics

Il test dell’action “Promotion Impressions”

Step uno: apri il foglio Google “AMP Google Analytics Enhanced E-commerce by Tag Manager Italia“ e copia il codice che trovi nella colonna J, all’altezza delle righe Promotion Impressions

Step due:

apri la sezione Analytics del plug-in AMP
Inserisci googleanalytics nel campo Type
Incolla il codice JSON che hai copiato nella sezione JSON Configuration. (Importante: non dimenticare di sostituire l’ID di esempio (UA-1111111-1) con il tuo ID e presta attenzione al carattere delle virgolette doppie (utilizza il carattere “ perché il carattere “ o il carattere ” non funzionano)
Salva

In questo caso, gli extraUrlParams verranno inviati a ogni visualizzazione di pagina.

Step tre:

Apri la scheda Network sul tuo Chrome DevTools premendo Control + Shift + J o Command + Option + J (Mac). Si aprirà il pannello Console (ti consiglio di “ancorare” DevTools nella parte in basso del tuo browser). Clicca sulla Tab Network.
Vai alla pagina AMP. Per visualizzare la pagina AMP, è sufficiente aggiungere ?amp all’URL (http://demo.tagmanageritalia.it/esempio/?amp); in alternativa, utilizza l’estensione di Google Chrome AMP Validator per trovare l’URL AMP.

Trova le request di tipo google-analytics.com. Inserisci google-analytics.com nel filtro di ricerca (1), seleziona la request collect?v=1 (2) fai clic sulla Tab Headers (3) quindi scorri verso il basso: vedrai gli extraUrlParams dell’E-commerce avanzato (4).

Step quattro:

Ora dobbiamo utilizzare l’estensione Google Chrome GTM / GA: ti consente di trovare facilmente le hit dell’E-commerce avanzato.

Vediamo come si fa.

Seleziona la Tab Debug GTM / GA e ricarica la pagina. Ora seleziona la scheda GA.

Per visualizzare solo i parametri dell’E-commerce avanzato, è sufficiente fare clic sulla scheda EEC e… Bingo!

Ecco i parametri della promozione:

Yeah!

Ora diamo un’occhiata ad altre actions dell’E-commerce avanzato 🙂

La procedura è la stessa:

copia il JSON per AMP,
incollalo nella sezione AMP Analytics del Plugin
test ed esegui il debug con la Tab Network di DevTools oppure con l’estensione GTM / GA Google Chrome Extension

Ecco un breve video riassuntivo:

Il test dell’action “Promotion Clicks”

Copia il JSON per i clic di promozione AMP dal foglio Google e sostituisci la sezione AMP Analytics.

Attenzione: per tenere traccia delle azioni EEC basate sui click (ad es. Promotion Click, Add to Cart, Product Click e così via), NON utilizzare un trigger JSON di tipo pageview; usa invece un trigger JSON di tipo event, assicurandoti di impostare correttamente il selettore CSS.