So verhindern Sie, dass Ihre Analysedaten von Werbeblockern blockiert werden

TL; DR In Kürze gibt es den Dienst dataunlocker.com (abonnieren!) Sowie den Open-Source-Prototyp, den Sie für Google Analytics oder Google Tag Manager verwenden können (Update 2020).

Der folgende Artikel aus den 2017er Jahren erläutert die verwendeten Prinzipien hinter diesen Lösungen und wird in der Readme-Datei der Lösung beschrieben.

Wenn Ihr Produkt gerade erst anfängt, ist jeder einzelne Benutzer wichtig. Ebenso die Daten darüber, wie sie mit Ihrem Produkt interagieren.

Wenn Sie versucht haben, Analyselösungen wie Google Analytics zu verwenden, ist möglicherweise ein Problem aufgetreten, bei dem Ihre Analysesammlung von Werbeblockern blockiert wurde.

Laut PageFair verwenden 2017 bis zu 30% der Internetnutzer Werbeblocker, und diese Zahl wächst ständig.

In diesem Artikel werden einige technische Ansätze erläutert, mit denen Sie verhindern können, dass Werbeblocker auch Ihre Analysen blockieren. In diesem Artikel wird Google Analytics verwendet, obwohl ein Großteil davon auf andere Analysetools angewendet werden könnte.

Einige Möglichkeiten, wie Sie Werbeblocker umgehen können

Fast alle Werbeblocker arbeiten mit denselben Methoden: Sie verbieten einige HTTP-Browseranforderungen für Inhalte unter URLs, die mit einer bestimmten Maske aus ihrer Filterbasis übereinstimmen.

Die meisten Werbeblocker setzen standardmäßig eine schwarze Liste auf www.google-analytics.com und blockieren alle Versuche der Google Analytics-JavaScript-Bibliothek, die Daten von ihren Analyseservern zu senden oder abzurufen.

Zum Glück für Entwickler blockieren Werbeblocker standardmäßig keine Anfragen an unsere eigenen Domain-Namen , da dies die Funktionalität der Webanwendung beeinträchtigen kann. Diese Lücke bietet eine Möglichkeit, das Blockieren von Analysen zu vermeiden, bis Ihr Webdienst so bekannt ist, dass einige seiner URLs in Werbeblockerfiltern angezeigt werden.

Selbst nachdem einige URLs in der Inhaltsfilterbasis angezeigt wurden, können Sie mit Werbeblockern spielen, indem Sie schreckliche Dinge erfinden, z. B. stündlich wechselnde Analyse-URLs (obwohl dies den Rahmen dieses Artikels sprengt). Einige dieser Ansätze werden von Diensten wie DataUnlocker.com und Adtoniq angewendet, die Benutzern eine adblockerfreie Erfahrung bieten, selbst wenn Werbeblocker aktiviert sind.

Eine allgemeine Erklärung dessen, was wir tun werden

In diesem Artikel wird davon ausgegangen, dass wir auf der Serverseite keine Berechtigungsbeschränkungen haben. Wir werden die Demo-Lösung (einige Codezeilen) für die Node.js-Plattform schreiben. Sobald Sie verstanden haben, wie dies funktioniert, sollten Sie in der Lage sein, diese Lösung auf eine beliebige Programmiersprache oder Plattform zu portieren.

Die Lösung, die ich beschreiben werde, ist ziemlich minimal, und wenn Sie ein erfahrener Webentwickler sind, dauert es möglicherweise nur einige Minuten, bis Sie sie installiert haben.

Wir werden einen einfachen Proxy-Ansatz verwenden, ohne in das Google Analytics-Messprotokoll eintauchen zu müssen. Kurz gesagt, die Lösung sieht wie folgt aus:

  1. Laden Sie zunächst die Google Analytics-JavaScript-Bibliothek selbst herunter und hosten Sie sie auf Ihrem Server.
  2. Ändern Sie dann den Code in der heruntergeladenen Bibliothek, um den Zielhost von www.google-analytics.com mithilfe von find-replace in Ihren eigenen Domainnamen zu ändern .
  3. Ersetzen Sie den Link aus dem Standard-Google Analytics-Skript in Ihrer Codebasis durch einen geänderten.
  4. Erstellen Sie einen Proxy-Endpunkt für Google Analytics-Server in Ihrem Back-End. Ein wichtiger Schritt besteht darin, die IP-Adresse des Clients zusätzlich zu erkennen und explizit in Anfragen an Google Analytics-Server zu schreiben, um die korrekte Standorterkennung zu gewährleisten.
  5. Testen Sie die Ergebnisse. Sie sind fertig!

Die vollständige technische Implementierung

Der gesamte Code und die unten beschriebenen Schritte sind auf GitHub verfügbar. In der folgenden Beschreibung werden die Grundlagen der Methode erläutert, und natürlich kann der vorgeschlagene Ansatz verbessert werden, um noch mehr „Anti-Blocking“ zu ermöglichen.

