cordova - plugin - ionic3 analytics




Come utilizzare Google Analytics con PhoneGap senza un plug-in? (8)

[modifica] Google Analytics ora funziona con lo spazio locale nelle app ibride.

Google Analytics ora ha una delle opzioni spiegate qui per utilizzare LocalStorage invece dei cookie e c'è anche un trucco per farlo funzionare in webviews ( file:// urls). Quindi, invece di usare il codice che ho suggerito prima, puoi fare questo:

// THIS IS FOR LOCALSTORAGE
var GA_LOCAL_STORAGE_KEY = 'ga:clientId';
ga('create', 'UA-XXXXX-Y', {
  'storage': 'none',
  'clientId': localStorage.getItem(GA_LOCAL_STORAGE_KEY)
});
ga(function(tracker) {
  localStorage.setItem(GA_LOCAL_STORAGE_KEY, tracker.get('clientId'));
});

// THIS IS FOR FILE URL SUPPORT
ga('set', 'checkProtocolTask', function(){ /* noop */});

// And then as usual...
ga('send', 'pageview');

contenuto della risposta precedente:

La soluzione pokki suggerita da Alex sta funzionando bene con alcune modifiche per rimuovere la necessità di Pokki.

Ho creato un progetto git per questa versione ripulita qui:

https://github.com/ggendre/GALocalStorage

Funziona alla grande su Android 4.1 e iOS6, testerò più dispositivi molto presto. Spero che questo ti aiuti ! :)

Sto facendo un'app e voglio ottenere l'analisi dagli utenti. Ho provato ad usare il Plugin PhoneGap, ma non ho avuto fortuna nel tentativo di implementarlo.

Mi stavo chiedendo se fosse possibile ottenere Google Analytics trattando l'app come una normale pagina web e inserendo qualche javascript in testa alla mia pagina.

C'è un modo migliore per farlo? ed è Google Analytics di PhoneGap che è molto meglio di quello che sto cercando di fare?


Guarda il video per vederlo in azione:

http://screencast.com/t/6vkWlZOp

Dopo alcune ricerche, ho trovato una soluzione. Ho trovato questo thread sul Gruppo Google PhoneGap: https://groups.google.com/forum/#!msg/phonegap/uqYjTmd4w_E/YD1QPmLSxf4J (grazie a TimW e Dan Levine!) In questo thread ho scoperto che è possibile usa Google Analytics senza un plug-in. Tutto quello che devi fare è scaricare il file ga.js da Google http://www.google-analytics.com/ga.js (basta salvare la pagina nella cartella www)

Quindi modifica il file ga.js aggiungendo un carattere ad esso. Cerca nel file ga.js la parola "file:" e sostituiscila con "_file:".

Nel thread che ho collegato sopra, "TimW" spiega il ragionamento per questo:

In sostanza, Google Analytics non funzionerà se viene utilizzato da un file: /// url. In iOS / PhoneGap questo è il caso. Per risolvere questo problema devi prima scaricare il file ga.js da google e includerlo come parte della tua build locale. Noterai che questo file è offuscato. Cerca il file per la stringa "file:" che dovrebbe verificarsi solo una volta. Quando lo trovi, aggiungi un trattino basso all'inizio (quindi diventa "_file:"). Ciò impedisce che corrisponda al protocollo del percorso della pagina (che è "file:").

Dopo aver aggiunto un carattere al file ga.js, includi semplicemente quanto segue nella parte superiore della pagina:

<script type="text/javascript" src="ga.js"></script>
    <script>
 var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-YOUR_ID_HERE']);
    _gaq.push(['_setDomainName', 'none']);
    _gaq.push(['_trackPageview', 'NAME_OF_PAGE']);
    </script>

Ho provato questo sul simulatore e ho avuto la prova che funzionava usando la vista in tempo reale in Google Analytics. Il simulatore stava lavorando su iOS 5.0. Il mio telefono è ancora su iOS 4.2 e, quando l'ho provato sul mio dispositivo, non si è mostrato sul monitoraggio in tempo reale.

Nel thread qualcuno ha menzionato gli stessi problemi con Android 4.0 + ... Speriamo che ci sarà una soluzione migliore per questo in futuro, ma per ora questo è il modo più semplice e meno complicato per ottenere analisi di base per la mia app. Non può fare il monitoraggio offline, ma è comunque inquietante.

Anche se gli utenti di iOS 4 e Android sono una minoranza sul mercato (vedi grafico a torta):

http://static7.businessinsider.com/image/4fd65fac6bb3f7925700000f/chart-of-the-day-ios-vs-android-june-2012.jpg

Mi piacerebbe ottenere dati da tutti i sistemi operativi.


NOTA: l'ID di tracciamento dei clienti di Google Analytics generato per piattaforma mobile supporta solo IOS e Android. Se si desidera monitorare l'analisi di Google, assicurarsi di averlo creato per il sito Web. Solo l'ID di monitoraggio per il sito web funziona con il divario telefonico tutte le app della piattaforma. È quindi sufficiente scaricare GALocalStorage dal link sottostante e posizionarlo nella cartella js nella cartella www

www
 |__
    js
      |__
          GALocalStorage.js

Quindi scrivi il codice seguente sotto il tag <head> e inizia a mostrare gli utenti attivi in ‚Äč‚Äčtempo reale nei tuoi dashboard.

https://github.com/ggendre/GALocalStorage

       <script>
        ga_storage._setAccount('UA-XXXXXXXX-X'); //Replace with your own
        ga_storage._trackPageview('Home Screen');
        </script>

