Come è noto Google Analytics mette a disposizione linee guida per l'integrazione del suo servizio di tracciamento all'interno di app native Android e iOS, ma cosa fare nel caso in cui la nostra app sia di tipo ibrido, nel caso specifico utilizzando il framework Ionic che si avvale di AngularJS? Niente di particolarmente complesso, vi basterà seguire questo articolo illustrato per integrare Google Analytics nel vostro progetto Ionic e potrete monitorare le attività che gli utenti svolgono nella vostra app con i conseguenti vantaggi che lo studio di tali interazioni vi porterà.
Prenderò come esempio il tracciamento di un'app ibrida per Android considerando che lo stesso peocedimento è valido anche per app ibride che dovranno girare su dispositivi con sistema operativo iOS tra i quali iPhone e iPad.
Inutile dire che come prerequisiti serve che Ionic/Cordova sia installato sulla propria macchina così come l'ambiente di sviluppo di Android e/o di iOS (quest'ultimo su Mac) e che esista un progetto Ionic (un'app) su cui lavorare.
Trovate tutte le informazioni che fanno al caso vostro nella mia guida "COME CREARE UN'APP IBRIDA CON IONIC IN 3 SEMPLICI PASSAGGI".
Con l'ambiente di sviluppo configurato e un progetto Ionic esistente è il momento di iniziare a pensare a come integrarvi Google Analytics.
Per prima cosa è necessario disporre di un account su Google Analytics (potete accedere al servizio o creare un account dal sito ufficiale di Google Analytics) e creare una nuova proprietà verso la quale inviare le interazioni che vengono effettuate all'interno della nostra app (ad esempio le schermate visualizzate dagli utenti nelle loro sessioni).
Per farlo dovrete accedere al pannello di Analytics, cliccare su AMMINISTRAZIONE e nel menù a tendina relativo alla PROPRIETA' cliccare su "Crea nuova proprietà".
Riempire i campi richiesti (ovvero cosa si intende monitorare, il metodo di monitoraggio, il nome dell'app, la categoria di appartenenza ed il fuso orario) dopodichè cliccare su "Ottieni l'ID di monitoraggio", come mostrato nell'immagine seguente (Fig. 1):
Fig. 1 - Ionic e Google Analytics - Creazione di una nuova proprietà per app ibride
Verrà fornito a questo punto un codice di monitoraggio il cui ID di tracciamento ha un formato simile al seguente: UA-XXXXXXX-XX
Le X rappresentano caratteri numerici.
Terminate le operazioni di configurazione lato Google Analytics passiamo all'implementazione all'interno della nostra app.
Da Terminale (CLI), spostandosi all'interno della cartella del nostro progetto ed aggiungere il plugin cordova-plugin-google-analytics al progetto in questione (per la connessiona ad Universal Analytics SDK) lanciando il seguente comando:
ionic plugin add cordova-plugin-google-analyticsDopo alcuni secondi il plugin sarà installato.
Per maggiori informazioni sul plugin in questione fare riferimento a: https://github.com/danwilson/google-analytics-plugin
Sarà ora necessario aggiungere una porzione di codice al file app.js del nostro progetto, all'interno di $ionicPlatform.ready, al fine di dichiarare l'ID di monitoraggio della proprietà tramite il comando startTrackerWithId:
if (typeof analytics !== 'undefined') {
analytics.startTrackerWithId("UA-XXXXXXX-XX");
} else {
console.log("Il plugin di Google Analytics non può essere caricato.");
}L'immagine seguente (Fig. 2) è autoesplicativa:
Fig. 2 - Ionic e Google Analytics - Inizializzazione dell'ID di monitoraggio tramite startTrackerWithId
L'ID da inserire sarà ovviamente quello ottenuto in precedenza su Google Analytics dopo la creazione della nuova proprietà.
A questo punto è possibile andare ad inserire all'interno della nostra app tutti i tracciamenti che riteniamo più opportuni.
Nel caso specifico mostrerò come tracciare le schermate visualizzate dagli utenti. Per farlo basterà avvalersi di una sola riga di codice (oltre alla condizione di presenza di analytics, come visto nel codice precedente, per evitare eventuali blocchi dell'app nel caso si incorresse in un problema di caricamento della risorsa) da inserire all'interno di ciascun controller di pagina:
if (typeof analytics !== 'undefined') {
analytics.trackView("nome_schermata");
}L'immagine seguente (Fig. 3) mostra come ho inserito il codice di tracciamento per la visualizzazione della pagina di login (la stessa operazione, modificando il parametro relativo al nome di pagina, l'ho ripetuta all'interno di ciascun controller per tutte le altre schermate dell'app):
Fig. 3 - Ionic e Google Analytics - Tracciamento di schermate tramite trackView
Dopo aver salvato e compilato sarà possibile visualizzare il risultato delle interazioni dal pannello di Google Analytics sotto al menù REPORT all'interno della voce "In tempo reale" --> "Schermate", come mostrato nell'immagine seguente (Fig. 4):
Fig. 4 - Ionic e Google Analytics - Visualizzazione REPORT in tempo reale relativo alle Schermate
Ovviamente è necessario che il dispositivo sia connesso ad internet affinchè gli hit vengano inviati ad Analytics.
Faccio presente che in assenza di connessione gli hit rimangono in attesa di essere inviati appena la rete tornerà a funzionare, inoltre, per una questione di conservazione di risorse, l'invio degli hit può non essere immediato pertanto nonostante il report sia "in tempo reale" possono essere necessari alcuni secondi prima di poter vedere apparire i dati su Google Analytics.
Altri metodi disponibili per il tracciamento, in base al plugin in questione, sono:
analytics.startTrackerWithId('UA-XXXXXXX-XX')
analytics.trackView('nome_schermata')
analytics.trackView('nome_schermata', 'mio-schema://content/1111?utm_source=google&utm_campaign=my-campaign')
analytics.setAnonymizeIp(true)
analytics.setAllowIDFACollection(true)
analytics.trackEvent('Categoria', 'Azione', 'Etichetta', Valore)
analytics.trackMetric('Chiave', Valore)
analytics.addCustomDimension('Chiave', 'Valore', success, error)
analytics.trackException('Descrizione', Fatal)
analytics.trackTiming('Categoria', IntervalIoInMillisecondi, 'Variabile', 'Etichetta')
analytics.addTransaction('ID', 'Affiliazione', Entrate, Tax, Spedizione, 'Codice valuta')
analytics.addTransactionItem('ID', 'Nome', 'SKU', 'Categoria', Prezzo, Quantità, 'Codice valuta')
analytics.setUserId('user-id')
analytics.setAppVersion('numero_versione')
analytics.debugMode()
analytics.enableUncaughtExceptionReporting(Enable, success, error)Buon tracciamento e per qualsiasi domanda o perplessità lasciate un commento qui sotto e vi risponderò il prima possibile.
Nessuno ha ancora commentato questo articolo, fallo tu per primo!
Scrivi un Commento