Hogyan lehet megakadályozni, hogy az elemzési adatokat blokkolják a hirdetésblokkolók

TL; DR Hamarosan megjelenik a dataunlocker.com szolgáltatás (feliratkozás!), Valamint a nyílt forráskódú prototípus, amelyet a Google Analytics vagy a Google Tag Manager számára használhat (2020-as frissítés).

Az alábbi, 2017-es évekből származó cikk elmagyarázza a megoldások mögött meghúzódó elveket, valamint leírja a megoldás olvasmányában.

Amikor a termék még csak most indul ki, minden egyes felhasználónak számít. Tehát az adatok arról is, hogy miként lépnek kapcsolatba a termékével.

Ha olyan elemzési megoldásokat kipróbált, mint a Google Analytics, akkor szembesülhet egy olyan problémával, amikor az elemzési gyűjteményt a hirdetésblokkolók blokkolták.

A PageFair szerint 2017-ben az internetezők akár 30% -a is használ hirdetésblokkolókat, és ez a szám folyamatosan növekszik.

Ez a cikk elmagyaráz néhány technikai megközelítést, amelyekkel megakadályozhatja, hogy a hirdetésblokkolók blokkolják az elemzéseket is. Ebben a cikkben a Google Analytics szolgáltatást fogjuk használni, bár ennek nagy része alkalmazható más elemző eszközökre is.

Néhány módon megkerülheti a hirdetésblokkolókat

Szinte az összes hirdetésblokkoló ugyanazon módszeren keresztül működik: megtiltja a http (ek) böngésző tartalom iránti kérelmét olyan URL-címeken, amelyek a szűrőbázisukból megfelelnek egy bizonyos maszknak.

A legtöbb hirdetésblokkoló alapértelmezés szerint feketelistára teszi a www.google-analytics.com webhelyet, és blokkolja a Google Analytics JavaScript könyvtárának azon kísérleteit, hogy adatokat küldjön vagy visszakereszenek elemzőszervereiről.

A fejlesztőknek szerencsére a hirdetésblokkolók alapértelmezés szerint nem blokkolják a saját domainneveinkre irányuló kérelmeket , mert ez károsíthatja a webalkalmazás funkcionalitását. Ez a hiányosság feltárja az analitikai blokkolás elkerülésének módját, amíg webszolgáltatása eléggé ismertté válik, és annak egyes URL-jei megjelennek a hirdetésblokkoló szűrőkben.

Valójában még azután is, hogy egyes URL-ek megjelennek a tartalomszűrő bázisban, szörnyű dolgok, például óránkénti változó elemzési URL-ek kitalálásával kezdhet el játszani a hirdetésblokkolókkal (bár ez meghaladja a cikk kereteit). Ezen megközelítések egy részét olyan szolgáltatások alkalmazzák, mint a DataUnlocker.com és az Adtoniq, amelyek adblocker-mentes élményt kínálnak a felhasználóknak akkor is, ha a hirdetésblokkolók be vannak kapcsolva.

Magas szintű magyarázat arról, hogy mit fogunk tenni

Ebben a cikkben feltételezzük, hogy a szerver oldalon nincsenek engedélykorlátozásaink. Megírjuk a bemutató megoldást (néhány kódsor) a Node.js platformra. Miután megértette ennek működését, képesnek kell lennie arra, hogy ezt a megoldást bármilyen programozási nyelvre vagy platformra portálja.

Az általam leírt megoldás meglehetősen minimális, és ha Ön tapasztalt webfejlesztő, csak néhány percet vehet igénybe a helyére helyezés.

Egyszerű proxying megközelítést fogunk használni anélkül, hogy el kellene merülnünk a Google Analytics mérési protokolljában. Röviden, a megoldás a következőképpen néz ki:

  1. Először töltse le magát a Google Analytics JavaScript könyvtárat, és tárolja a szerveren.
  2. Ezután módosítsa a letöltött könyvtárban található kódot, hogy a www.google-analytics.com webhelyről a célgazdát a saját domain nevére változtassa a find-cserével.
  3. Cserélje le a kódbázis alapértelmezett Google Analytics szkriptjének hivatkozását a módosítottra.
  4. Hozzon létre egy proxy végpontot a Google Analytics szerverekhez a hátoldalán. Az egyik fontos lépés az ügyfelek IP-címének további észlelése és kifejezetten a Google Analytics szerverekhez intézett kérésekbe történő beírása a helyfelismerés megőrzése érdekében.
  5. Tesztelje az eredményeket. Végeztél!

A teljes műszaki megvalósítás áttekintése

Az összes kód és az alábbiakban ismertetett lépések elérhetők a GitHubon. Az alábbi leírás elmagyarázza a módszer alapjait, és természetesen a javasolt megközelítés javítható, hogy még inkább „blokkolásgátló” legyen.

A Google Analytics szolgáltatásban azzal kezdi, hogy megszerez egy egyedi követési azonosítót tulajdonához (webszolgáltatás). A bemutatáshoz ebben a cikkben az UA-98253329–1 követési azonosítót fogjuk használni . Ne felejtse el kicserélni a követőkódot a sajátjára.

A Google azt javasolja, hogy adja hozzá ezt a tömörített kódot az internetes szolgáltatásaihoz az elemzés engedélyezéséhez:

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

Néhány szóval ez a kód betölti a Google Analytics JavaScript könyvtárát, ha korábban nem töltötte be, a szkriptcímke beillesztésével a dokumentumba. Ez a könyvtár magában foglalja az analitikagyűjtés összes logikáját, és ez az egyetlen dolog, amit folytatnunk kell.

1. lépés: Töltse le és javítsa ki a Google elemzési könyvtárát

Töltse le a szkriptet közvetlenül a //www.google-analytics.com/analytics.js webhelyről , nyissa meg bármelyik szövegszerkesztővel, és cserélje le az alábbiak összes előfordulását:

www.google-analytics.com

ezzel a pontos húrral:

"+location.host+"/analytics

Az elemzési könyvtár ilyen módon történő javításával megkezdi a kéréseket a helyi gazdagép ( my.domain.com/analytics) végpontok felé a www.google-analytics.com helyett . Helyezze ezt a javított analytics.js fájlt a szerverre a csere után.

2. lépés: Cserélje ki az elemzési szkriptet a javítottra

Módosítsuk a Google Analytics beágyazási kódját úgy, hogy az az alapértelmezett helyett a javított könyvtárunkat használja:

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

Ne feledje, hogy itt a böngésző a javított elemzési szkriptet keresi a kiszolgáló dokumentumgyökerében, ebben az esetben a my.domain.com/analytics.js fájlban. Ellenőrizze, hogy a szkriptet a dokumentumgyökérbe helyezte-e, vagy megváltoztatta-e a fenti szkriptcímke elérési útját. Az eredményeket tesztelheti a helyi kiszolgálón is (a GitHub példa futtatásához lásd a readme-et).

Valami ilyesmit kell látnia a böngésző fejlesztői eszközeiben:

Végül azt akarjuk, hogy a javított analytics.js letöltése sikeres választ adjon - 200 (OK) vagy 304 (nem módosított) állapotot. De ezen a ponton a my.domain.com/analytics/collect címre küldött kérelemnek 404-es állapotban kell válaszolnia, mivel a proxy szervert még nem implementáltuk.

3. lépés: A legegyszerűbb proxy szerver megvalósítása

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!