Cara Menambahkan Yandex Metrica ke Situs Web Anda: Panduan Instalasi Langkah demi Langkah, Webvisor, dan Perbaikan Lencana Informer

Sebagai studio game indie atau pembuat konten, sangat penting untuk mengukur artikel mana yang dibaca oleh pengunjung situs web Anda, bagian halaman mana yang mereka klik, dan bagaimana mereka berinteraksi dengan lencana toko Anda. Meskipun Google Analytics merupakan standar yang umum, Yandex Metrica (Yandex.Metrika) adalah alat analitik yang sangat andal bagi para developer berkat fitur gratisnya seperti Webvisor (Perekaman Sesi / Session Replay), Peta Klik (Clickmap), Peta Gulir (Scroll Map), dan Lencana Penghitung Visual (Informer).

Di Arar Games, saat kami memodernisasi portal pengembangan game kami Mayhem Corporation (mayhemcorporation.com)—yang telah mengudara sejak tahun 2011—agar responsif di perangkat seluler, kami menyadari bahwa counter dan lencana visual Yandex Metrica kami dari tahun 2012 di menu sebelah kiri tampak rusak.

Lencana Yandex Metrica lama dengan alamat bs.yandex.ru dari tahun 2012 muncul sebagai ikon rusak di browser modern.

Dalam panduan ini, kami membagikan panduan langkah demi langkah untuk membuat tag Yandex Metrica baru dari awal, mengintegrasikan kode tag.js terbaru ke situs web Anda, dan memperbaiki lencana Informer rusak yang berasal dari bs.yandex.ru lama dengan perlindungan AdBlocker.

---

1. Membuat Tag Baru di Yandex Metrica

Setelah masuk ke metrica.yandex.com dengan akun Yandex Anda, buka layar Add tag (metrica.yandex.com/add) untuk menambahkan counter situs web baru. Pengaturan ini terdiri dari 3 langkah utama:

Langkah 1: Create Tag (Informasi Tag dan Pengaturan Webvisor)

Pada layar pertama, kita mengonfigurasi identitas dasar dan pengaturan wilayah situs web kita:

