Cara mencegah data analitik Anda diblokir oleh pemblokir iklan

TL; DR Ada layanan dataunlocker.com segera hadir (berlangganan!), Bersama dengan prototipe sumber terbuka yang dapat Anda gunakan untuk Google Analytics atau Google Pengelola Tag (pembaruan tahun 2020).

Artikel dari tahun 2017 di bawah ini menjelaskan prinsip yang digunakan di balik solusi ini, serta dijelaskan dalam readme solusi.

Saat produk Anda baru saja diluncurkan, setiap pengguna penting. Begitu juga dengan data tentang bagaimana mereka berinteraksi dengan produk Anda.

Jika Anda telah mencoba menggunakan solusi analitik seperti Google Analytics, Anda mungkin menghadapi masalah di mana pengumpulan analitik Anda diblokir oleh pemblokir iklan.

Menurut PageFair, hingga 30% pengguna Internet menggunakan pemblokir iklan pada tahun 2017, dan jumlah ini terus bertambah.

Artikel ini akan menjelaskan beberapa pendekatan teknis yang dapat Anda lakukan untuk mencegah pemblokir iklan juga memblokir analitik Anda. Kami akan menggunakan Google Analytics dalam artikel ini, meskipun sebagian besar dari ini dapat diterapkan ke alat analitik lainnya.

Beberapa cara Anda dapat melewati pemblokir iklan

Hampir semua pemblokir iklan bekerja melalui metode yang sama: mereka melarang beberapa http (s) permintaan browser untuk konten di URL yang cocok dengan mask tertentu dari basis pemfilterannya.

Sebagian besar pemblokir iklan memasukkan www.google-analytics.com ke dalam daftar hitam secara default, dan memblokir upaya apa pun oleh pustaka JavaScript Google Analytics untuk mengirim atau mengambil data dari server analytics.

Beruntung bagi pengembang, pemblokir iklan tidak memblokir permintaan ke nama domain kami sendiri secara default, karena melakukan ini dapat merusak fungsionalitas aplikasi web. Celah ini mengungkapkan cara untuk menghindari pemblokiran analitik hingga layanan web Anda menjadi cukup terkenal karena beberapa URL-nya muncul di filter pemblokir iklan.

Faktanya, bahkan setelah beberapa URL muncul di basis pemfilteran konten, Anda dapat mulai bermain-main dengan pemblokir iklan dengan menciptakan hal-hal buruk, seperti mengubah URL analitik setiap jam (meskipun ini di luar cakupan artikel ini). Beberapa dari pendekatan ini diterapkan oleh layanan seperti DataUnlocker.com dan Adtoniq, yang menawarkan pengalaman bebas-iklan kepada pengguna bahkan ketika pemblokir iklan dihidupkan.

Penjelasan tingkat tinggi tentang apa yang akan kita lakukan

Pada artikel ini, kami akan menganggap bahwa kami tidak memiliki batasan izin di sisi server. Kami akan menulis solusi demo (beberapa baris kode) untuk platform Node.js. Setelah Anda memahami cara kerjanya, Anda harus dapat mentransfer solusi ini ke bahasa atau platform pemrograman apa pun.

Solusi yang akan saya jelaskan sangat minim, dan jika Anda seorang pengembang web berpengalaman, mungkin hanya perlu beberapa menit untuk menerapkannya.

Kami akan menggunakan pendekatan proxy sederhana tanpa perlu menyelami protokol pengukuran Google Analytics. Singkatnya, solusinya terlihat sebagai berikut:

  1. Pertama, unduh pustaka JavaScript Google Analytics itu sendiri dan hosting di server Anda.
  2. Kemudian ubah kode di pustaka yang diunduh untuk mengubah host target dari www.google-analytics.com ke nama domain Anda sendiri menggunakan cari-ganti.
  3. Ganti tautan dari skrip Google Analytics default di basis kode Anda ke yang dimodifikasi.
  4. Buat titik akhir proxy ke server Google Analytics di bagian belakang Anda. Satu langkah penting di sini adalah mendeteksi tambahan alamat IP klien dan menuliskannya secara eksplisit dalam permintaan ke server Google Analytics untuk mempertahankan deteksi lokasi yang benar.
  5. Uji hasilnya. Kamu sudah selesai!

Panduan implementasi teknis lengkap

Semua kode dan langkah-langkah yang dijelaskan di bawah ini tersedia di GitHub. Deskripsi di bawah menjelaskan dasar-dasar metode, dan tentu saja pendekatan yang disarankan dapat ditingkatkan menjadi lebih "anti-pemblokiran".

