Configurazione dei tag per AMP

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Il progetto Accelerated Mobile Pages (AMP) è una piattaforma web open source che contribuisce a migliorare le prestazioni 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 nelle pagine AMP. Google Tag Manager imposta un contenitore AMP e ti offre la possibilità di creare configurazioni avanzate e di implementare tag di terze parti dall'interfaccia di Tag Manager.

Seleziona la tua piattaforma preferita tra i seguenti pulsanti:

Tag Google

L'implementazione di AMP di gtag.js utilizza il framework amp-analytics per consentirti di analizzare gli strumenti 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 il tag Google (gtag.js) in 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>

Dopodiché, aggiungi il tag Google alla tua pagina AMP come componente JSON all'interno del tag <body> nella 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 è 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.

Attivatori di eventi

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

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

"triggers": {
  "button": {
    "selector": "#the-button",
    "on": "click",
    "vars": {
      "event_name": "login",
      "method": "Google"
    }
  }
}

Oltre agli eventi consigliati, puoi specificare i tuoi eventi personalizzati.

Il linker domini consente di misurare due o più siti correlati su domini separati come uno solo. 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 funzionalità per il collegamento al tuo dominio canonico dalla cache AMP è attivata per impostazione predefinita. Per disattivare la possibilità di collegare il traffico del dominio, 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>

Completa esempio

Questo esempio di codice mostra 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 amptagtest.appspot.com per convalidare l'impostazione dei tag oppure puoi assicurarti manualmente che il valore cid sia coerente tra i domini seguendo questi passaggi:

  • 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ò anche essere osservato nella scheda Rete del browser web. Cerca collect request e il payload deve contenere un valore cid.

  • Una volta passati dalla CDN di Google al sito web del cliente, il valore cid e gclid devono essere passati tramite la 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 a reindirizzamenti e modifiche del dominio tra la pagina canonica e le pagine di destinazione non AMP.