it-swarm.com.de

Wie verwende ich Google Analytics mit Phonegap ohne Plugin?

Ich mache eine App und möchte von den Benutzern Analysen erhalten. Ich habe versucht, das Phonegap Plugin zu verwenden, hatte aber kein Glück, es zu implementieren.

Ich habe mich gefragt, ob es möglich ist, Google Analytics zu erhalten, indem man die App wie eine normale Webseite behandelt und etwas Javascript in den Kopf meiner Seite einfügt. 

Gibt es einen besseren Weg, dies zu tun? und ist das Phonegap Google Analytics DAS viel besser als das, was ich zu tun versuche?

43
Mike

[Bearbeiten] Google Analytics arbeitet jetzt mit Localstorage in Hybrid-Apps.

Google Analytics hat jetzt eine Option, die hier erläutert wird , um LocalStorage anstelle von Cookies zu verwenden, und es gibt auch einen Hacker, damit es in Webviews (file:// urls) funktioniert. Anstatt den zuvor vorgeschlagenen Code zu verwenden, können Sie einfach Folgendes tun:

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

bisheriger Antwortinhalt:

Die von Alex vorgeschlagene Pokki-Lösung funktioniert gut mit ein paar Anpassungen, um die Notwendigkeit von Pokki zu beseitigen.

Ich habe hier ein Git-Projekt für diese bereinigte Version erstellt:

https://github.com/ggendre/GALocalStorage

Funktioniert gut auf Android 4.1 und ios6, ich werde bald weitere Geräte testen. Hoffe das hilft ! :)

22

Schauen Sie sich das Video an, um es in Aktion zu sehen:

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

Nach einiger Recherche fand ich eine Lösung. Ich bin auf diesen Thread in der Phonegap Google Group gestoßen: https://groups.google.com/forum/#!msg/phonegap/uqYjTmd4w_E/YD1QPmLSxf4J (Danke TimW und Dan Levine!) In diesem Thread habe ich festgestellt, dass es möglich ist, Google Analytics ohne ein Plugin zu verwenden. Sie müssen lediglich die Datei ga.js von Google http://www.google-analytics.com/ga.js herunterladen (speichern Sie die Seite einfach in Ihrem WWW-Ordner).

Ändern Sie dann die Datei ga.js, indem Sie ein Zeichen hinzufügen. Suchen Sie in der Datei ga.js nach der Word-Datei "": "und ersetzen Sie sie durch" _file: ". 

In dem Thread, auf den ich oben verlinkt habe, erklärt "TimW" die Gründe dafür:

Grundsätzlich funktioniert Google Analytics nicht, wenn es von einem .__ verwendet wird. Datei: /// URL. In iOS/PhoneGap ist dies der Fall. Um dies zu lösen, __. Problem Sie müssen zuerst die ga.js-Datei von Google herunterladen und .__ einschließen. es als Teil Ihres lokalen Builds. Sie werden feststellen, dass diese Datei .__ ist. verschleiert Durchsuchen Sie die Datei nach der Zeichenfolge "file:", die auftreten soll nur einmal. Wenn Sie es gefunden haben, fügen Sie am Anfang einen Unterstrich hinzu (damit Wird zu "_file:"). Dies verhindert, dass es mit dem Protokoll der Seite übereinstimmt Speicherort (was "Datei:" ist).

Nachdem Sie der Datei "ga.js" ein Zeichen hinzugefügt haben, fügen Sie das Folgende einfach oben in Ihre Seite ein:

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

Ich habe dies auf dem Simulator getestet, und ich habe einen Beweis dafür erhalten, dass es mit der Echtzeitansicht in Google Analytics funktioniert. Der Simulator funktionierte auf iOS 5.0. Mein Telefon ist immer noch unter iOS 4.2 und als ich es auf meinem Gerät getestet habe, wurde es nicht in der Echtzeitverfolgung angezeigt.

In dem Thread erwähnte jemand die gleichen Probleme mit Android 4.0 + ... Hoffentlich gibt es dafür in Zukunft eine bessere Lösung, aber im Moment ist dies der einfachste und unkomplizierteste Weg, um grundlegende Analysen für meine App zu erhalten. Offline-Tracking ist nicht möglich, aber das ist irgendwie unheimlich.

Obwohl iOS 4 und Android-Benutzer eine Minderheit auf dem Markt sind (siehe Tortendiagramm):

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