In Google Analytics erwerben Sie zunächst eine eindeutige Tracking-ID für Ihre Immobilie (Webdienst). Wir verwenden UA-98253329-1 Tracking - ID für die Demonstration in diesem Artikel. Vergessen Sie nicht, den Tracking-Code durch Ihren zu ersetzen.

Google schlägt vor, diesen minimierten Code zu Ihren Webdiensten hinzuzufügen, um Analysen zu ermöglichen:

 (function(i,s,o,g,r,a,m)function() (i[r].q=i[r].q,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', '//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-98253329-1', 'auto'); ga('send', 'pageview'); 

Mit wenigen Worten, dieser Code lädt die Google Analytics-JavaScript-Bibliothek, wenn sie zuvor nicht geladen wurde, indem das Skript-Tag in das Dokument eingefügt wird. Diese Bibliothek enthält die gesamte Logik der Analytics-Sammlung und ist das einzige, was wir zum Fortfahren benötigen.

Schritt 1: Laden Sie die Analysebibliothek von Google herunter und patchen Sie sie

Laden Sie das Skript direkt von //www.google-analytics.com/analytics.js herunter , öffnen Sie es mit einem beliebigen Texteditor und ersetzen Sie alle Vorkommen von:

www.google-analytics.com

mit genau dieser Zeichenfolge:

"+location.host+"/analytics

Wenn Sie die Analysebibliothek auf diese Weise patchen, werden Anforderungen an die Endpunkte des lokalen Hosts ( my.domain.com/analytics) anstelle von www.google-analytics.com gesendet . Diese gepatcht analytics.js - Datei auf dem Server nach dem Austausch.

Schritt 2: Ersetzen Sie das Analyseskript durch das gepatchte

Lassen Sie uns den Einbettungscode von Google Analytics so ändern, dass er unsere gepatchte Bibliothek anstelle der Standardbibliothek verwendet:

 (function(i,s,o,r)function()[]).push(arguments),i[r].l=1*new Date())(window,document,'script','ga'); ga('create', 'UA-98253329-1', 'auto'); ga('send', 'pageview');  

Beachten Sie, dass der Browser hier im Dokumentstamm Ihres Servers nach dem gepatchten Analyseskript sucht, in diesem Fall unter my.domain.com/analytics.js. Überprüfen Sie, ob Sie das Skript im Dokumentstamm abgelegt oder den Pfad im obigen Skript-Tag geändert haben. Sie können die Ergebnisse auch überprüfen, indem Sie einen Test auf Ihrem lokalen Server ausführen (Informationen zum Ausführen des GitHub-Beispiels finden Sie in der Readme-Datei).

Sie sollten so etwas in den Entwicklertools des Browsers sehen:

Letztendlich möchten wir, dass beim Herunterladen Ihrer gepatchten analyse.js eine erfolgreiche Antwort zurückgegeben wird - ein Status 200 (OK) oder 304 (nicht geändert). Zu diesem Zeitpunkt sollte die Anfrage an my.domain.com/analytics/collect jedoch mit dem Status 404 antworten, da wir den Proxyserver noch nicht implementiert haben.

Schritt 3: Implementieren des einfachsten Proxyservers

Now we’re going to code a bit. Our goal is to implement the proxy server, which will transport our analytics requests from our server to the real Google Analytics server. We can do this in many ways, but as an example, let’s use Node.js and Express.js with the express-http-proxy package.

Gathering all the files in the example together (see GitHub), we should end up with the following JavaScript server code:

var express = require("express"), proxy = require("express-http-proxy"), app = express(); app.use(express.static(__dirname)); // serve static files from cwd function getIpFromReq (req)  // get the client's IP address var bareIP = ":" + ((req.connection.socket && req.connection.socket.remoteAddress)  // proxying requests from /analytics to www.google-analytics.com. app.use("/analytics", proxy("www.google-analytics.com", { proxyReqPathResolver: function (req) { return req.url + (req.url.indexOf("?") === -1 ? "?" : "&") + "uip=" + encodeURIComponent(getIpFromReq(req)); } })); app.listen(1280); console.log("Web application ready on //localhost:1280");

A few last lines here do the proxying. The only trick we do here is instead of just proxying, we detect and append the client’s IP address explicitly in a form of a measurement protocol URL parameter. This is required to collect precise location data, because all the requests to Google Analytic originally come from our server’s IP address, which remains constant.

After setting up our server proxy, we can check whether the request to our /collect endpoint now successfully returns a 200 OK HTTP status:

We can use, for example, an anonymous connection to verify that location is also picked up correctly.

This “proxy server” approach is a fast workaround for analytics that enables your services to avoid ad blockers. But this method relies on the browser side, and if the browser script for some reason does not send analytics information to our servers, we get nothing.

The last possible step if you want to implement a solid solution is to send analytics directly from the server by using server-side libraries available for different languages (NodeJS, Python, Ruby, PHP). This approach will definitely avoid any content blockers, as every request to analytics servers comes directly from our servers.

Again, the demo application is available on GitHub, feel free to test it! Let me know if you have any feedback or interesting experiences using this approach.

Thanks for reading!