1. Tag name: Masukkan nama yang membantu Anda mengidentifikasi proyek di dasbor (misalnya: Mayhem Corporation).
2. Website URL: Masukkan domain utama situs web Anda tanpa protokol (https://) (misalnya: mayhemcorporation.com).
3. Accept data only from the specified addresses: Pastikan untuk membiarkan kotak centang ini aktif untuk mencegah situs web lain menyalin ID counter Anda dan mencemari statistik Anda (lalu lintas spam).
4. Including subdomains: Anda dapat mencentangnya jika ingin mengumpulkan subdomain seperti blog.yoursite.com dalam counter yang sama.
5. Time zone & Currency: Pilih zona waktu yang sesuai, misalnya (GMT+03:00) Istanbul, serta mata uang seperti TRY (atau USD).
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 Fitur Paling Krusial: Saat opsi ini diaktifkan, Yandex Metrica memungkinkan Anda memantau gerakan kursor mouse pengunjung, kedalaman gulir, dan kartu game/artikel mana yang mereka klik layaknya rekaman video yang dianonimkan.

---

Langkah 2: Fill Out the Profile (Mengonfigurasi Profil Situs)

Pada langkah kedua, Yandex Metrica menanyakan 5 pertanyaan profil singkat untuk menghasilkan laporan tolok ukur (benchmark) industri yang akurat bagi situs Anda:

1. Site Type (Jenis Situs)

Jika Anda mengelola portal yang sebagian besar berisi artikel, panduan teknis, berita, atau dokumentasi, pilih Informational website (Website with text content); jika itu adalah halaman promosi langsung untuk aplikasi/game, pilih Promo website:

2. Industry (Industri)

Berdasarkan konten situs web Anda, pilih teknologi, media, budaya/seni, atau jika tidak ada padanan persis dalam daftar, pilih opsi Other di bagian paling bawah:

3. CMS (Content Management System)

Jika situs Anda menggunakan platform siap pakai seperti WordPress, Drupal, Joomla, atau Wix, Anda dapat memilihnya dari daftar. Jika Anda menggunakan arsitektur khusus PHP/MySQL atau .NET yang Anda kembangkan sendiri seperti portal Mayhem Corporation kami, pilih opsi Other di bagian bawah daftar:

4. Sistem CRM

Jika Anda tidak menggunakan CRM korporat apa pun, Anda dapat melanjutkan dengan memilih Other (atau Without CRM) di bidang ini:

5. Your Role in the Project (Peran Anda dalam Proyek)

Jika Anda adalah developer independen atau pendiri studio, pilih Business management atau Product management dan klik tombol Continue:

---

Langkah 3: Pemasangan Potongan Kode (tag.js)

Pada langkah terakhir, Yandex Metrica menghasilkan kode counter JavaScript (tag.js) terbaru untuk ditempatkan di antara tag <head> atau <body> di situs web Anda:

Struktur kode counter yang diperbarui adalah sebagai berikut (ganti YOUR_TAG_ID dengan nomor counter Anda sendiri):

<!-- Yandex.Metrika counter -->
<script type="text/javascript">
    (function(m,e,t,r,i,k,a){
        m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
        m[i].l=1*new Date();
        for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
        k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
    })(window, document,'script','https://mc.yandex.ru/metrika/tag.js?id=YOUR_TAG_ID', 'ym');

    ym(YOUR_TAG_ID, 'init', {
        ssr:true,
        webvisor:true,
        clickmap:true,
        ecommerce:"dataLayer",
        referrer: document.referrer,
        url: location.href,
        accurateTrackBounce:true,
        trackLinks:true
    });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/YOUR_TAG_ID" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->

Setelah menambahkan kode ke templat utama situs web Anda (index.php atau header.php) dan mengunggahnya ke server, Anda dapat memverifikasi bahwa counter berfungsi secara langsung dengan mengeklik tombol "Check tag" di layar, lalu beralih ke dasbor analitik Anda dengan mengeklik "Get started".

---

2. Memperbaiki Lencana Visual Yandex Metrica (Informer) yang Rusak dan Perlindungan AdBlocker

Pada situs web yang dibuat antara tahun 2011 dan 2014, lencana statistik pirus 88x31 piksel yang ikonik (Informer) dari Yandex Metrica dimuat menggunakan alamat lama berikut:

//bs.yandex.ru/informer/OLD_TAG_ID/3_1_3FFEEFFF_1FDECFFF_1_pageviews

Karena Yandex telah menghentikan server bs.yandex.ru dan skrip watch.js lama selama bertahun-tahun, alamat ini sekarang mengembalikan respons HTTP 404 Not Found dan menampilkan ikon gambar rusak di halaman.

Solusi 1: Endpoint informer.yandex.ru yang Diperbarui

Untuk mengaktifkan lencana visual, kita mengarahkan sumber gambar ke layanan Informer Yandex saat ini (https://informer.yandex.ru/informer/...).

Solusi 2: Fallback Lokal (onerror) untuk Pengunjung Pengguna AdBlocker

Saat ini, banyak gamer dan developer menggunakan AdBlocker (uBlock Origin, Brave Shield, dll.) di browser mereka. Ketika pemblokir iklan memblokir domain analitik, gambar lencana mungkin tetap gagal dimuat. Untuk memastikan tata letak desain tidak rusak dalam kondisi apa pun, kami menyimpan salinan lencana 88x31 piksel di server kami sendiri (images/yandex_metrica_badge.png) dan mengaktifkannya secara otomatis menggunakan atribut onerror:

<!-- Yandex.Metrika informer -->
<a href="https://metrica.yandex.com/stat/?id=YOUR_TAG_ID&amp;from=informer"
   target="_blank" rel="nofollow">
   <img src="https://informer.yandex.ru/informer/YOUR_TAG_ID/3_1_3FFEEFFF_1FDECFFF_1_pageviews"
        onerror="this.onerror=null;this.src='images/yandex_metrica_badge.png';"
        style="width:88px; height:31px; border:0; border-radius:3px;"
        alt="Yandex.Metrica"
        title="Yandex.Metrica: data hari ini (tampilan halaman, kunjungan, dan pengunjung unik)"
        class="ym-advanced-informer" data-cid="YOUR_TAG_ID" data-lang="tr" />
</a>
<!-- /Yandex.Metrika informer -->

Setelah penyesuaian ini, lencana Yandex Metrica di menu kiri Mayhem Corporation ditampilkan dengan statistik langsung di browser normal dan tanpa ikon rusak di browser dengan AdBlocker aktif:

Lencana Yandex Metrica Informer aktif di menu kiri mayhemcorporation.com/mayhem/index.php setelah pembaruan.

Lencana Informer pirus 88x31 yang merangkum data tampilan halaman, kunjungan, dan pengunjung unik.

---

3. Situs Web dan Game Kami (Arar Games)

Situs Web Kami

• Mayhem Corporation: Portal web kami yang menyajikan artikel teknis tentang pengembangan game dan XNA / MonoGame.
  mayhemcorporation.com

Game Kami

• Blocked: Pixel Panzer: Game aksi dan arcade tank piksel 2D.
  Google Play | Microsoft Store
• Paint Trek: Game arcade dan puzzle 2D bertema luar angkasa.
  Google Play | Microsoft Store
• Space Dodger: Game arcade luar angkasa 2D berbasis refleks.
  Google Play

Media Sosial

• TikTok: @arargamesstudio
• Instagram: @arargamesstudio
• X (Twitter): @arargamesstudio
• YouTube: @koreaaria
• Threads: @arargamesstudio
• Facebook: arargamesstudio