Comment utiliser Google Analytics avec Phonegap sans plugin?

je fais une application et je veux obtenir des analyses des utilisateurs. J'ai essayé D'utiliser le Plugin Phonegap, mais je n'ai pas eu de chance en essayant de l'implémenter.

je me demandais s'il était possible d'obtenir Google Analytics en traitant L'application comme une page Web normale et en mettant du javascript en tête de ma page.

Est-il une meilleure façon de le faire? et est-ce que le Phonegap Google Analytics est bien meilleur que ce que j'essaie de faire?

42
demandé sur Mike 2012-06-14 09:02:39

11 réponses

[modifier] Google Analytics fonctionne maintenant avec localstorage dans les applications hybrides.

Google Analytics ont maintenant un options expliquées ici pour utiliser LocalStorage au lieu de cookies et il ya aussi un hack pour le faire fonctionner dans webviews ( 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');

précédente réponse contenu:

la solution de pokki suggérée par Alex fonctionne bien avec quelques ajustements pour éliminer 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 ios6, je vais tester plus de périphérique très bientôt. Espérons que cette aide ! :)

21
répondu Guillaume Gendre 2018-01-08 11:12:50

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 sur le groupe Phonegap Google: https://groups.google.com/forum/#!msg / phonegap/uqyjtmd4w_f / YD1QPmLSxf4J (merci TimW et Dan Levine!) Dans ce fil j'ai trouvé Qu'il est possible D'utiliser Google Analytics sans un plugin. Tout ce que vous avez à faire est de télécharger l'ag.fichier JS de Google http://www.google-analytics.com/ga.js (il suffit de sauvegarder la page dans votre dossier www)

modifier ensuite l'AG.fichier js en y ajoutant un caractère. La recherche de l'ag.fichier js pour le mot "fichier:" et remplacer par "_file:".

dans le fil que j'ai relié ci-dessus, "TimW" explique le raisonnement pour cela:

essentiellement, Google Analytics ne fonctionnera pas si son utilisé à partir d'un fichier: / / / url. Dans iOS / PhoneGap, c'est le cas. Afin de résoudre ce problème, vous devez d'abord télécharger le ga.js de google et comprennent comme une partie de votre construction locale. Vous remarquerez que ce fichier est d'obfuscation. Rechercher dans le fichier la chaîne de caractères "file:" qui devrait apparaître qu'une seule fois. Lorsque vous le trouvez, ajouter un underscore au début (de sorte qu'il devient "_file:"). Cela l'empêche de correspondre au Protocole de la page emplacement (qui est "fichier:").

après avoir ajouté un caractère à l'AG.fichier js, il vous suffit d'inclure ce qui suit dans le 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 eu la preuve qu'il fonctionnait en utilisant la vue en temps réel dans Google Analytics. Le simulateur travaillait sur iOS 5.0. Mon téléphone est toujours sur iOS 4.2, et quand je l'ai testé sur mon appareil, il n'est pas apparu sur le traqueur en temps réel.

Dans le fil, quelqu'un a mentionné les mêmes problèmes avec Android 4.0+... J'espère qu'il y aura une meilleure solution dans le futur mais pour l'instant c'est le plus facile et moins compliqué pour obtenir de base analytique pour mon application. Il ne peut pas faire de traçage hors ligne, mais c'est un peu effrayant de toute façon.

même si les utilisateurs iOS 4 et Android sont minoritaires sur le marché (voir graphique circulaire):

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

j'aimerais toujours obtenir des données de tous les OS.

34
répondu Mike 2012-06-15 08:20:40

nous sommes en février 2017 et il n'est pas nécessaire d'éditer analytics.js, ni pour une bibliothèque ou plugin désormais, ou du moins je n'en avais pas besoin. Beaucoup de choses qui ont été dites au cours des dernières années sont obsolètes ou simplement obsolètes, alors voici mon guide complet à jour.

1. Le fichier de configuration.fichier xml

dans votre config.xml, vous devez autoriser la requête cross-site:

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

2. Le HTML

dans votre balise meta CSP, si vous choisissez d'en avoir une, vous devez également autoriser les appels vers Google. Il 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é pour une webapp qui peut fonctionner à la fois dans le navigateur et dans une application Cordova packaged. 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 compte GA

  • pour surveiller le trafic de l'application mobile, créez une vue de 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 lire sur. Je suppose que vous utilisez un seul compte pour le suivi du site web et de l'application.

  • Appliquer le filtre personnalisé nommé "Application? = > yes" sur la vue created de sorte qu'elle ne montrera que les hits screenview . Il y a un guide officiel ici
  • ensuite, pour suivre le trafic à partir du site Web, créer une deuxième vue du type Website . Appliquer un filtre personnalisé "Application? => pas de" sur elle.
  • Si vous voulez une vue fusionnée de votre trafic en ligne et dans l'application, créer un troisième vue du type App . Par défaut (sans filtre), il affichera toutes les données.

