Aggiungere Analytics alle pagine AMP

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

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 è 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 attivare il supporto gtag.js) e l'attributo data-credentials su "include" (per attivare i cookie).

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

AMP non consente alcun codice JavaScript oltre alle proprie 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, al di sotto di 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 nella configurazione di un 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 aggiungi ulteriori parametri, se necessario.

Questo esempio mostra come configurare un evento di base di Google Analytics. Crea un attivatore denominato "button" che si attiva quando un elemento con un valore ID di "the-button" viene selezionato. 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 comunemente utilizzati 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 dei 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 di misurare come un unico sito a due o più siti correlati su domini distinti. 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à di collegamento al tuo dominio canonico dalla cache AMP è attivata per impostazione predefinita. Per impedire a Google Analytics di collegare il traffico nei 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. Potete modificare la frequenza di campionamento per raccogliere più o meno dati. Per impostare la frequenza di campionamento al 100%, aggiungi il codice evidenziato alla tua 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 client diversi da quelli per il traffico web. Le pagine AMP si caricano più velocemente e mostrano modelli di traffico diversi rispetto alle pagine web standard, il che spesso può comportare metriche diverse per il traffico AMP e quello non AMP.

L'utilizzo di una proprietà separata per misurare il traffico AMP consente di analizzare meglio le metriche e ottenere 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 verificare 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 che consentono di 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 standard delle visualizzazioni di pagina 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>