Mar 06 2016

HelpSemaforoQuesto semaforo indica il livello difficoltà del post
semaforo giallo - articolo avanzato

modi nuovi per tracciare cose nuove

In verità una delle tre “cose nuove” è in giro da un po’ di tempo, ma soltanto ora Google mette a disposizione uno strumento nativo.
Autotrack.js è una libreria made in Google per il tracking dei cosiddetti siti monopagina, o applicazioni monopagina: quei siti che si risolvono tipicamente solo con uno scrolling o con ancore che fanno scrollare i contenuti.
Il post ufficiale ci informa che con una semplice modifica del codice di monitoraggio possiamo importare il plugin autotrack e iniziare a modificare il codice della pagina in modo che comunichi da sola le azioni dell’utente a GA. Le azioni che possono essere monitorate in modo semplice sono:

  • click su link esterni e compilazione di form
  • cambio di url su applicazioni monopagina (tipicamente con l’uso di #ancore alla fine dell’url)
  • eventi tracciati con la sola modifica dell’HTML della pagina
  • tracking delle media query e dei cambi, ad esempio se cambia l’orientation del device o viene stretta la finestra

Tutte queste operazioni sino ad ora non erano impossibili da tracciare, ma richiedevano comunque un effort discreto a seconda delle possibilità e delle tecnologie utilizzate. Avere una libreria ufficiale indubbiamente sarà di aiuto.

La seconda novità è il lancio ufficiale delle pagine AMP, introdotte in beta in autunno per farle conoscere ai publisher e adesso sdoganate da Google: si tratta di un progetto per rendere il caricamento degli articoli editoriali pressoché istantaneo sui dispositivi mobile, aumentando l’esperienza d’uso. Ora, come si tracciano queste pagine che hanno una struttura particolare e imposta da Google? per prima cosa va dichiarato dentro a un tag CHE COSA andremo a tracciare e DOVE invieremo i dati, attraverso una struttura di dati particolare. Questo funzionerebbe per qualsiasi richiesta di tracking per la quale si sa come costruire l’invio dei dati, ma ovviamente i maggiori vendor hanno collaborato con Google e quindi esistono delle sintassi “facilitate”: ad esempio alcuni nomi che troviamo sono Adobe, Chartbeat, comScore e ovviamente Google Analytics, la cui documentazione specifica è qui. Ad esempio, ecco uno script molto semplice per il track delle sole pageview


<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"  // Replace with your property ID.
  },
  "triggers": {
    "trackPageview": {  // Trigger names can be any string. trackPageview is not a required name.
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

Aggiungere eventi significa dichiarare a priori che un click su un certo elemento dovrà essere trattato come tale, con quale categoria vada tracciato e con quale action; idem per le interazioni sociali o altri elementi. A seconda quindi del numero di interazioni possibili lo script potrebbe essere anche lunghetto da gestire, ma di contro il numero di diverse azioni possibili su una pagina AMP non è così elevato. Si possono comunque prevedere tracking aggiuntivi lavorando un po’ con i dev, ad esempio vi suggerisco di leggere questo post di E-nor.

Terza novità di questi giorni sono gli instant articles di Facebook, lo stesso concetto delle pagine AMP ma calate nel contesto di Facebook, ovvero leggere il contenuto senza abbandonare l’esperienza utente di FB. Anche in questo caso, il tema di come tracciarli è trattato in un capitolo apposito della documentazione, e non richiede modifiche pesanti alla pagina perché il tutto viene incluso con un iframe. In questo caso quindi si può utilizzare un TagManager senza grossi problemi, almeno sulla carta. L’instant article viene in ogni caso trattato come una pagina del vostro sito aperta tramite il browser interno dell’applicazione di Facebook.

E’ un mondo che cambia in fretta, bisogna sapersi adattare in fretta 🙂

Condividi l'articolo:

5 Commenti

  1. Caro Marco, ho inserito il codice analytics negli instant article e le sessioni vengono correttamente registrate, però, come dice anche la documentazione di Fb vengono interpretate come traffico diretto. Come posso tracciarle in modo da identificarle come instant article? Devo apportare delle modifiche allo script di Analytics che inserisco? Grazie mille

  2. non ho capito, vorresti che quelle visite fossero conteggiate come una sorgente “instant article”?
    Nel caso credo dovresti usare le funzioni set campaign name, source e medium
    https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#campaignName

  3. Ciao Marco, sì intendevo proprio quello che hai scritto tu. Sto provando con questo:

    (function (i,s,o,g,r,a,m) {i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function () {(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,’script’,’//www.google- analytics.com/analytics.js’,’ga’);
    ga(‘create’, ‘ANALYTICS ID’, ‘auto’);
    ga(‘require’, ‘displayfeatures’);
    ga(‘set’, ‘campaignSource’, ‘Facebook’);
    ga(‘set’, ‘campaignMedium’, ‘Social Instant Article’);
    ga(‘send’, ‘pageview’, {title: ‘POST TITLE’});

    La sorgente e il titolo dell’instant article vengono lette correttamente da Analytics, ma il mezzo non viene indicato. Proverò ancora.

    Grazie

  4. strano, dovrebbe funzionare come previsto

  5. Funziona! Volevo solo aggiornare la discussione dicendo che analizzando il codice con dei colleghi abbiamo capito il problema. Come spesso accade il problema è più banale del previsto: mancava l’https prima di //www.google- analytics.com/analytics.js!!! In generale tutta la prima parte di questo codice era un pò disordinata, per cui consiglio a tutti di prendere il codice analytics originale e di aggiungere solo la parte finale:

    ga(‘require’, ‘displayfeatures’);
    ga(‘set’, ‘campaignSource’, ‘FacebookInstant’);
    ga(‘set’, ‘campaignMedium’, ‘Social Instant Article’);
    ga(‘send’, ‘pageview’, {title:’Article title’});

    Evviva!

Scrivi un Commento