Come configurare Analytics per le tue pagine AMP

Come configurare Analytics per le tue pagine AMP

Scritto il

Quale che sia il tuo progetto online hai bisogno di “misurare” le prestazioni del tuo sito web in termini di numeri, in altre parole, hai bisogno di sapere le statistiche di traffico, ovvero, quanti utenti visitano quotidianamente/ mensilmente il mio sito web ?

MONITORA IL TUO TRAFFICO SU AMP

Per fare tutto ciò lo strumento “principe” è sempre un prodotto di “casa Google”: Analytics.

Recentemente un problema che si sono posti molti gestori di siti internet e sviluppatori è stato quello di integrare e verificare il “tracciamento” di Analytics anche all’interno delle nuove pagine Accelerated Pagine Mobile (AMP).

Queste ultime, in un traffico web sempre più mobile, stanno facendo la parte del leone offrendo all’utente una velocità ed un’esperienza di navigazione fino ad oggi ignota.

LE SOLUZIONI

È possibile scegliere di utilizzare una soluzione come “amp-pixelche si comporta come un semplice pixel di tracciamento. In questo caso, viene utilizzato un unico URL che permette le sostituzioni di variabili, facendo si che sia molto personalizzabile. Ecco di seguito un link dove è possibile consultare tutta la documentazione amp-pixel ed avere maggiori dettagli.

La seconda soluzione è quella di utilizzare il componente amp-analytics che, come riporta il Blog ufficiale di Google, è una “potente soluzione che riconosce molti tipi di  “trigger events” per aiutarti a raccogliere metriche specifiche“.

Per utilizzare amp-analisi, è necessario, prima di tutto, includere la libreria dei componenti nel documento all’interno del tag <head>:

<script async custom-element="amp-analytics"

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

Come secondo passaggio includere il componente come segue (per questi esempi, assicurarsi di specificare il proprio account invece del segnaposto):

<amp-analytics type="googleanalytics">

<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y" 
  },
  "triggers": {
    "defaultPageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    }
  }
}
</script>
</amp-analytics>

Il formato JSON è super flessibile per descrivere diversi tipi di eventi e non include alcun codice JavaScript che potrebbe potenzialmente portare ad errori.

Ampliando l’esempio precedente, possiamo aggiungere un altro trigger, clickOnHeader:

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "defaultPageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    },
    "clickOnHeader": {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "examples",
        "eventAction": "clicked-header"
      }
    }
  }
}
</script>
</amp-analytics>

Per una descrizione dettagliata ed esaustiva consultare questo link: amp-analytics documentation.

Qui è invece possibile visualizzare alcuni esempi: Amp By Example site.

Visita qui la pagina del progetto AMP, AMP Project roadmap, e rimani aggiornato sulle ultime novità di questa potente e promettente tecnologia.