Sådan forhindres dine analysedata i at blive blokeret af annonceblokkere

TL; DR Der er snart dataunlocker.com-tjeneste (abonner!) Sammen med den open source-prototype, du kan bruge til Google Analytics eller Google Tag Manager (opdatering 2020).

Artiklen fra 2017s nedenfor forklarer de anvendte principper bag disse løsninger, såvel som den er beskrevet i løsningens readme.

Når dit produkt lige er startet, betyder det, at hver enkelt bruger betyder noget. Det samme gør dataene om, hvordan de interagerer med dit produkt.

Hvis du har prøvet at bruge analyseløsninger som Google Analytics, har du muligvis haft et problem, hvor din analytics-samling blev blokeret af annonceblokkere.

Ifølge PageFair bruger op til 30% af internetbrugere annonceblokkere i 2017, og dette antal vokser konstant.

Denne artikel forklarer nogle tekniske tilgange, du kan tage for at forhindre, at annonceblokkere også blokerer for din analyse. Vi bruger Google Analytics i denne artikel, selvom meget af dette kunne anvendes på andre analyseværktøjer.

Nogle måder du kan omgå annonceblokkere

Næsten alle annonceblokkere arbejder på samme måde: de tillader ikke nogle http (s) browseranmodninger om indhold på webadresser, der matcher en bestemt maske fra deres filtreringsbase.

De fleste annonceblokkere sortlister www.google-analytics.com som standard og blokerer ethvert forsøg fra Google Analytics JavaScript-bibliotek på at sende eller hente dataene fra dets analyseservere.

Heldigvis for udviklere blokerer annonceblokkere ikke anmodninger om vores egne domænenavne som standard, fordi det kan skade webapplikationens funktionalitet. Dette hul afslører en måde at undgå analyse-blokering, indtil din webservice bliver kendt nok til, at nogle af dens webadresser vises i annonceblokeringsfiltre.

Faktisk, selv efter at nogle webadresser vises i indholdsfiltreringsbasen, kan du begynde at spille med annonceblokkere ved at opfinde forfærdelige ting, såsom timeskiftning af analysewebadresser (selvom dette er uden for denne artikels anvendelsesområde). Nogle af disse tilgange anvendes af tjenester som DataUnlocker.com og Adtoniq, som tilbyder brugerne adblocker-fri oplevelse, selv når annonceblokkere er slået til.

En forklaring på højt niveau af, hvad vi skal gøre

I denne artikel antager vi, at vi ikke har nogen tilladelsesbegrænsninger på serversiden. Vi skriver demo-løsningen (et par kodelinjer) til Node.js-platformen. Når du først har forstået, hvordan dette fungerer, skal du være i stand til at overføre denne løsning til ethvert programmeringssprog eller platform.

Den løsning, jeg vil beskrive, er ret minimal, og hvis du er en erfaren webudvikler, kan det kun tage et par minutter at sætte den på plads.

Vi skal bruge en simpel proxy-tilgang uden behov for at dykke ned i Google Analytics-måleprotokollen. Kort sagt ser løsningen ud som følger:

  1. Først skal du downloade selve JavaScript-biblioteket i Google Analytics og være vært for det på din server.
  2. Ændr derefter koden i det downloadede bibliotek for at ændre målværten fra www.google-analytics.com til dit eget domænenavn ved hjælp af find-erstat.
  3. Erstat linket fra standard Google Analytics-scriptet i din codebase til det modificerede.
  4. Opret et proxy-slutpunkt til Google Analytics-servere i din bagende. Et vigtigt skridt her er at desuden opdage klientens IP-adresse og skrive den eksplicit i anmodninger til Google Analytics-servere om at bevare korrekt lokalitetsdetektion.
  5. Test resultaterne. Du er færdig!

Den fulde tekniske implementering gennemgang

Al koden og de beskrevne trin nedenfor er tilgængelige på GitHub. Beskrivelsen nedenfor forklarer de grundlæggende metoder, og selvfølgelig kan den foreslåede tilgang forbedres for at være endnu mere "anti-blokering."

I Google Analytics starter du med at anskaffe et unikt sporings-id til din ejendom (webservice). Vi bruger UA-98253329-1 sporings-id i denne artikel til demonstrationen. Glem ikke at udskifte sporingskoden til din.

Google foreslår at tilføje denne minificerede kode til dine webservices for at aktivere analyser:

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

Med få ord indlæser denne kode Google Analytics JavaScript-biblioteket, hvis det ikke blev indlæst før ved at indsætte script-tagget i dokumentet. Dette bibliotek inkluderer al logikken i analysesamlingen, og det er det eneste, vi har brug for for at fortsætte.

Trin 1: Download og patch Googles analysebibliotek

Download scriptet direkte fra //www.google-analytics.com/analytics.js , åbn det med en hvilken som helst teksteditor og erstat alle forekomster af:

www.google-analytics.com

med denne nøjagtige streng:

"+location.host+"/analytics

Ved at lappe analysebiblioteket på denne måde begynder det at stille anmodninger til den lokale vært ( my.domain.com/analytics) slutpunkter i stedet for www.google-analytics.com . Placer denne patched analytics.js- fil på din server efter udskiftningen.

Trin 2: Udskift analysescriptet med det patchede

Lad os ændre Google Analytics-indlejringskoden på den måde, så den bruger vores patchede bibliotek i stedet for standardkoden:

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

Bemærk, at browseren her vil søge efter det patchede analysescript i dokumentets rod på din server, i dette tilfælde my.domain.com/analytics.js. Kontroller, om du placerer scriptet i dokumentets rod eller har ændret stien i script-tagget ovenfor. Du kan også kontrollere resultaterne ved at køre en test på din lokale server (se readme for at køre GitHub-eksemplet).

Du bør se noget som dette i browserens udviklerværktøjer:

I sidste ende vil vi have den handling at downloade din patched analytics.js til at returnere et vellykket svar - en status 200 (OK) eller 304 (ikke ændret). Men på dette tidspunkt skal anmodningen til my.domain.com/analytics/collect svare med status 404, da vi endnu ikke har implementeret proxyserveren.

Trin 3: Implementering af den enkleste proxyserver

Nu skal vi kode lidt. Vores mål er at implementere proxyserveren, som transporterer vores analyseanmodninger fra vores server til den rigtige Google Analytics-server. Vi kan gøre dette på mange måder, men lad os som eksempel bruge Node.js og Express.js med express-http-proxy-pakken.

Når vi samler alle filerne i eksemplet (se GitHub), skal vi ende med følgende JavaScript-serverkode:

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");

Et par sidste linjer her gør proxying. Det eneste trick, vi gør her, er i stedet for bare proxy, vi registrerer og tilføjer klientens IP-adresse eksplicit i form af en målingsprotokol URL-parameter. Dette er nødvendigt for at indsamle nøjagtige placeringsdata, fordi alle anmodninger til Google Analytic oprindeligt kommer fra vores servers IP-adresse, som forbliver konstant.

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.

Det sidste mulige trin, hvis du vil implementere en solid løsning, er at sende analyser direkte fra serveren ved hjælp af serverbiblioteker, der er tilgængelige på forskellige sprog (NodeJS, Python, Ruby, PHP). Denne tilgang vil helt sikkert undgå indholdsblokkere, da enhver anmodning til analyseservere kommer direkte fra vores servere.

Igen er demo-applikationen tilgængelig på GitHub, er du velkommen til at teste den! Fortæl mig, hvis du har feedback eller interessante oplevelser ved hjælp af denne tilgang.

Tak for læsningen!