web-dev-qa-db-fra.com

Comment utiliser Google Analytics avec Phonegap sans plugin?

Je crée une application et je souhaite obtenir des analyses des utilisateurs. J'ai essayé d'utiliser le plugin Phonegap, mais je n'ai pas eu la moindre chance d'essayer de le mettre en œuvre.

Je me demandais s'il était possible d'avoir Google Analytics en traitant l'application comme une page Web normale et en mettant du javascript dans l'en-tête de ma page. 

Y a-t-il une meilleure manière de faire cela? et Phonegap Google Analytics est-il bien meilleur que ce que j'essaie de faire?

cordovagoogle-analyticsphonegap-plugins
43
Mike

[edit] Google Analytics fonctionne désormais avec le stockage local dans les applications hybrides.

Google Analytics dispose maintenant d'une option expliquée ici pour utiliser LocalStorage à la place des cookies et il existe également un hack pour le faire fonctionner dans les vues Web (file:// urls). Donc, au lieu d'utiliser le code que j'ai suggéré précédemment, vous pouvez simplement faire ceci:

// 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');

contenu de la réponse précédente:

La solution pokki suggérée par Alex fonctionne bien avec quelques ajustements pour supprimer le besoin de Pokki.

J'ai créé un projet git pour cette version nettoyée ici:

https://github.com/ggendre/GALocalStorage

Fonctionne très bien sur Android 4.1 et iOS 6, je vais tester plus d'appareil très bientôt. J'espère que cela t'aides ! :)

22
Guillaume Gendre

Regardez la vidéo pour la voir en action:

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

Après quelques recherches, j'ai trouvé une solution. Je suis tombé sur ce fil du groupe Google Phonegap: https://groups.google.com/forum/#!msg/phonegap/uqYjTmd4w_E/YD1QPmLSxf4J .__ (merci TimW et Dan Levine!) Dans ce fil, j'ai trouvé qu'il était possible d'utiliser Google Analytics sans plugin. Il vous suffit de télécharger le fichier ga.js à partir de Google http://www.google-analytics.com/ga.js (il suffit d’enregistrer la page dans votre dossier www).

Puis modifiez le fichier ga.js en lui ajoutant un caractère. Recherchez dans le fichier ga.js le mot "fichier:" et remplacez-le par "_file:". 

Dans le fil que j'ai lié à ci-dessus, "TimW" explique le raisonnement pour ceci:

Pour l'essentiel, Google Analytics ne fonctionnera pas s'il est utilisé à partir d'un fichier: /// url. Dans iOS/PhoneGap, c'est le cas. Afin de résoudre ce problème problème, vous devez d’abord télécharger le fichier ga.js à partir de Google et inclure dans le cadre de votre construction locale. Vous remarquerez que ce fichier est obfusqué. Recherchez dans le fichier la chaîne "fichier:" qui devrait apparaître juste une fois. Lorsque vous le trouvez, ajoutez un trait de soulignement au début (pour que Devienne "_file:"). Cela l'empêche de correspondre au protocole de la page emplacement (qui est "fichier:").

Après avoir ajouté un caractère au fichier ga.js, incluez simplement ce qui suit en haut de votre page:

<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>

J'ai testé cela sur le simulateur et j'ai pu prouver qu'il fonctionnait à l'aide de la vue en temps réel de Google Analytics. Le simulateur fonctionnait sur iOS 5.0. Mon téléphone est toujours sous iOS 4.2 et lorsque je l'ai testé sur mon appareil, il n'apparaissait pas dans le suivi en temps réel.

Dans le fil de discussion, quelqu'un a évoqué les mêmes problèmes avec Android 4.0+ ... J'espère qu'il y aura une meilleure solution pour cela à l'avenir, mais pour l'instant, c'est le moyen le plus simple et le moins compliqué d'obtenir des analyses de base pour mon application. Il ne peut pas faire de suivi hors ligne, mais c'est quand même un peu effrayant.

Même si les utilisateurs d’iOS 4 et d’Android sont minoritaires sur le marché (voir le graphique à secteurs):

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

Je voudrais toujours obtenir des données de tous les systèmes d'exploitation.

34
Mike

Nous sommes en février 2017 et il n'est plus nécessaire d'éditer analytics.js, ni de librairie ni de plugin, ou du moins je n'en avais pas besoin. Beaucoup de choses qui ont été dites ces dernières années sont obsolètes ou obsolètes, alors voici mon guide complet et à jour.

1. Le fichier config.xml

Dans votre config.xml, vous devez autoriser la requête intersite:

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

2. Le HTML

Dans votre méta-tag CSP, si vous choisissez d'en avoir une, vous devez également autoriser les appels vers Google. Cela peut ressembler à:

<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. Le javascript

Voici le code commenté d'une application Web pouvant s'exécuter à la fois dans le navigateur et dans une application fournie avec Cordova. Vous pouvez ignorer le bloc else si vous ne vous souciez pas du navigateur.

// 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. Votre GA compte

  • Pour surveiller le trafic de l'application mobile, créez une vue du type App.