Ich möchte gerne Daten von allen Betriebssystemen erhalten.

34
Mike

Dies ist Februar 2017, und es besteht keine Notwendigkeit, analytics.js zu bearbeiten, für eine Bibliothek oder ein Plugin mehr, oder ich hatte sie zumindest nicht gebraucht. Viele Dinge, die in den letzten Jahren gesagt wurden, sind veraltet oder einfach veraltet, daher hier mein aktuelles umfassendes Handbuch.

1. Die config.xml-Datei

In Ihrer config.xml müssen Sie die standortübergreifende Anforderung zulassen:

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

2. Das HTML

Wenn Sie sich für ein CSP-Meta-Tag entscheiden, müssen Sie auch Anrufe an Google zulassen. Es kann so aussehen:

<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. Das Javascript

Hier ist der kommentierte Code für eine Webanwendung, die sowohl im Browser als auch in einer Cordova-Paketanwendung ausgeführt werden kann. Sie können den else-Block ignorieren, wenn Sie sich nicht für den Browser interessieren.

// 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. Ihr GA Konto

  • Erstellen Sie eine Ansicht des Typs App, um den Datenverkehr der mobilen App zu überwachen.

Wenn Sie den Datenverkehr Ihrer Web-App nicht von einer Website aus überwachen müssen, können Sie hier nicht mehr lesen, sonst lesen Sie weiter. Ich gehe davon aus, dass Sie ein einziges Konto für das Tracking der Website und der App verwenden.

  • Wenden Sie den benutzerdefinierten Filter mit dem Namen "Application? => Yes" in der erstellten Ansicht an, sodass nur die screenview-Treffer angezeigt werden. Es gibt einen offiziellen Führer hier
  • Erstellen Sie anschließend eine zweite Ansicht des Typs Website, um den Verkehr von der Website zu verfolgen. Wenden Sie einen benutzerdefinierten Filter "Anwendung? => Nein" an.
  • Wenn Sie eine Online-Ansicht Ihres Online-Verkehrs und einer In-App anzeigen möchten, erstellen Sie eine dritte Ansicht des Typs App. Standardmäßig (ohne Filter) werden alle Daten angezeigt.

Zusätzliche Bemerkungen

  • Jetzt geht alles über https, das http-Protokoll in Ihrem <access> und CSP ist nicht mehr erforderlich
  • Beachten Sie, dass das Schreiben von *.google-analytics.com im CSP nicht funktioniert. Diese Richtlinie funktioniert zwar in Chrome (56), in Cordova (5.6.0) jedoch nicht.
  • Google Analytics erfordert keine Anwendungsberechtigungen wie ACCESS_NETWORK_STATE oder ACCESS_WIFI_STATE, wie ich sie an anderer Stelle gelesen habe
  • All dies wurde mit einer Android-App getestet (ich erwarte, dass sie auch in iOS-Apps funktioniert), wobei das Crosswalk-Plugin installiert ist
23
Louis Ameline

Ich verwendete die Ionic-App (basierend auf Cordova) als mobile Website, und GA arbeitete dafür. Als ich dieselbe App an native ios lieferte, funktionierte sie nicht mehr.

Fehler 1.
Beim Überprüfen der Protokolle des Simulators wurde festgestellt, dass GA nicht richtig geladen wurde. Es wurde versucht, die Last file:// zu laden. Um dies zu beheben, habe ich https: unter GA url vorangestellt 

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

Ausgabe 2. Google bricht standardmäßig die Anforderung ab, wenn das Seitenprotokoll nicht http oder https ist. Um das zu beheben 

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

Und du solltest eingestellt sein. Nach diesen Änderungen konnte ich die Ereignisse in GA bestätigen. Ich hoffe es hilft dir auch.

3
Nirav Gandhi

Hat nicht für mich gearbeitet. Das Problem, dass Google-Code Cookies verwendet, funktioniert nicht mit file: // URLs.

Ich fand eine gute Implementierung, die localStorage anstelle von Cookies verwendet: https://developers.pokki.com/docs/tutorials.php

2
Alex

Ich habe die Bibliothek segment.io - analytics.js in einer HTML5/Meteoranwendung implementiert. 

Ich habe kein Analytics-Plugin in Phonegap (3.1). Arbeitete sofort für iOS. 

