App-Tracking Debugging

Mit dem Wandel von Web zu App rückt das Thema App-Tracking immer näher in den Fokus des Online-Marketings. Ein Blick auf die Zahlen für App-Downloads lässt erahnen wie relevant Apps am Markt sind. Ihr trackt die User eurer Apps bereits? – Klasse! Wo kommt aber jetzt das Debugging ins Spiel? Wofür und wie debuggt ihr euer App-Tracking? Genau wie beim Debuggen eures Web-Trackings wollt ihr sicher auch das Tracking eurer Apps kontrollieren.

App-Tracking-Tools

Damit ihr einen kurzen Überblick über App-Tracking-Tools erhaltet, hier ein kleiner Exkurs bevor wir überhaupt mit dem Thema Debugging anfangen: Google bietet aktuell zwei kostenlose Tools an – zum einen das Tool ‚Google Analytics Services SDKs‘ und das neuere, von Google selbst empfohlene Tool ‚Firebase‘. Der erste grundlegende Unterschied liegt im Grundgedanken beim Programmieren der Tools. Während ‚Google Analytics Services SDKs’ das App-Tracking eher auf dem Gerüst der Webanalyse baute, steht bei ‚Firebase‘ ausschließlich das Tracken von Apps im Fokus. Firebase bietet beispielsweise App-spezifische Analysefeatures wie „Cloud Messaging“ an.

App-Tracking Debugging

Neben den Analyseergebnissen, die in euerem Analyse-Tool ankommen, kann es hilfreich sein in Real-Time zu sehen, wie die Daten übertragen bzw. ob sie richtig übertragen werden. Wenn ihr über Daten stolpert, die ihr euch nicht erklären könnt, bietet das Debugging euch die Chance Fehlerquellen zu beheben. Beim Debuggen von Web Pages prüft man das Tracking über die Collect-Aufrufe in der Netzwerkkonsole. Aber wie gehe ich vor, wenn ich die Daten prüfen will, die von meiner App aus an mein Analyse-Tool gesandt werden? Gute Nachrichten – denn ihr könnt auch innerhalb eures App-Trackings im Voraus prüfen, ob die Daten korrekt einlaufen. Wie das geht, erklären wir euch in den nächsten Abschnitten. Wir benutzen zum Debuggen unseres App-Trackings für Android und iOS „Charles“. Für Android-Geräte könnt ihr sogar ohne ein echtes Smartphone debuggen. Für iOS gibt es auch Möglichkeiten, die sprengen jedoch den Rahmen dieses Artikels. Wer mehr erfahren will, kann aber zu „Xcode“ recherchieren.

Charles Web Debugging Proxy

Beginnen wir mit Charles. Im Anschluss beschäftigen wir uns mit dem NoxPlayer, unserem Android-Emulator. Charles Web Debugging Proxy (im Folgenden nur "Charles" genannt) ist eine plattformübergreifende HTTP-Debugging-Proxy-Server-Anwendung. Über die Anwendung lassen sich, HTTP-, HTTPS-, HTTP / 2- und der aktivierte TCP-Port-Verkehr anzeigen, auf den ihr von eurem lokalen Computer aus zugreifen könnt. Das Programm ladet ihr hier runter. Sobald ihr das Programm installiert habt, öffnet ihr Charles und installiert euch das "Charles Root Certificate" über Help > SSL Proxiying > Install Charles Root Certificate. iPhone Hardware - Wenn ihr eure App auf dem iOS Betriebssystem testen wollt, tragt ihr unter den WLAN Einstellungen eures iPhones „Charles“ in den Proxy Server ein. Innerhalb eures WLAN Netzwerkes stellt ihr hierzu die Einstellung ‚Proxy konfigurieren‘ auf ‚manuell‘ um. Dort tippt ihr die IP Adresse des Computers, auf dem Charles läuft, und den Port (standardmäßig 8888) ein. Um den verschlüsselten Traffic in Charles einsehen zu können, ist es weiterhin erforderlich auch hier noch einmal das SSL Zertifikat von Charles auf eurem Smartphone zu installieren. Mit dem aktivierten Proxy Server könnt ihr die Seite https://chls.pro/ssl aufrufen. Das Zertifikat wird automatisch heruntergeladen und steht anschließend zur Installation bereit. Ab der Version ‚iOS 10‘ aktiviert ihr in eurem iPhone zusätzlich, dass ihr dem Zertifikat vertraut. Dazu setzt ihr ein Häkchen unter Einstellungen → Allgemein → Info → Zertifikatsvertrauenseinstellungen („Charles Proxy CA“). Das war es bereits. Jetzt solltet ihr den (HTTP-)Traffic in Charles beobachten können.

NoxPlayer

Zum Debuggen auf Android-Geräten nutzen wir den Android-Emulator „NoxPlayer“. Das Ganze funktioniert auch für Mobile Seiten und Progressive Apps. Ladet euch das Tool hier runter: https://de.bignox.com/. Ihr könnt aber auch wie unter iOS euer Android-Gerät zur Hand nehmen und 1:1 wie beim iPhone vorgehen. Sobald ihr den Emulator heruntergeladen habt, erstellt ihr ein virtuelles Gerät. Auf eurem Desktop findet ihr nun zwei Icons. Öffnet die Geräteverwaltung über das Icon ‚Multi-Drive‘. Klickt auf ‚Emulator addieren‘, um ein neues Gerät zur Liste hinzuzufügen. Wählt als nächstes die OS Version ‚Android5.1.1‘ aus. Im Anschluss an den Download könnt ihr nach erfolgreichem Einloggen über den Google Play Store die App installieren. Auch hier geht ihr über die WLAN-Einstellungen und stellt einen Proxy ein: Tools > Einstellungen > Drahtlos Netzwerke: WLAN (den WLAN-Namen gedrückt halten) > Netzwerk ändern Y Erweiterte Optionen > folgende Daten eintragen: Ersetzt die IP-Adresse durch eure bzw. die des Computers auf dem Charles läuft. Installiert das "Charles Root Certificate". Öffnet im Android-Emulator den Browser (die Warnungen, die aufpoppen ignoriert ihr, indem ihr wiederholt auf ‚Fortfahren‘ klickt. Nun öffnet ihr folgende Website https://chls.pro/ssl. Gebt dem Zertifikat den Namen "CA Charles" und sagt ‚OK‘. Die Verwendung des Zertifikats erfordert das Festlegen einer Gerätesperre. Nun solltet ihr auch hier die Daten in Charles einlaufen sehen, sobald ihr in eurer App aktiv seid.

Tipps für Charles

Benutzt das Inputfeld ‚Filter‘, wenn euch nur die Firebase-Aufrufe interessieren. Filtert dafür nach ‚app-measurement‘. Wir empfehlen euch die Option ‚Focused Hosts‘ im ‚Menü View‘ zu verwenden. Durch die Fokussierung der Hosts könnt ihr unerwünschte http-Anfragen heraus filtern. Klickt dazu mit der rechten Maustaste auf eine Anfrage und wählt ‚Focus‘ aus. Oder ihr verwaltet unter ‚View‘ > ‚Focused‘ die Hosts.

Fazit

Mehr braucht ihr nicht, um die Daten aus eurem App-Tracking auf Android und iOS Geräten zu verfolgen. App Debugging ist genau wie Web Debugging unerlässlich, um nachzuvollziehen, wie die Daten an euer Analysetool übermittelt werden. Charles erlaubt euch vor dem Tracking-Livegang Tests durchzuführen und auch im späteren Verlauf den Datenfluss zu erklären sowie Fehlerquellen ausfindig zu machen.