Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Impostazione dei tag per AMP

Il progetto Accelerated Mobile Pages (AMP) è una piattaforma web open source che contribuisce a migliorare il rendimento 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 sulle pagine AMP. Google Tag Manager configura un contenitore AMP e ti consente 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 AMP di gtag.js utilizza il framework amp-analytics 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 su una pagina AMP, assicurati innanzitutto di aver incluso il componente amp-analytics all'interno del tag <head> nella pagina:

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

Successivamente, 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 del 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 relativa a amp-analytics.

Trigger evento

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 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 parametri aggiuntivi, 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 proprietà extraUrlParams all'interno delle configurazioni dei trigger nel file 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 dell'invio, 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 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 funzionalità di collegamento al 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>

Esempio completo

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 validator.amp.dev per convalidare la configurazione del tagging oppure puoi assicurarti manualmente che il valore di 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 deve contenere un valore cid.
Una volta passato dalla CDN di Google al sito web del cliente, il valore di cid e gclid deve essere trasmesso 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 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