Notes complémentaires

  • tout passe par https maintenant, plus besoin de protocole http dans votre <access> et CSP
  • soyez conscient que l'écriture *.google-analytics.com dans le CSP ne fonctionnerait pas. Bien que cette politique fonctionne dans Chrome (56), elle ne fonctionne pas dans Cordova (5.6.0)
  • Google analytics ne nécessite pas de permissions d'application comme ACCESS_NETWORK_STATE ou ACCESS_WIFI_STATE comme j'ai lu ailleurs
  • tout cela a été testé avec une application Android (je m'attends à ce que cela fonctionne aussi dans iOS apps), avec le plugin Crosswalk installé
21
répondu Louis Ameline 2017-02-14 01:47:19

j'utilisais Ionic app (basé sur cordova) comme un site web mobile et GA travaillait pour elle. Quand j'ai envoyé la même application à natif ios, elle a cessé de fonctionner.

numéro 1.

En vérifiant les registres du simulateur, a constaté que GA n'était pas chargé correctement. Il essayait la charge file:// . Pour corriger cela, j'ai ajouté https: à l'url de GA sous

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

numéro 2. Google par défaut annule la demande si la page protocole http ou https. Pour corriger ce

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

et vous devriez être réglé. Après avoir fait ces changements, j'ai été en mesure de confirmer les événements sur GA. Espérons qu'il vous aide aussi.

3
répondu Nirav Gandhi 2016-01-28 09:16:37

n'a pas marché pour moi. Le problème que google code utilise des cookies et qu'il ne fonctionne pas avec le fichier:// urls.

j'ai trouvé une bonne implémentation qui utilise localStorage à la place des cookies: https://developers.pokki.com/docs/tutorials.php

2
répondu Alex 2012-12-23 12:54:23

j'ai implémenté le segment.io-analytics.bibliothèque js dans une application HTML5 / meteor.

Je n'ai pas de plugin analytics dans phonegap (3.1). A fonctionné immédiatement pour iOS.

après la mise en œuvre, les statistiques de L'application Android ne s'est pas affiché pendant environ 4 heures. Il a ensuite commencé à fonctionner sans modification des paramètres phonegap ou meteor.

Espérons que cela aide quelqu'un à éviter quelques heures de recherche d'un mystère bug.

Note: assurez-vous que l'origine d'accès correcte est configurée, par exemple ajouter

1
répondu kate 2014-02-25 10:57:57

ce plugin phonegap va contribuer à l'intégration de google analytics app phonegap. lire 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émo de travail de ici .

1
répondu Shashi 2015-04-02 12:05:13

pour toute personne rencontrant des problèmes avec la grande solution de Guillaume Gendre sur Android 4.1 ou une autre plateforme spécifique, cela pourrait les résoudre.

si les logs de votre console Android montrent" erreur Chromium inconnue: 0", Il est probable que vous devez affiner vos permissions d'accès dans config.XML. J'ai corrigé mon problème et l'ai décrit ici .

0
répondu Wytze 2017-05-23 12:10:26

solution rapide et sale. Utiliser pouvez utiliser une lumière cachée iframe 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 la piste.

0
répondu Teoman shipahi 2014-05-16 04:43:09

vous pouvez utiliser GALocalstorage bibliothèque, et il fonctionne très bien sur les appareils mobiles

c'est facile à configurer

<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 quoi que ce soit d'autre.

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

bibliothèque sur GitHub

0
répondu RezaRahmati 2015-02-25 16:10:28

NOTE: Google Analytics Client Traking ID généré pour la plate-forme mobile prend en charge uniquement IOS et Android.Donc,si vous voulez suivre votre Google analytics, assurez-vous que vous L'avez créé pour le site web. Seulement le suivi ID pour le travail de site Web avec le téléphone gap toutes les applications de plate-forme. Vous pouvez alors simplement télécharger GALocalStorage à partir du lien ci-dessous et ensuite le placer dans votre dossier js sous le dossier www

www
 |__
    js
      |__
          GALocalStorage.js

alors écrivez le code ci-dessous sous votre étiquette < head>, et son début montre 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
répondu 9to5ios 2015-07-09 11:24:24