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.

The use cases of AMP pages

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:

amp search engine result page

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:

amp analytics example

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

 

AMP type attribute vendors - a google list

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

homer simpson doh

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

homer simpson woo hoo

 

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:

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

understand the google universal analytics measurement protocol

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 a 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. 🙂

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

 

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

 

json formatter and validator

 

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 usato il GTM / GA Debug Google Chrome Extension di David Vallejo (Ciao David, spero di vederti presto!)

amp plugin for wordpress

 

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.

amp plugin for wordpress - analytics section

 

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

Google Sheet AMP Google Analytics Enhanced E-commerce by Tag Manager Italia - 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

JSON AMP enhanced ecommerce Google Universal Analytics - promotion impressions

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

debug promotion impressions AMP enhanced ecommerce google analytics

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.

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

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

Ecco i parametri della promozione:

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

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.

 

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

 

Il test dell’azione “Product Impressions” dell’EEC

Utilizza la stessa procedura del test precedente:

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

Il test dell’azione “Product Clicks” dell’EEC

Utilizza la stessa procedura del test precedente:

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.

 

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

 

Il test dell’azione “Product Details” dell’EEC

Utilizza la stessa procedura del test precedente:

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

 

Il test dell’azione “Add to Cart” dell’EEC

Utilizza la stessa procedura del test precedente:

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.

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

 

Il test dell’azione “Remove from Cart” dell’EEC

Utilizza la stessa procedura del test precedente:

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.

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

 

Il test dell’azione “Checkout Step 1” dell’EEC

Utilizza la stessa procedura del test precedente:

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

 

Il test dell’azione “Purchase” dell’EEC

Utilizza la stessa procedura del test precedente:

debug purchase enhanced ecommerce google analytics with GTM-GA EEC

Il test dell’azione “Refund” dell’EEC

Utilizza la stessa procedura del test precedente:

debug refund enhanced ecommerce google analytics with GTM-GA EEC

Conclusioni

Come abbiamo visto, è possibile inviare dati relativi all’ E-commerce avanzato a Google Universal Analytics dalle pagine AMP.

Il trucco sta nel comprendere il protocollo di misurazione di GA e quindi utilizzare i parametri extraUrlParams dell’oggetto di configurazione.

Grazie al mio Google Sheet con tutti gli esempi, ora puoi farlo senza troppe difficoltà 😀

Ora non hai più scuse! Puoi monitorare l’e-commerce avanzato sulle pagine AMP! 🙂

Ma… come faccio a farlo con Google Analytics 4?

Eh, mi sono posto la tua stessa domanda …

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

Siccome GA4 funziona sulla libreria gtag.js… la soluzione è usare gtag AMP analytics…

…giusto?

Purtroppo no. 🙁

Il valore gtag per l’attributo type AMP-analytics non supporta GA4 (non è la stessa libreria JavaScript).

Peccato! 

Ma allora come possiamo inviare delle hit a GA4?

Vuoi conoscere il #barbatrucco per GA4?

Ho trovato uno speciale #barbatrucco che mi permette di monitorare l’E-commerce di Google Analytics 4 sulle pagine AMP. 

Vuoi un articolo su questo argomento?

Fammi sapere nei commenti qui sotto!

 

Condividi anche tu Google Tag Manager!

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.