Google utilizza la tecnologia AI per tradurre i contenuti nella tua lingua preferita. Le traduzioni generate dall'AI potrebbero contenere errori.

Impostazione dei tag per AMP

Il progetto Accelerated Mobile Pages (AMP) è una piattaforma web open source che contribuisce a migliorare il rendimento dei 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 sulle pagine AMP. Google Tag Manager configura 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 piattaforma che preferisci dai seguenti pulsanti:

Tag Google

L'implementazione AMP di gtag.js utilizza il amp-analytics framework per consentirti di instrumentare Analytics sul tuo 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 gtag.js in una pagina AMP, assicurati innanzitutto di aver incluso il amp-analytics componente all'interno del <head> tag della pagina:

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

Aggiungi quindi il tag Google alla pagina AMP come componente JSON all'interno del <body> tag della pagina. Sostituisci <TARGET_ID> con l' ID tag dei prodotti (ad es. Google Ads, 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 devi installare l'intero tag del prodotto. Devi solo aggiungere l'ID di 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 amp-analytics documentazione.

Trigger evento

Per inviare dati specifici ai tuoi prodotti, configura i trigger in base a eventi come i clic. I trigger per gtag.js in AMP seguono gli stessi pattern JSON di altre amp-analytics configurazioni di trigger.

Questo esempio mostra come inviare un evento click a Google Analytics. Il valore selector è un selettore CSS che ti consente di specificare l'elemento di destinazione. 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 altri 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.

Inviare dimensioni e parametri personalizzati con Google Analytics

Per inviare dimensioni e metriche personalizzate a Google Analytics dalle pagine AMP utilizzando gtag.js, puoi sfruttare la extraUrlParams proprietà all'interno delle configurazioni dei trigger nel JSON <amp-analytics>. I parametri personalizzati in Google Analytics vengono inviati come parametri evento.

Utilizza il prefisso ep. per i parametri evento con valori stringa.
Utilizza il prefisso epn. per i parametri evento con valori numerici.

Prima di inviare, assicurati che queste dimensioni e metriche personalizzate siano registrate nella tua proprietà Google Analytics.

Esempio: parametri personalizzati con visualizzazione di pagina

Questa configurazione invia una dimensione personalizzata my_custom_dimension e una metrica personalizzata my_page_score con la visualizzazione di pagina iniziale:

<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXX",
    "config": {
      "G-XXXXXX": { "groups": "default" }
    }
  },
  "triggers": {
    "pageview": {
      "on": "visible",
      "request": "pageview",
      "extraUrlParams": {
        "ep.my_custom_dimension": "value1",
        "epn.my_page_score": 95
      }
    }
  }
}
</script>
</amp-analytics>

Esempio: parametri personalizzati con un evento di clic

Questa configurazione invia parametri personalizzati quando viene fatto clic su un elemento con l'ID myButton:

<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXX",
    "config": {
      "G-XXXXXX": { "groups": "default" }
    }
  },
  "triggers": {
    "pageview": {
      "on": "visible",
      "request": "pageview"
    },
    "trackButtonClick": {
      "on": "click",
      "selector": "#myButton",
      "request": "event",
      "vars": {
        "event_name": "button_click",
        "event_category": "Interactive"
      },
      "extraUrlParams": {
        "ep.button_id": "myButton",
        "ep.custom_info": "MoreDetails"
      }
    }
  }
}
</script>
</amp-analytics>

Domini link

Il linker domini consente di misurare due o più siti correlati su domini separati come se fossero un unico sito. 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 creare link al tuo dominio canonico dalla cache AMP è attiva per impostazione predefinita. Per disattivare la possibilità di collegare il traffico dei 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>

Risoluzione dei problemi

Utilizza validator.amp.dev per convalidare la configurazione del tagging oppure puoi assicurarti manualmente che il valore cid sia coerente tra 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, può essere osservato anche nella scheda Rete del browser web. Cerca collect request e il payload dovrebbe contenere un valore cid.
Una volta passato dalla CDN di Google al sito web del cliente, i valori cid e gclid devono essere trasmessi utilizzando la decorazione dell'URL:
```
**_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**
```
La pagina di destinazione finale deve 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.

Impostazione dei tag per AMP Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Installazione

Tag Google

Installazione

Trigger evento

Inviare dimensioni e parametri personalizzati con Google Analytics

Esempio: parametri personalizzati con visualizzazione di pagina

Esempio: parametri personalizzati con un evento di clic

Domini link

Esempio completo

Risoluzione dei problemi

Impostazione dei tag per AMP