MICHELEPISANI.IT
 

Tracciamento di app ibride senza plugin

Integrare Google Analytics in Ionic senza utilizzare il Plugin

Integrare Google Analytics in Ionic senza utilizzare il plugin
Novembre 05
07:572016

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 (http:// 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.

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele

Ciao Antonio,
ma il tuo apk si chiama 'HelloWorld-release-unsigned.apk'?

Antonio

Grazie michele per la velocità con cui hai risposto, comunque ho seguito la tua guida passo per …

Michele

Ciao Antonio,
probabilmente stai utilizzando un'opzione non prevista per jarsigner e la …

Antonio

Ricevo questo errore da cosa dipende? Illegal option\: …