Non ha funzionato per me. Il problema che il codice google utilizza i cookie e non funziona con file: // urls.

Ho trovato una buona implementazione che utilizza localStorage al posto dei cookie: https://developers.pokki.com/docs/tutorials.php


Puoi utilizzare la libreria GALocalstorage e funziona perfettamente sui dispositivi mobili

È facile da configurare

<script type="text/javascript" src="js/libs/GALocalStorage.js"></script>
<script>
    ga_storage._setAccount('UA-37167XXX-1'); //Replace with your own
    ga_storage._trackPageview('/index.html');

</script>

e cioè, nessuna modifica o altro.

Devi utilizzare l' Website Account in Google analytics per utilizzare questa libreria

https://github.com/ggendre/GALocalStorage


Questo è febbraio 2017 e non è più necessario modificare analytics.js, né una libreria o un plugin, o almeno non ne ho avuto bisogno. Molte cose che sono state dette negli anni passati sono deprecate o semplicemente obsolete, quindi ecco la mia guida completa aggiornata.

1. Il file config.xml

Nel file config.xml, devi consentire la richiesta cross-site:

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

2. L'HTML

Nel tuo meta tag CSP, se scegli di averne uno, devi anche consentire le chiamate a Google. Può sembrare:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' 'unsafe-eval' https://ssl.gstatic.com https://www.google-analytics.com;">

3. Il javascript

Ecco il codice commentato per una webapp che può essere eseguita sia nel browser che in un'applicazione Cordova. Puoi ignorare il blocco else se non ti interessa il browser.

// the default GA code, nothing to change
(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','https://www.google-analytics.com/analytics.js','ga');

var fields = {
  // note: you can use a single tracking id for both the app and the website,
  // don't worry it won't mix the data. More about this in the 3rd section
  trackingId: 'UA-XXXXXXXX-Y'
};

// if we are in the app (the protocol will be file://)
if(document.URL.indexOf('http://') !== 0){

  // we store and provide the clientId ourselves in localstorage since there are no
  // cookies in Cordova
  fields.clientId = localStorage.getItem('ga:clientId');
  // disable GA's cookie storage functions
  fields.storage = 'none';

  ga('create', fields);

  // prevent tasks that would abort tracking
  ga('set', {
    // don't abort if the protocol is not http(s)
    checkProtocolTask: null,
    // don't expect cookies to be enabled
    checkStorageTask: null
  });

  // a callback function to get the clientId and store it ourselves
  ga(function(tracker){
    localStorage.setItem('ga:clientId', tracker.get('clientId'));
  });

  // send a screenview event
  ga('send', {
    // these are the three required properties, check GA's doc for the optional ones
    hitType: 'screenview',
    // you can edit these two values as you wish
    screenName: '/index.html',
    appName: 'YourAppName'
  });
}
// if we are in a browser
else {

  ga('create', fields);

  // send a pageview event
  ga('send', {
    // this is required, there are optional properties too if you want them
    hitType: 'pageview'
  });
}

3. Il tuo account GA

  • Per monitorare il traffico dell'app mobile, creare una vista del tipo di App .

Se non è necessario monitorare il traffico della propria app Web da un sito Web, è possibile interrompere la lettura qui, altrimenti continuare a leggere. Presumo che tu stia utilizzando un unico account per il tracciamento sia del sito web che dell'app.

  • Applica il filtro personalizzato denominato "Applicazione? => Sì" nella vista creata in modo che mostri solo gli hit della screenview . C'è una guida ufficiale here
  • Quindi, per tracciare il traffico dal sito Web, creare una seconda vista del tipo di Website . Applicare un filtro personalizzato "Applicazione? => No" su di esso.
  • Se desideri una visualizzazione unita del tuo traffico online e in-app, crea una terza visualizzazione del tipo di App . Per impostazione predefinita (senza filtro), mostrerà tutti i dati.

Note aggiuntive

  • Ora tutto passa da https, non è più necessario il protocollo http in <access> e CSP
  • Tieni presente che scrivere *.google-analytics.com nel CSP non funzionerebbe. Sebbene questa politica funzioni in Chrome (56), non in Cordova (5.6.0)
  • Google Analytics non richiede alcuna autorizzazione per le applicazioni come ACCESS_NETWORK_STATE o ACCESS_WIFI_STATE come ho letto altrove
  • Tutto questo è stato testato con un'app per Android (mi aspetto che funzioni anche nelle app iOS), con il plugin Crosswalk installato

Stavo usando l'app Ionica (basata su cordova) come sito web mobile e GA ci stava lavorando. Quando ho spedito la stessa app agli ios nativi, ha smesso di funzionare.

Numero 1.
Nel controllare i log del simulatore, ho scoperto che GA non veniva caricato correttamente. Stava provando il file:// caricamento file:// . Per risolvere questo problema, ho anteposto https: a GA url sotto

(window,document,'script','//www.google-analytics.com/analytics.js','ga')

Problema 2. Google di default interrompe la richiesta se il protocollo della pagina non è http o https. Per risolvere questo

ga('set', 'checkProtocolTask', null);

E dovresti essere impostato. Dopo aver apportato queste modifiche, sono stato in grado di confermare gli eventi su GA. Spero che ti aiuti anche tu.


questo plugin per PhoneGap ti aiuterà a integrare l'analisi di google nell'app phonegap. Leggi questo blog per saperne di più su come integrare google analytics su phonegap. puoi anche scaricare il codice demo funzionante da here .