Nach der Implementierung wurden die Analysen der Android-App etwa 4 Stunden lang nicht angezeigt. Es begann dann zu arbeiten, ohne Änderungen an den Einstellungen für Phonegap oder Meteor vorzunehmen. 

Hoffentlich hilft dies jemandem, einige Stunden der Suche nach einem mysteriösen Fehler zu vermeiden.

Hinweis: Vergewissern Sie sich, dass der korrekte Zugriff von Origin eingerichtet ist, z 

1
kate

dieses phonegap plugin wird dazu beitragen, die google analytics in die phonegap app zu integrieren. Lesen Sie diesen Blog , um mehr zu erfahren, wie Sie Google Analytics in Phonegap integrieren. Sie können den Demo-Code auch von hier herunterladen. 

1
Shashi

HINWEIS: Die für mobile Plattformen generierte Google Analytics Client Traking-ID unterstützt nur IOS und Android. Wenn Sie Ihre Google-Analyse überwachen möchten, stellen Sie sicher, dass Sie sie für die Website erstellt haben. __ Nur Tracking-ID für die Website-Arbeit mit Phone Gap alle Plattform-Apps . Sie können dann einfach GALocalStorage unter dem folgenden Link herunterladen und dann in Ihrem js-Ordner im www-Ordner ablegen

www
 |__
    js
      |__
          GALocalStorage.js

Dann schreiben Sie den folgenden Code unter Ihr <head> -Tag und zeigen in seinem Dashboard aktive Benutzer in Echtzeit an. 

https://github.com/ggendre/GALocalStorage

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

Für mich stellte sich heraus, dass kein Plugin benötigt wird! Ich habe Angular 8 App in Cordova gewickelt (ähnlicher Anwendungsfall wie bei Ionic) Ich habe eine neue Website in Google Analytics registriert. Ich habe die Code-Form GA zu sieht aus wie das:

const gaScript = document.createElement('script');
        gaScript.src = "https://www.google-analytics.com/analytics.js";
        gaScript.type = "text/javascript";
        document.getElementsByTagName('head')[0].appendChild(gaScript);
        gaScript.onload = (ev: Event) => {
            const GA_LOCAL_STORAGE_KEY = 'ga:clientId';
            window['ga']('create', 'XXXX-XXXXX', {
                'storage': 'none',
                'clientId': localStorage.getItem(GA_LOCAL_STORAGE_KEY)
            });
            window['ga'](function(tracker) {
                localStorage.setItem(GA_LOCAL_STORAGE_KEY, tracker.get('clientId'));
            });

            // THIS IS FOR FILE URL SUPPORT
            window['ga']('set', 'checkProtocolTask', function(){ /* noop */});
            console.log('GA OK!')
        }

Und dann kann ich GA auf reguläre Weise verwenden: window ['ga'] ('send', 'pageview', screenName); Dies liegt daran, dass es keine automatische Verfolgung von Seitenänderungen während des Servings gibt using file: // protocol.

Diese Lösung ist sehr praktisch, da es sich um DRY handelt, da ich nur eine Möglichkeit habe, Google Analytics sowohl für Hybrid- als auch für gehostete Versionen in meine App einzubetten.

0
ToM

Sie können die GALocalstorage-Bibliothek verwenden, die auf mobilen Geräten problemlos funktioniert

Es ist einfach einzurichten

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

und das ist es, keine Modifikation oder irgendetwas anderes.

Sie müssen Website Account in Google analytics erstellen, um diese Bibliothek verwenden zu können

Bibliothek auf GitHub

0
RezaRahmati

Schnelle und schmutzige Lösung . Verwendung kann einen durch Licht verdeckten Iframe wie diesen verwenden.

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

Und jedes Mal, wenn Sie eine Seite in der PhoneGap-App anfordern, laden Sie diesen Iframe erneut, um den Track zu initialisieren.

0
Teoman shipahi

Für alle, die Probleme mit der großartigen Lösung von Guillaume Gendre für Android 4.1 oder eine andere spezifische Plattform haben, könnte dies die Lösung sein.

Wenn Ihre Android-Konsolenprotokolle "Unknown Chromium error: 0" anzeigen, müssen Sie wahrscheinlich Ihre Zugriffsberechtigungen in der config.xml verfeinern. Ich habe mein Problem behoben und es hier beschrieben.

0
Wytze