Il progetto Accelerated Mobile Pages (AMP) è una piattaforma web open source che aiuta a migliorare le prestazioni dei tuoi contenuti web. AMP include il supporto integrato per il tag Google e Google Tag Manager. Questa guida descrive come configurare Google Analytics per le pagine AMP.
Installazione
Il tag Google ti consente di installare Google Analytics, Google Ads e altri prodotti Google nelle pagine AMP. Google Tag Manager imposta un contenitore AMP e ti offre la possibilità di creare configurazioni avanzate e implementare tag di terze parti dall'interfaccia di Tag Manager.
Seleziona la tua piattaforma preferita dai seguenti pulsanti:
Tag Google
L'implementazione di AMP di gtag.js utilizza il framework amp-analytics
per
dare la possibilità di integrare l'analisi sul sito web AMP. I dati possono essere inviati dalle pagine AMP a Google Ads, Google Analytics e altri prodotti Google dalla stessa implementazione di gtag.js.
Installazione
Per configurare il tag Google (gtag.js) su una pagina AMP, assicurati innanzitutto di aver
incluso il componente amp-analytics
nel tag <head>
della pagina:
<script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>
In seguito, aggiungi il tag Google alla tua pagina AMP come componente JSON all'interno del tag <body>
sulla pagina. Sostituisci <TARGET_ID>
con
l'ID tag dei prodotti (ad es. Google Ads e Google Analytics) a cui vuoi
inviare i dati:
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<TARGET_ID>",
"config" : {
"<TARGET_ID>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
Per configurare più prodotti nel tag Google, non è necessario installare
l'intero tag da quel prodotto. Devi solo aggiungere l'ID destinazione a un comando config
separato.
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<TAG_ID>",
"config" : {
"<TAG_ID>": { "groups": "default" },
<!-- Additional IDs -->
}
}
}
</script>
</amp-analytics>
Per saperne di più, consulta la documentazione di amp-analytics
.
Trigger di eventi
Per inviare dati specifici ai tuoi prodotti, configura gli attivatori in base a eventi
come i clic. Gli attivatori per gtag.js in AMP seguono gli stessi pattern JSON delle altre configurazioni degli attivatori di amp-analytics
.
Questo esempio mostra come inviare un evento click
a Google Analytics. Il valore selector
è un selettore CSS che consente di specificare l'elemento scelto come target. Il valore on
specifica il tipo di evento, che in questo caso è un
evento click
. Nella sezione vars
, specifica il tipo di evento in
event_name
e aggiungi ulteriori parametri, se necessario.
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
Oltre agli eventi consigliati, puoi specificare i tuoi eventi personalizzati.
Collega domini
Il linker domini consente di misurare come uno solo due o più siti correlati su domini separati. Per specificare i domini da collegare, utilizza "linker": { "domains": [...] }
:
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<TARGET_ID>",
"config" : {
"<TARGET_ID>": {
"groups": "default",
"linker": { "domains": ["example.com", "example2.com", "foo.example.com"] }
}
}
}
}
</script>
</amp-analytics>
La possibilità di collegarsi al tuo dominio canonico dalla cache AMP è attivata per impostazione predefinita. Per disattivare la possibilità di collegare il traffico dai domini, aggiungi "linker":
"false"
ai parametri config
:
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<TARGET_ID>",
"config" : {
"<TARGET_ID>": {
"groups": "default",
"linker": "false"
}
}
}
}
</script>
</amp-analytics>
Esempio completo
Questo esempio di codice illustra una demo funzionante completa di una pagina AMP che crea una singola pagina AMP e invia un evento button-click
a Google Analytics quando viene fatto clic sul pulsante. Sostituisci <TAG_ID>
con un
ID tag valido:
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="self.html" />
<title>AMP gtag demo</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<!-- Load AMP -->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Load amp-analytics -->
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>
<body>
<!-- Configure analytics to use gtag -->
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"gtag_id": "<TAG_ID>",
"config": {
"<TAG_ID>": {}
}
},
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
}
</script>
</amp-analytics>
<h1>Welcome to the mobile web</h1>
<div>
<button type="button" id="the-button">Example: Log in with Google</button>
</div>
</body>
</html>
Risolvere i problemi
Utilizza amptagtest.appspot.com per convalidare la configurazione dei tag oppure assicurati manualmente che il valore cid
sia coerente in tutti i domini procedendo nel seguente modo:
- Assicurati di cancellare i cookie o di utilizzare la modalità di navigazione in incognito.
- Se
cid
non viene trovato in un cookie di Google Analytics, puoi osservarlo anche nella scheda Rete del tuo browser web. Cercacollect request
e il payload deve contenere un valorecid
. Dopo il trasferimento dalla CDN di Google al sito web del client, i valori
cid
egclid
devono essere trasmessi tramite decorazione dell'URL:**_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**
La pagina di destinazione finale deve comunque avere lo stesso valore
cid
della pagina di destinazione iniziale.Fai attenzione ai reindirizzamenti e alle modifiche del dominio tra la pagina canonica e le pagine di destinazione non AMP.