Как да предотвратите блокирането на данните за анализ от блокиращи реклами

TL; DR Очаквайте скоро услугата dataunlocker.com (абонирайте се!), Заедно с прототипа с отворен код, който можете да използвате за Google Analytics или Google Tag Manager (актуализация за 2020 г.).

Статията от 2017 г. по-долу обяснява използваните принципи зад тези решения, както и е описана в readme на решението.

Когато вашият продукт тепърва започва, всеки един потребител има значение. Данните за това как те взаимодействат с вашия продукт също.

Ако сте опитали да използвате решения за анализ като Google Analytics, може да сте се сблъскали с проблем, при който колекцията ви за анализ е била блокирана от рекламни блокери.

Според PageFair до 30% от потребителите на интернет използват рекламни блокери през 2017 г. и този брой непрекъснато расте.

Тази статия ще обясни някои технически подходи, които можете да предприемете, за да предотвратите блокирането на реклами също да блокира вашия анализ. В тази статия ще използваме Google Analytics, въпреки че голяма част от това може да се приложи към други инструменти за анализ.

Някои начини можете да заобиколите блокиращите реклами

Почти всички рекламни блокери работят по едни и същи методи: те забраняват някои http (s) браузърни заявки за съдържание в URL адреси, които съответстват на определена маска от тяхната база за филтриране.

Повечето рекламни блокери по подразбиране поставят в черния списък www.google-analytics.com и блокират всички опити на JavaScript библиотеката на Google Analytics да изпраща или извлича данните от своите сървъри за анализ.

За щастие за разработчиците, рекламните блокери не блокират заявки към собствените ни имена на домейни по подразбиране, защото това може да навреди на функционалността на уеб приложението. Тази празнина разкрива начин да се избегне блокирането на анализи, докато вашата уеб услуга стане достатъчно известна, за да се появят някои от нейните URL адреси във филтрите за блокиране на реклами.

Всъщност, дори след като някои URL адреси се появят в базата за филтриране на съдържание, можете да започнете да играете с рекламни блокери, като измисляте ужасни неща, като например променящи се на час URL адреси за анализ (макар че това е извън обхвата на тази статия). Някои от тези подходи се прилагат от услуги като DataUnlocker.com и Adtoniq, които предлагат на потребителите изживяване без adblocker, дори когато са включени рекламни блокери.

Обяснение на високо ниво за това, което ще направим

В тази статия ще приемем, че нямаме ограничения за разрешение от страна на сървъра. Ще напишем демонстрационното решение (няколко реда код) за платформата Node.js. След като разберете как работи това, трябва да можете да пренесете това решение на всеки език за програмиране или платформа.

Решението, което ще опиша, е доста минимално и ако сте опитен уеб разработчик, може да ви отнеме само няколко минути, за да го поставите на място.

Ще използваме прост прокси подход, без да е необходимо да се впускаме в протокола за измерване на Google Analytics. Накратко, решението изглежда по следния начин:

  1. Първо изтеглете самата библиотека на JavaScript на Google Analytics и го хоствайте на вашия сървър.
  2. След това променете кода в изтеглената библиотека, за да промените целевия хост от www.google-analytics.com на вашето собствено име на домейн, използвайки find-replace.
  3. Заменете връзката от скрипта на Google Analytics по подразбиране във вашата кодова база на модифициран.
  4. Създайте прокси крайна точка към сървърите на Google Analytics на вашия заден край. Важна стъпка тук е допълнителното откриване на IP адреса на клиента и изписването му изрично в заявки към сървъри на Google Analytics, за да се запази правилното откриване на местоположението.
  5. Тествайте резултатите. Приключихте!

Пълното техническо ръководство за изпълнение

Всички кодове и описаните стъпки по-долу са достъпни в GitHub. Описанието по-долу обяснява основите на метода и, разбира се, предложеният подход може да бъде подобрен, за да бъде още по-„антиблокиращ“.

В Google Analytics започвате с придобиване на уникален проследяващ идентификатор за вашия имот (уеб услуга). В тази статия ще използваме UA-98253329–1 проследяващ идентификатор за демонстрация. Не забравяйте да замените проследяващия код с вашия.

Google предлага да добавите този минифициран код към вашите уеб услуги, за да активирате анализи:

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

С няколко думи този код зарежда JavaScript библиотеката на Google Analytics, ако не е била заредена преди, като вмъква маркера на скрипта в документа. Тази библиотека включва цялата логика на събирането на анализи и това е единственото нещо, което трябва да продължим.

Стъпка 1: Изтеглете и коригирайте библиотеката за анализ на Google

Изтеглете скрипта директно от //www.google-analytics.com/analytics.js , отворете го с всеки текстов редактор и заменете всички случаи на:

www.google-analytics.com

с точно този низ:

"+location.host+"/analytics

Като поправя аналитичната библиотека по този начин, тя ще започне да отправя заявки към локалните хостове ( my.domain.com/analytics) крайни точки вместо www.google-analytics.com . Поставете този закърпен файл analytics.js на вашия сървър след замяната.

Стъпка 2: Заменете скрипта за анализ с изправения

Нека модифицираме кода за вграждане на Google Analytics по този начин, така че да използва нашата закърпена библиотека вместо стандартната:

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

Имайте предвид, че тук браузърът ще търси закърпения скрипт за анализ в корена на документа на вашия сървър, в този случай my.domain.com/analytics.js. Проверете дали сте поставили скрипта в корена на документа или сте променили пътя в маркера на скрипта по-горе. Можете също да проверите резултатите, като изпълните тест на вашия локален сървър (вижте readme за това как да стартирате примера на GitHub).

Трябва да видите нещо подобно в инструментите за разработчици на браузъра:

В крайна сметка искаме актът на изтегляне на вашия закърпен analytics.js да върне успешен отговор - състояние 200 (OK) или 304 (не модифицирано). Но в този момент заявката към my.domain.com/analytics/collect трябва да отговори със статус 404, тъй като все още не сме внедрили прокси сървъра.

Стъпка 3: Внедряване на най-простия прокси сървър

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!