Aggiungere Analytics alle pagine AMP

Accelerated Mobile Pages (AMP) è una piattaforma utilizzata per creare pagine web per contenuti statici che vengono visualizzati velocemente. AMP include un elemento <amp-analytics> che consente la misurazione delle interazioni degli utenti e 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 il tuo ID tag Google. Individua 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>. È sufficiente aggiungere 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 è stato attivato esplicitamente 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 di elementi <amp-analytics> è configurato per attivare il supporto per i prodotti di misurazione di Google. Imposta l'attributo type per <amp-analytics> su "gtag" (per attivare il supporto di gtag.js) e l'attributo data-credentials su "includi" (per attivare i cookie).

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

AMP non consente alcun codice JavaScript oltre alle sue librerie approvate, quindi la configurazione viene eseguita con JSON. Una proprietà gtag_id con un valore <GA_MEASUREMENT_ID> valido viene aggiunta al blocco vars, sotto al quale viene aggiunta una proprietà config con <GA_MEASUREMENT_ID>: {} come valore.

Misurare gli eventi

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

  • 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 ulteriori parametri.

Questo esempio mostra come configurare un evento di base di Google Analytics. Crea un attivatore denominato "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 specifica di Google Analytics solitamente utilizzata per creare report sulle campagne. Questi valori possono essere specificati nel blocco delle 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 saperne di più sulla configurazione del trigger, consulta la documentazione di amp-analytics.

Modifica parametri

Per eseguire l'override dei parametri predefiniti di Google Analytics o aggiungerne di nuovi, aggiungi i valori desiderati alla sezione parameter del blocco config. Questo esempio sostituisce i valori predefiniti delle visualizzazioni di pagina e degli eventi 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>

Il linker domini consente a due o più siti correlati in domini distinti di essere misurati come uno. Specifica i domini che devono essere collegati 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 con Google Analytics configurato, la funzionalità di collegamento al tuo dominio canonico dalla cache AMP è attivata per impostazione predefinita. Per disattivare la possibilità di Google Analytics di collegare il traffico dai domini, 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 parte del traffico del sito. Puoi modificare la frequenza di campionamento per 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 traffico non AMP

Per impostazione predefinita, il traffico AMP utilizza ID cliente diversi da quelli per il traffico web. Le pagine AMP si caricano più velocemente e mostrano pattern di traffico diversi rispetto alle controparti standard delle pagine web, il che spesso comporta metriche diverse per il traffico AMP e non AMP.

L'utilizzo di una proprietà separata per misurare il traffico AMP consente un'analisi migliore 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).
  • Utilizza 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 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 ed errore che aiutano a eseguire il debug e risolvere i problemi di una configurazione. Aggiungi #log=1 all'URL di una pagina per visualizzare i messaggi di errore registrati nella console del browser web.

Esempio completo

Questo esempio mostra una pagina AMP completa con un singolo pulsante su una pagina. Questa configurazione invierà i dati delle visualizzazioni di pagina standard e gli eventi "clic sul pulsante" 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>