Як запобігти блокуванню рекламних даних вашими аналітичними даними

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

Стаття з 2017-х років нижче пояснює використані принципи, що лежать в основі цих рішень, а також вони описані в readme рішення.

Коли ваш продукт тільки починає працювати, кожен користувач має значення. Так само як і дані про те, як вони взаємодіють із вашим продуктом.

Якщо ви пробували використовувати аналітичні рішення, такі як Google Analytics, можливо, ви зіткнулися з проблемою, коли вашу колекцію аналітики заблокували блокувальники реклами.

За даними PageFair, у 2017 році до 30% користувачів Інтернету використовують блокувальники реклами, і ця кількість постійно зростає.

У цій статті буде розказано про деякі технічні підходи, які ви можете застосувати, щоб блокувати рекламу також не блокували вашу аналітику. У цій статті ми використовуватимемо Google Analytics, хоча більша частина цього може бути застосована до інших інструментів аналітики.

Деякі способи можна обійти блокувальники реклами

Майже всі блокатори реклами працюють за допомогою однакових методів: вони забороняють деякі запити браузера http (s) щодо вмісту за URL-адресами, які відповідають певній масці, з їх бази фільтрації.

Більшість блокаторів реклами за замовчуванням вносять у чорний список www.google-analytics.com і блокують будь-які спроби бібліотеки JavaScript Google Analytics надіслати або отримати дані зі своїх серверів аналітики.

На щастя для розробників, блокувальники реклами за замовчуванням не блокують запити на наші власні доменні імена , оскільки це може пошкодити функціональність веб-програми. Цей пробіл виявляє спосіб уникнути блокування аналітики, поки ваша веб-служба не стане досить відомою, оскільки деякі її URL-адреси з’являться у фільтрах блокування реклами.

Насправді, навіть після того, як деякі URL-адреси з’являються в основі фільтрації вмісту, ви можете почати грати з блокувальниками реклами, вигадуючи жахливі речі, наприклад, щогодинні зміни аналітичних URL-адрес (хоча це виходить за рамки цієї статті). Деякі з цих підходів застосовуються такими службами, як DataUnlocker.com та Adtoniq, які пропонують користувачам досвід без блокування реклами, навіть коли ввімкнено блокувальник реклами.

Пояснення на високому рівні того, що ми будемо робити

У цій статті ми припустимо, що у нас немає обмежень на дозвіл на стороні сервера. Ми напишемо демонстраційне рішення (кілька рядків коду) для платформи 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 (ОК) або 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!