Integrare Google Analytics in Ionic senza utilizzare il Plugin

Ho scritto tempo fa un articolo su come INTEGRARE GOOGLE ANALYTICS IN IONIC PER IL TRACCIAMENTO DI APP IBRIDE, in tale articolo ho spiegato ed illustrato come farlo con il plugin cordova-pugin-google-analytics, tuttavia mi sono trovato in una situazione in cui questa funzionalità, o per conflitto con altri plugin o per mancato aggiornamento dello stesso, non effettuava i tracciamenti richiesti.
L'utilizzo del plugin, quando possibile, offre indiscussi vantaggi come ad esempio il tracciamento offline, la gestione delle risorse, la corretta integrazione con l'SDK nativo del dispositivo e metodi preimpostati tuttavia ho trovato un sistema alternativo, che ha i suoi limiti (mancanza di gestione offline, impostazione proprietà di tipo web anzichè app) ma che fa egregiamente il suo lavoro di tracciamento di schermate ed eventi.

Dato che scrivo solo di ciò che ho effettivamente testato, utilizzato e verificato, informo che l'implementazione oggetto di questo articolo l'ho effettuata nell'app: PISAN HILLS SURVIVAL, L'APP PER... SOPRAVVIVERE SUI MONTI PISANI

L'approccio a questo sistema prevede l'uso diretto della libreria analytics.js che, lavorando nativamente per il web ha bisogno lato app di essere gestita in modo che la chiamata vada a buon fine. Nel caso specifico mi riferisco al modo di aggirare il controllo sul protocollo (https:// o https://) che viene effettuato da Analytics e che è il motivo per il quale quando si esegue l'app da browser i tracciamenti funzionano mentre da app no, e il problema sta che tramite l'app il protocollo è file://.
Inoltre, con il fatto che dalla versione Android 5+ non vengono supportati i cookie di terze parti e sapendo che Google Analytics assegna un clientId (CID) all'utente tramite i cookie, nasce la necessità di bypassare questo inconveniente tramite il localStorage.

Il codice da aggiungere nel file index.html della nostra app ibrida è il seguente:

// includo la libreria nell'app
<script type=text/javascript" src="js/libs/analytics.js"></script>
​<script>
  ga('create', {
    // Disabilito i cookie
    storage: 'none',
​
    // Inserisco il mio trackind ID
    trackingId: 'UA-XXXXXX-XX',
​
    // Assegno il clientId salvato nello storage qualora ne esista uno
    clientId: localStorage.getItem('ga:clientId')
  });

  // gestisco la questione del protocollo​
  ga('set', 'checkProtocolTask', null);
  ga('set', 'transportUrl', 'https://www.google-analytics.com/collect');
​
  ga(function(tracker) {
    if ( !localStorage.getItem('ga:clientId') ) {
      // salvo nello storage l'id assegnato per i prossimi avvii dell'app
      localStorage.setItem( 'ga:clientId', tracker.get('clientId') );
    }
  });
​<script>

A questo punto è possibile inviare a Google Analytics pageview ed eventi semplicemente con il seguente codice (se la pagina dove lo stiamo implementando fa uso di HTML come nel caso specifico di index.hml in Ionic, oppure in generale nelle anche nelle altre pagine in caso di creazione di applicazioni ibride con Apache Cordova che non si basano su AngularJs):

<script>
  // pageview (schermata)
  ga('send', 'pageview', {'page': 'view-homepage', 'title': 'Titolo Homepage');

  // evento
  ga('send', 'event', 'Nome Categoria', 'Nome Azione', 'Nome Etichetta', Valore);
</script>

All'interno dei file di service (di tipo Javascript) passando l'oggetto $window è possibile inviare, ad esempio, un evento al click su un bottone che esegue una determinata operazione (nel caso specifico una ricerca interna all'app) inserendo il seguente codice all'interno della funzione:

// la variabile 'termini_cercati' rappresenta conterrà i termini immessi dall'utente
$window.ga('send', 'event', 'search', 'searched', termini_cercati);

Per fare in modo che le pageview e gli eventi vengano gestiti anche all'interno dei template è necessario assegnare la variabile globale ga al rootScope, pertanto all'interno del service inserirò la seguente dichiarazione:

$rootScope.ga = $window.ga;

In questo modo, da un template, posso inviare una pageview inserendo il seguente attributo in ion-modal-view:

<ion-modal-view ng-init="$root.ga('send', 'pageview', 'view-cerca');">

Oppure un evento al click sul bottone:

<button ng-click="$root.ga('send', 'event', 'button', 'clicked', 'cerca');"></button>

Da non dimenticare di aggiungere il seguente tag al file config.xml per permettere al codice di Analytics di effettuare la richiesta al server.

<access origin="https://*.google-analytics.com"/>

Per effettuare dei test potete usare il codice di debug di analytics: analytics_debug.js ma personalmente consiglio di crearvi una Vista di test all'interno della vostrà Proprietà e modificare conseguentemente il Tracking ID all'interno dell'app.