Si vous n'avez pas besoin de surveiller le trafic de votre application Web à partir d'un site Web, vous pouvez arrêter de lire ici, sinon lisez la suite. Je suppose que vous utilisez un seul compte pour le suivi du site Web et de l'application.

  • Appliquez le filtre personnalisé nommé "Application? => Yes" sur la vue créée afin qu'il ne montre que les occurrences screenview. Il existe un guide officiel ici
  • Ensuite, pour suivre le trafic du site Web, créez une deuxième vue du type Website. Appliquez un filtre personnalisé "Application? => No" dessus.
  • Si vous souhaitez une vue fusionnée de votre trafic en ligne et dans l'application, créez une troisième vue du type App. Par défaut (sans filtre), toutes les données seront affichées.

Notes complémentaires

  • Tout passe maintenant sur https, plus besoin du protocole http dans votre <access> et votre CSP
  • Sachez qu'écrire *.google-analytics.com dans le CSP ne fonctionnerait pas. Bien que cette stratégie fonctionne avec Chrome (56), elle ne fonctionne pas avec Cordova (5.6.0).
  • Google Analytics ne nécessite aucune autorisation d'application, comme ACCESS_NETWORK_STATE ou ACCESS_WIFI_STATE, comme je l'ai lu ailleurs.
  • Tout cela a été testé avec une application Android (je pense que cela fonctionnerait également dans les applications iOS), avec le plugin Crosswalk installé
23
Louis Ameline

J'utilisais l'application Ionic (basée sur Cordova) comme site Web mobile et GA y travaillait. Lorsque j'ai envoyé la même application sur ios natif, elle a cessé de fonctionner.

Numéro 1.
Lors de la vérification des journaux du simulateur, nous avons constaté que GA n’était pas chargé correctement. Il essayait le chargement file://. Pour résoudre ce problème, j'ai ajouté https: à l'URL GA sous 

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

Issue 2. Par défaut, Google abandonne la demande si le protocole de page n'est pas http ou https. Pour résoudre ce problème 

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

Et vous devriez être prêt. Après avoir apporté ces modifications, j'ai pu confirmer les événements sur GA. J'espère que cela vous aide aussi.

3
Nirav Gandhi

Ca n'a pas marché pour moi. Le problème que Google Code utilise les cookies et ne fonctionne pas avec file: // urls.

J'ai trouvé une bonne implémentation qui utilise localStorage au lieu des cookies: https://developers.pokki.com/docs/tutorials.php

2
Alex

J'ai implémenté la bibliothèque segment.io - analytics.js dans une application HTML5/météore. 

Je n'ai pas de plugin d'analyse dans phonegap (3.1). Travaillé immédiatement pour iOS. 

Après la mise en œuvre, les analyses de l'application Android ne s'affichaient pas pendant environ 4 heures. Il a ensuite commencé à fonctionner sans modification de l’écart téléphonique ou des paramètres météores. 

J'espère que cela aidera quelqu'un à éviter quelques heures de recherche d'un virus mystérieux.

Remarque: Assurez-vous que l’accès correct est réglé sur Origin, par exemple . Add. 

1
kate

ce plugin phonegap aidera à intégrer Google Analytics dans l'application phonegap. Lisez ce blog pour en savoir plus sur l'intégration de Google Analytics dans phonegap. vous pouvez également télécharger le code de démonstration fonctionnel à partir de ici . 

1
Shashi

REMARQUE: l'ID de suivi du client Google Analytics généré pour la plate-forme mobile ne prend en charge que IOS et Android.So, si vous souhaitez suivre votre Google Analytics, assurez-vous de l'avoir créé pour le site Web . avec intervalle téléphonique toutes les applications de la plate-forme . Vous pouvez alors simplement télécharger GALocalStorage à partir du lien ci-dessous et le placer dans votre dossier js sous le dossier www

www
 |__
    js
      |__
          GALocalStorage.js

Ensuite, écrivez le code ci-dessous sous votre balise <head> et commencez à afficher les utilisateurs actifs en temps réel dans vos tableaux de bord. 

https://github.com/ggendre/GALocalStorage

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

Vous pouvez utiliser la bibliothèque GALocalstorage et cela fonctionne bien sur les appareils mobiles.

C'est facile à installer

<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>

et c'est tout, aucune modification ou autre chose.

Vous devez créer Website Account dans Google analytics pour utiliser cette bibliothèque.

Bibliothèque sur GitHub

0
RezaRahmati

Solution rapide et sale… .. L’utilisation peut utiliser un iframe caché par la lumière comme ceci;

<iframe src="http://www.yourwebsite.com/userControls/GoogleAnalytics.html?param=extraParamHere" style="visibility: hidden"></iframe>

Et chaque fois que vous demandez une page dans l'application PhoneGap, rechargez cette iframe pour initialiser le suivi.

0
Teoman shipahi

Si vous rencontrez des problèmes avec l'excellente solution de Guillaume Gendre sous Android 4.1 ou une autre plate-forme spécifique, cela pourrait les résoudre.

Si les journaux de votre console Android affichent "Erreur de chrome inconnue: 0", vous devrez probablement affiner vos autorisations d'accès dans config.xml. J'ai résolu mon problème et l'ai décrit ici .

0
Wytze