Questa pagina è stata tradotta dall'API Cloud Translation.

Aggiungere Analytics alle pagine AMP

Accelerated Mobile Pages (AMP) è una piattaforma utilizzata per creare pagine web che mostrano contenuti statici e di velocità. AMP include un elemento <amp-analytics> che consente di misurare le interazioni degli utenti e include il supporto integrato per Google Analytics.

Configurazione di base per misurare le visualizzazioni di pagina

Per creare un'installazione di base di Google Analytics su una pagina AMP, copia questo snippet di codice e sostituisci <GA_MEASUREMENT_ID> con l'ID tag Google. Trova l'ID tag Google.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

Invio di dati a più destinazioni

Puoi inviare dati a più destinazioni con lo stesso tag <amp-analytics>, aggiungendo semplicemente il nuovo ID misurazione <GA_MEASUREMENT_ID_NEW> al comando config.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" },
      "<GA_MEASUREMENT_ID_NEW>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

Come funziona

L'elemento <amp-analytics> è un componente AMP esteso ed è esplicitamente attivato come custom-element in un tag script.

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

Il blocco elemento <amp-analytics> è configurato per attivare il supporto per i prodotti di misurazione di Google. Imposta l'attributo type per <amp-analytics> su "gtag" (per abilitare il supporto di gtag.js) e l'attributo data-credentials su "include" (per abilitare i cookie).

<amp-analytics type="gtag" data-credentials="include">
  ...
</amp-analytics>

AMP non consente alcun codice JavaScript oltre le proprie librerie approvate, pertanto la configurazione viene eseguita invece con JSON. Una proprietà gtag_id con <GA_MEASUREMENT_ID> valida viene aggiunta al blocco vars, mentre al di sotto viene aggiunta una proprietà di configurazione con <GA_MEASUREMENT_ID>: {}.

Misurare gli eventi

Utilizza triggers con valori definiti per misurare gli eventi nelle pagine AMP. Queste proprietà vengono utilizzate in una configurazione dell'attivatore:

selector: un selettore CSS per specificare un elemento target.
on: specifica il tipo di evento.
vars: specifica il tipo di evento in event_name e, se necessario, aggiungi altri parametri.

Questo esempio mostra come configurare un evento Google Analytics di base. Crea un attivatore chiamato "button" che si attiva quando viene fatto clic su un elemento con valore ID "the-button". Questo attivatore invierà un valore event_name di "login" e un valore method di "Google" a Google Analytics:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
         "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#the-button",
          "on": "click",
          "vars": {
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Gli eventi di Google Analytics sono una categoria di eventi specifici per Google Analytics che vengono comunemente utilizzati per creare report sulle campagne. Questi valori possono essere specificati nel blocco vars con i parametri event_category, event_label e value:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
          "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#login",
          "on": "click",
          "vars": { 
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Consulta la documentazione di amp-analytics per scoprire di più sulla configurazione dei trigger.

Modificare i parametri

Per eseguire l'override dei parametri predefiniti di Google Analytics o aggiungerne di nuovi, aggiungi i valori che preferisci alla sezione parameter del blocco config. In questo esempio vengono sostituiti i valori predefiniti di visualizzazione di pagina ed evento per page_title e page_location:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "page_title": "Beethoven symphonies",
        "page_location": "https://www.example.com/beethoven.html"
      }
    }
  }
}
</script>
</amp-analytics>

Domini link

Il linker dei domini consente di misurare due o più siti correlati in domini separati come un unico sito. Specifica i domini da collegare alla proprietà "linker": { "domains": [...] }:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": { "domains": ["example.com", "example2.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

Nelle pagine AMP in cui è configurato Google Analytics, la funzionalità per collegarsi al tuo dominio canonico dalla cache AMP è attivata per impostazione predefinita. Per disattivare la possibilità di Google Analytics di collegare il traffico del dominio, aggiungi "linker": "false" ai parametri di configurazione:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

Velocità del sito per Universal Analytics

Google Analytics è configurato per raccogliere automaticamente i dati sulla velocità del sito per una piccola frazione del traffico del tuo sito. Puoi modificare la frequenza di campionamento in modo da raccogliere più o meno dati. Per impostare la frequenza di campionamento su 100%, aggiungi il codice evidenziato alla configurazione:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 100
      }
    }
  }
}
</script>
</amp-analytics>

Per interrompere la raccolta dei dati sulla velocità del sito, utilizza il codice evidenziato:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 0
      }
    }
  }
}
</script>
</amp-analytics>

Confronto tra traffico AMP e non AMP

Per impostazione predefinita, il traffico AMP utilizza ID client diversi da quelli per il traffico web. Le pagine AMP si caricano più velocemente e mostrano pattern di traffico diversi rispetto alle rispettive controparti web standard, il che può spesso significare che riceverai metriche diverse tra il traffico AMP e non AMP.

L'utilizzo di una proprietà separata per misurare il traffico AMP consente di migliorare l'analisi delle metriche e un quadro più preciso del traffico. Per distinguere il traffico AMP da quello non AMP se devi utilizzare una singola proprietà:

Utilizza la dimensione origine dati o una dimensione personalizzata (Universal Analytics).
Utilizzi un parametro evento personalizzato (Google Analytics 4).

Esegui il debug della configurazione

Lo Strumento di convalida AMP può essere utilizzato per identificare se una pagina web non soddisfa le specifiche HTML AMP. Aggiungi #development=1 all'URL di una pagina per attivare lo strumento di convalida.

L'estensione amp-analytics fornisce messaggi di avviso e di errore per semplificare il debug e la risoluzione dei problemi di una configurazione. Aggiungi #log=1 all'URL di una pagina per visualizzare i messaggi di errore registrati nella console del tuo browser web.

Completa l'esempio

Questo esempio mostra una pagina AMP completa con un singolo pulsante su una pagina. Questa configurazione invia i dati standard delle visualizzazioni di pagina e gli eventi "click-button" a Google Analytics:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="self.html" />
    <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": "<GA_MEASUREMENT_ID>",
            "config": {
              "<GA_MEASUREMENT_ID>": { "groups": "default" }
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Make it so.</h1>
    <div>
      <button type="button" id="the-button">Engage!</button>
    </div>
  </body>
</html>

Risorse correlate

AMP: progetto AMP
AMP: Che cos'è AMP?
AMP: amp-analytics
gtag.js: Utilizzare gtag.js con AMP
Centro assistenza Universal Analytics: Accelerated Mobile Pages (AMP)
Centro assistenza Google Analytics 4: Accelerated Mobile Pages (AMP)