Di Google Analytics, Anda mulai dengan mendapatkan ID pelacakan unik untuk properti Anda (layanan web). Kami akan menggunakan ID pelacakan UA-98253329–1 di artikel ini untuk demonstrasi. Jangan lupa untuk mengganti kode pelacakan dengan milik Anda.

Google menyarankan untuk menambahkan kode yang diperkecil ini ke layanan web Anda untuk mengaktifkan analitik:

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

Singkatnya, kode ini memuat pustaka JavaScript Google Analytics jika tidak dimuat sebelumnya dengan memasukkan tag skrip ke dokumen. Pustaka ini mencakup semua logika pengumpulan analitik, dan itu adalah satu-satunya hal yang perlu kami lanjutkan.

Langkah 1: Unduh dan tambal pustaka analitik Google

Unduh skrip langsung dari //www.google-analytics.com/analytics.js , buka dengan editor teks apa pun, dan ganti semua kemunculan:

www.google-analytics.com

dengan string yang tepat ini:

"+location.host+"/analytics

Dengan menambal pustaka analitik dengan cara ini, itu akan mulai membuat permintaan ke titik akhir host lokal ( domainku.com/analytics) alih-alih www.google-analytics.com . Tempatkan file analytics.js yang ditambal ini di server Anda setelah penggantian.

Langkah 2: Ganti skrip analitik dengan yang telah ditambal

Mari kita ubah kode penyematan Google Analytics dengan cara itu sehingga menggunakan pustaka yang ditambal alih-alih yang default:

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

Perhatikan bahwa di sini browser akan mencari script analytics yang ditambal di root dokumen server Anda, dalam hal ini, my.domain.com/analytics.js. Periksa apakah Anda meletakkan skrip di root dokumen atau mengubah jalur di tag skrip di atas. Anda juga dapat memeriksa hasilnya dengan menjalankan pengujian di server lokal Anda (lihat readme untuk mengetahui cara menjalankan contoh GitHub).

Anda akan melihat sesuatu seperti ini di alat pengembang browser:

Pada akhirnya, kami ingin tindakan mengunduh analytics.js Anda yang telah ditambal untuk mengembalikan respons yang berhasil - status 200 (OK) atau 304 (tidak diubah). Tetapi pada titik ini, permintaan ke my.domain.com/analytics/collect harus merespons dengan status 404, karena kami belum menerapkan server proxy.

Langkah 3: Menerapkan Server Proxy Paling Sederhana

Sekarang kita akan membuat kode sedikit. Tujuan kami adalah untuk menerapkan server proxy, yang akan mengirimkan permintaan analitik kami dari server kami ke server Google Analytics yang sebenarnya. Kita dapat melakukan ini dengan banyak cara, tetapi sebagai contoh, mari gunakan Node.js dan Express.js dengan paket proxy-http ekspres.

Mengumpulkan semua file dalam contoh bersama-sama (lihat GitHub), kita akan mendapatkan kode server JavaScript berikut:

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

Beberapa baris terakhir di sini melakukan proxying. Satu-satunya trik yang kami lakukan di sini adalah alih-alih hanya membuat proxy, kami mendeteksi dan menambahkan alamat IP klien secara eksplisit dalam bentuk parameter URL protokol pengukuran. Ini diperlukan untuk mengumpulkan data lokasi yang tepat, karena semua permintaan ke Google Analytic awalnya berasal dari alamat IP server kami, yang tetap konstan.

Setelah menyiapkan proxy server kami, kami dapat memeriksa apakah permintaan ke titik akhir / kumpulkan kami sekarang berhasil mengembalikan status HTTP 200 OK:

Kami dapat menggunakan, misalnya, koneksi anonim untuk memverifikasi bahwa lokasi juga diambil dengan benar.

Pendekatan "server proxy" ini adalah solusi cepat untuk analitik yang memungkinkan layanan Anda menghindari pemblokir iklan. Tetapi metode ini bergantung pada sisi browser, dan jika skrip browser karena alasan tertentu tidak mengirimkan informasi analitik ke server kami, kami tidak mendapatkan apa-apa.

Langkah terakhir yang mungkin jika Anda ingin menerapkan solusi yang solid adalah mengirim analitik langsung dari server dengan menggunakan pustaka sisi server yang tersedia untuk berbagai bahasa (NodeJS, Python, Ruby, PHP). Pendekatan ini pasti akan menghindari pemblokir konten, karena setiap permintaan ke server analitik datang langsung dari server kami.

Sekali lagi, aplikasi demo tersedia di GitHub, silakan mengujinya! Beri tahu saya jika Anda memiliki masukan atau pengalaman menarik menggunakan pendekatan ini.

Terima kasih sudah membaca!