Questa pagina è stata tradotta dall'API Cloud Translation.

Aggiungere Analytics alle pagine AMP

Accelerated Mobile Pages (AMP) è una piattaforma utilizzata per creare pagine web per contenuti statici dal rendering rapido. AMP include un elemento <amp-analytics> che consente la misurazione delle interazioni degli utenti e dispone del supporto integrato per Google Analytics.

Configurazione di base per misurare le visualizzazioni di pagina

Per creare un'installazione di base di Google Analytics in una pagina AMP, copia questo snippet di codice e sostituisci <GA_MEASUREMENT_ID> con l'ID proprietà che vuoi utilizzare. Trova il tuo ID Google Analytics.

<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>

Come funziona

L'elemento <amp-analytics> è un componente AMP esteso ed è esplicitamente abilitato 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 "quot";gtag" (per attivare il supporto di gtag.js) e l'attributo data-credentials su "quot";include" (per attivare i cookie).

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

AMP non consente l'utilizzo di JavaScript oltre alle librerie approvate, quindi la configurazione viene eseguita con JSON. Una proprietà gtag_id con <GA_MEASUREMENT_ID> valida viene aggiunta al blocco vars e al di sotto di una proprietà config con <GA_MEASUREMENT_ID>: {} viene aggiunto il valore.

Misurare gli eventi

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

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

Questo esempio mostra come configurare un evento di base di Google Analytics. Crea un attivatore chiamato "pulsante" che si attiva quando viene selezionato un elemento con valore ID "pulsante". 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 di Google Analytics che vengono comunemente utilizzati per creare report sulle campagne. Questi valori possono essere specificati nel blocco di variabili 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>

Per scoprire di più sulla configurazione dei trigger, consulta la documentazione di amp-analytics.

Modifica parametri

Per eseguire l'override dei parametri predefiniti di Google Analytics o aggiungere nuovi parametri, aggiungi i valori desiderati alla sezione parameter del blocco config. Questo esempio sostituisce 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 domini consente di misurare due o più siti correlati su domini separati come un unico sito. Specifica i domini da collegare con la 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 dominio canonico dalla cache AMP è attivata per impostazione predefinita. Per disattivare la funzionalità di Google Analytics per 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

Google Analytics è configurato per raccogliere automaticamente i dati sulla velocità del sito per una piccola parte del traffico del sito. Puoi modificare la frequenza di campionamento in modo da raccogliere più o meno dati. Per impostare la frequenza di campionamento al 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>

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 saranno presenti metriche diverse tra il traffico AMP e non AMP.

L'utilizzo di una proprietà separata per misurare il traffico AMP consente una migliore analisi delle metriche e un quadro più accurato del tuo traffico. Se devi utilizzare una singola proprietà per misurare il traffico AMP e non AMP, utilizza la dimensione origine dati o una dimensione personalizzata per distinguerli.

Per impostazione predefinita, Google Analytics invia il valore "AMP" tramite la dimensione origine dati. Utilizza questo valore per segmentare, filtrare o analizzare in altro modo i contenuti AMP e non AMP in una singola visualizzazione.

Eseguire il debug della configurazione

Lo Strumento di convalida AMP può essere utilizzato per capire se una pagina web non soddisfa la specifica 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 facilitare 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

In questo esempio viene mostrata una pagina AMP completa con un singolo pulsante su una pagina. Questa configurazione invierà i dati delle visualizzazioni di pagina standard e gli "clic-clic" 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 Google Analytics: Accelerated Mobile Pages (AMP)