In questa pagina ti spiegherò come installare Google Analytics sulle pagine AMP.
Cose da sapere prima di inserire Google Analytics su AMP
Cosa sono le pagine AMP
Per chi non conoscesse l’argomento “pagine AMP”, ricordo che si tratta di un progetto di Google che promuove, all’interno dei nostri siti web, l’uso di pagine “speciali” capaci di un “caricamento praticamente istantaneo dei contenuti su mobile” come spiega Lorena Piai nel suo articolo sulle Accelerated Mobile Pages.
Le pagine AMP dal punto di vista del codice, sono simili alle pagine HTML ma hanno molte restrizioni ed elementi creati ad hoc proprio per facilitare il caricamento. Uno di questi elementi è appunto il tag <amp-analytics> che permette l’interfacciamento con Google Analytics.
I 3 tipi di componenti delle pagine AMP
Le pagine AMP sono costituite da tre tipi di elementi:
- Componenti “Built-in” (= di serie): componenti inclusi nella libreria base, come <amp-image> , <amp-video> , ecc
- Componenti “Extended”: estensioni della libreria base, che devono essere esplicitamente inclusi all’interno del tag <head> della pagina per poter essere utilizzati
- Componenti “Experimental”: componenti sperimentali che possiamo utilizzare ma dei quali se ne sconsiglia l’uso in produzione.
Come funziona il tag <amp-analytics>
Come detto, il tag <amp-analytics> ci permette di misurare l’attività nelle pagine AMP e di inviare questi dati a vari sistemi di tracciamento, tra i quali Google Analytics.
Questo tag è un componente “extended” e come tale dobbiamo includerlo nell’head della nostra pagina per poterlo utilizzare nella stessa.
COSA trasmettere e A CHI trasmettere viene definito all’interno del tag con una matrice di dati che si avvale della sintassi JSON (=JavaScript Object Notation), una sintassi di largo uso che moltissimi sistemi traccianti riescono a comprendere.
In sostanza, per installare Google Analytics nelle pagine AMP agiremo come segue:
<!doctype html>
<html amp>
<head>
<!-- includo il componente amp-analytics -->
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<!-- successivamente troverò la libreria base delle pagine amp -->
<script src="https://cdn.ampproject.org/v0.js" async></script>
</head>
<body>
...contenuto della pagina...
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-181166-8" // <<< A CHI INVIO I DATI
},
"triggers": { // <<< DATI CHE INVIO
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
</body>
</html>
Limiti di Analytics per le pagine AMP
Anche se Google promette che le capacità di tracciamento verranno estese, ad oggi Analytics per AMP permette di tracciare questi elementi:
- Page data: Domain, path, page title
- User data: client ID, timezone
- Browsing data: referrer, unique page view ID
- Browser data: screen height, screen width, user agent
- Interaction data: page height and page width
- Event data
In realtà questi elementi sono più che sufficienti per raccogliere tutta una serie di dati sulle attività che l’utente svolge sulla pagina.
Com’è strutturato un account di Google Analytics
Ultima cosa prima di procedere, ti farà comodo ricordare che un account di Google Analytics è strutturato in questa maniera:
- Account di Analytics: è il contenitore di tutti i tuoi progetti e corrisponde al tuo account Gmail.
- Account: è il contenitore del tuo progetto imprenditoriale e di altri progetti che segui per te stesso o per i tuoi clienti. Ogni progetto imprenditoriale dovrebbe avere il suo account, né più né meno!
- Proprietà: è una proprietà che fa parte del tuo progetto imprenditoriale. Ad esempio se vendi libri, potresti avere tre proprietà: un sito web, un blog su blogger, un’applicazione della tua libreria.
- Vista: la vista è un modo di vedere i dati di una proprietà. La vista creata di default da google Analytics preleva e mostra tutti i dati del tuo sito web, ma niente vieta che tu voglia creare delle viste “parziali” (dati di una sola sezione, dati senza spam, dati solo da motori di ricerca, ecc)
- Proprietà: è una proprietà che fa parte del tuo progetto imprenditoriale. Ad esempio se vendi libri, potresti avere tre proprietà: un sito web, un blog su blogger, un’applicazione della tua libreria.
- Account: è il contenitore del tuo progetto imprenditoriale e di altri progetti che segui per te stesso o per i tuoi clienti. Ogni progetto imprenditoriale dovrebbe avere il suo account, né più né meno!
Ora siamo pronti, si parte!
1 – Creazione della Proprietà in Google Analytics
Per questo passo si presume che tu abbia un Account Google Analytics e che tu stia già tracciando i dati del tuo sito entro un Account che porti il nome del tuo progetto imprenditoriale (ad esempio: “Mario Rossi S.n.c.”). In caso contrario clicca i link indicati e segui le istruzioni.
Siccome il tag <amp-analytics> non traccia le attività in maniera standard, sarebbe confusionario inviare i dati alla stessa Proprietà che usi per le pagine del tuo sito web.
Come anche consiglia Google (“Note: It is recommended that you set up and use a separate property for AMP measurement”), è quindi necessario creare una Proprietà a parte per le pagine AMP. Procederemo come segue:
- Loggati su Google Analytics
- Entra nell’Account del tuo progetto imprenditoriale
- Vai in Amministrazione
- Clicca sul menu a tendina Proprietà
- Clicca su Nuova Proprietà
Questo ci conduce a definire i parametri della nuova Proprietà:
- Nome sito web: “Pagine AMP” è una dicitura perfetta per ricordare lo scopo di questa proprietà
- URL del sito web: occorre inserire l’URL del sito web dove si trovano le pagine AMP (http:// www.marcopanichi.com/ nel mio caso)
- Categoria di settore: sceglierai quella più confacente al tuo settore
- Segnalazione fuso orario: il fuso orario è importante! Assicurati che sia lo stesso della Proprietà del tuo sito web al fine di avere dati allineati sugli stessi orari.
Una volta salvati questi dati, Google ci restituirà l’ID di monitoraggio, che dobbiamo conservare per svolgere i passi successivi.
2 – Implementazione di <amp-analytics> nelle tue Pagine AMP
Per compiere il prossimo passo si presuppone che tu abbia già implementato le pagine AMP sul tuo sito.
Quello che dovrai fare in questo passo è inserire alcuni codici nel “template” delle tue pagine AMP. Procediamo per punti.
Includi il componente <amp-analytics>
Come detto in precedenza, le Analytics per AMP sono un componente “Extended” e quindi deve essere esplicitamente incluso nel tag head della tua pagina prima di includere la libreria base di AMP (https://cdn.ampproject.org/v0.js).
<!doctype html> <html amp> <head> <!-- includo il componente amp-analytics --> <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> <!-- successivamente troverò la libreria base delle pagine amp --> <script src="https://cdn.ampproject.org/v0.js" async></script> </head> <body> ... </body> </html>
Invia i dati alla tua Proprietà su Google Analytics
Ora andiamo ad aggiungere il tag <amp-analytics> nel corpo della pagina prima di chiudere il tag </body>.
segue:
<!doctype html>
<html amp>
<head>
...
</head>
<body>
...contenuto della pagina...
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "<ID DI MONITORAGGIO>"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
</body>
</html>
Chiaramente avrai cura di sostituire la dicitura <ID DI MONITORAGGIO> con l’ID che abbiamo prima ottenuto da Google Analytics.
Fatto! Salva e procedi oltre.
3 – Verifica che tutto funzioni correttamente
I passi per installare Google Analytics sulle pagine AMP sono pochi e semplici, ma altrettanto semplice ed umano è commettere un errore.
In tal caso sappi che come afferma Google (“it’s likely that your page will not be seen in many places!”) le tue pagine AMP non compariranno da nessuna parte trasformando quindi un’opportunità in una grave perdita.
Non sia mai! Procediamo quindi ad una doverosa verifica.
Guarda la pagina AMP dal vivo
La prima, banale, ma fondamentale verifica è di recarsi all’URL di una pagina AMP per verificare con i propri occhi che tutto funzioni correttamente:
- Vai nel tuo sito da desktop
- Clicca su un articolo che ha versione AMP
- Sulla barra indirizzi, aggiungi la dicitura “amp” in fondo (dovresti ora vedere la versione AMP della pagina)
- Ripeti tutto da smartphone.
Valida le pagine AMP
Puoi validare le pagine AMP essenzialmente in tre modi (Developer Console del tuo browser; Validatore di pagine AMP di Google; con l’estensione per il tuo browser). Io ti consiglio questo approccio:
- Valida almeno 3 pagine con il Validatore per pagine AMP di Google; questo ti darà una risposta autorevole sulla validità dell’intervento che hai svolto. In caso di errore, il validatore ti offrirà indicazioni chiare ed utili per risolvere.
- Valida almeno 20 pagine a campione perché la sicurezza non è mai abbastanza quando si fanno questi interventi sistematici. Per effettuare una tale validazione in massa puoi sfruttare il Validatore di Merkle che ti permette di inserire molteplici URLs e di validarli tutti insieme.
Verifica che Google Analytics stia ricevendo dati
La prova del 9 per capire se abbiamo installato bene Google Analytics si può fare monitorando le statistiche in Tempo reale:
- Entra in Google Analytics > Account del tuo progetto > “Pagine AMP” > nome della Vista
- Clicca su “In tempo reale” > “Panoramica”
- Tenendo aperta questa scheda, visita una pagina AMP (come spiegato prima)
- In Analytics (punto 2), dovresti vedere 1 utente attivo sul tuo sito.
Approfondimenti sul Tracking nelle pagine AMP
L’argomento del tracciamento dell’attività dell’utente nelle pagine AMP si presta a tutta una serie di approfondimenti, che qui non affronteremo, ma che ti indico per completezza:
- Questione Cookies: Come forse saprai, occorre essere pronti ad avvisare l’utente che stiamo tracciando la sua attività nel nostro sito; dando questo per scontato, le cose si complicano non poco se non procediamo ad anonimizzare l’IP Address dell’utente. Mentre in Google Analytics per le pagine standard questo comportava l’aggiunta di una riga di codice, nelle pagine AMP non è più necessario poiché i dati inviati dalla pagine AMP sono sempre privati dell’IP Address, almeno stando a quanto dice Google (“Data from AMP documents is always IP anonymized”)
- Eventi tracciabili con <amp-analytics>: Come detto le capacità di tracciamento attività per le pagine AMP sono limitate ma al tempo stesso ci permettono tutta una serie di indagini. Per implementare tali indagini potrei rimandarti alla documentazione di Google, invece preferisco linkarti la documentazione con esempi di Amp by Example dove potrai trovare i codici giusti e anche vederli in azione!
- Analitiche serie per Publishers: Se hai un grande progetto in ballo vorrai certamente avere quanti più dati possibili per le tue valutazioni. In tal caso ti consiglio l’eccellente articolo di Allaedin Ezzedin che spiega come creare Metriche e Dimensioni customizzate in Google Analytics per tracciare Categorie, Tags, Autori, ecc.
- “Per quali parole chiave trovano le nostre pagine AMP?” ahhh che bella domanda, che buon profumo anni 2000. Come ben saprai non ci è più possibile risalire (in maniera diretta e completa) alle parole chiave che conducono alle nostre pagine web. Però in Google Search Console possiamo vedere per quali parole compariamo nei risultati di ricerca. Fortunatamente questa funzionalità è stata estesa anche alle pagine AMP.
- Installare Google Analytics su pagine AMP in WordPress: SE hai pagine AMP su WordPress è molto probabile che tu ti sia avvalso del plugin “base” offerto da Automattic. Se così fosse ti sarà necessario installare il plugin aggiuntivo per estendere quello base con la possibilità di inserire il codice tracciante. SE INVECE hai usato un plugin più avanzato forse hai già la possibilità di inserire il codice tracciante tramite comodo inserimento dell’ID di Monitoraggio nel tua Bacheca.