Web Sitenize Yandex Metrica Nasıl Eklenir? Adım Adım Kurulum, Webvisor ve Informer Rozeti Tamiri

Bir bağımsız oyun stüdyosu veya içerik üreticisi olarak web sitenize gelen ziyaretçilerin hangi makaleleri okuduğunu, sayfanın neresine tıkladığını ve mağaza rozetlerinizle nasıl etkileşime girdiğini ölçümlemek oldukça önemlidir. Google Analytics yaygın bir standart olsa da, ücretsiz Webvisor (Oturum Kaydı / Session Replay), Tıklama Haritası (Clickmap), Kaydırma Haritası (Scroll Map) ve Görsel Sayaç Rozeti (Informer) özellikleriyle Yandex Metrica (Yandex.Metrika) geliştiriciler için güçlü bir analitik aracıdır.

Arar Games olarak, 2011 yılından beri yayında olan oyun geliştirme portalımız Mayhem Corporation (mayhemcorporation.com)'ı mobil cihazlara uyumlu (responsive) hale getirirken, sol menümüzde 2012 yılından kalma Yandex Metrica sayacımızın ve görsel rozetimizin artık kırık göründüğünü fark ettik.

2012 yılından kalma eski bs.yandex.ru adresli Yandex Metrica rozetinin güncel tarayıcılarda kırık ikon olarak görünmesi.

Bu rehberde; sıfırdan yeni bir Yandex Metrica etiketi (Tag) oluşturmayı, güncel tag.js kodunu sitenize entegre etmeyi ve eski bs.yandex.ru kaynaklı kırık Informer rozetini AdBlocker korumalı olarak tamir etmeyi adım adım paylaşıyoruz.

---

1. Yandex Metrica'da Yeni Etiket (Tag) Oluşturma

Yandex hesabınızla metrica.yandex.com adresine giriş yaptıktan sonra yeni bir web sitesi sayacı eklemek için Add tag (metrica.yandex.com/add) ekranına geçiyoruz. Kurulum 3 temel adımdan oluşur:

Adım 1: Create Tag (Etiket Bilgileri ve Webvisor Ayarı)

İlk ekranda sitemizin temel kimlik ve bölge ayarlarını yapılandırıyoruz:

1. Tag name: Panelde projenizi tanımanızı sağlayacak bir isim girin (Örn: Mayhem Corporation).
2. Website URL: Sitenizin ana alan adını protokol (https://) olmadan girin (Örn: mayhemcorporation.com).
3. Accept data only from the specified addresses: Başka sitelerin sizin sayaç ID'nizi kopyalayarak istatistiklerinizi kirletmesini (spam trafik) önlemek için bu kutucuğu mutlaka işaretli bırakın.
4. Including subdomains: Eğer blog.siteniz.com gibi alt alan adlarınızı da aynı sayaçta toplamak istiyorsanız işaretleyebilirsiniz.
5. Time zone & Currency: Günlük ziyaretçi sıfırlama saatlerinin Türkiye saatiyle uyumlu olması için (GMT+03:00) Istanbul ve para birimi olarak TRY (veya USD) seçin.
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 En Kritik Özellik: Bu seçeneği aktif ettiğinizde Yandex Metrica, ziyaretçilerin sitenizdeki fare hareketlerini, kaydırma derinliğini ve hangi oyun/makale kartlarına tıkladıklarını anonimleştirilmiş video kaydı gibi izlemenize olanak tanır.

---

Adım 2: Fill Out the Profile (Site Profilini Yapılandırma)

İkinci adımda Yandex Metrica, sitenizin sektörel kıyaslama (benchmark) raporlarını doğru üretebilmek için 5 kısa profil sorusu sorar:

1. Site Type (Site Türü)

Makale, teknik rehber, haber veya dokümantasyon ağırlıklı bir portal yönetiyorsanız Informational website (Website with text content); doğrudan uygulama/oyun tanıtım sayfasıysa Promo website seçeneğini işaretleyebilirsiniz:

2. Industry (Sektör)

Sitenizin içeriğine göre teknoloji, medya, kültür/sanat veya listede tam karşılığı yoksa en alttaki Other seçeneğini belirleyin:

3. CMS (İçerik Yönetim Sistemi)

Siteniz WordPress, Drupal, Joomla veya Wix gibi hazır bir altyapı kullanıyorsa listeden seçebilirsiniz. Bizim Mayhem Corporation portalımız gibi kendi yazdığınız özel bir PHP/MySQL veya .NET mimarisi kullanıyorsanız listenin altındaki Other seçeneğini işaretleyin:

4. CRM Sistemi

Herhangi bir kurumsal CRM kullanmıyorsanız bu alanda da Other (veya Without CRM) seçerek devam edebilirsiniz:

5. Your Role in the Project (Projedeki Rolünüz)

Bağımsız bir geliştirici veya stüdyo kurucusuysanız Business management ya da Product management seçeneğini işaretleyip Continue butonuna basın:

---

Adım 3: Code Snippet Kurulumu (tag.js)

Son adımda Yandex Metrica, sitenizin <head> veya <body> etiketleri arasına yerleştireceğiniz güncel JavaScript sayaç kodunu (tag.js) üretir:

Üretilen güncel sayaç kodunun yapısı şu şekildedir (YOUR_TAG_ID yerine kendi sayaç numaranız gelir):

<!-- 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 -->

Kodu sitenizin ana şablonuna (index.php veya header.php) ekleyip sunucuya gönderdikten sonra ekrandaki "Check tag" butonuna basarak sayacın canlıda çalıştığını doğrulayabilir ve "Get started" diyerek analitik panonuza geçebilirsiniz.

---

2. Kırık Yandex Metrica Görsel Rozetini (Informer) Tamir Etme ve AdBlocker Koruması

2011–2014 yıllarında kurulan web sitelerinde Yandex Metrica'nın 88x31 piksellik ikonik turkuaz istatistik rozeti (Informer) şu eski adresle çağrılıyordu:

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

Yandex yıllar içinde bs.yandex.ru sunucusunu ve eski watch.js betiğini kullanımdan kaldırdığı için bu adres artık HTTP 404 Not Found döndürüyor ve sayfada kırık resim ikonu oluşturuyor.

Çözüm 1: Güncel informer.yandex.ru Uç Noktası

Görsel rozeti çalıştırmak için resim kaynağını Yandex'in güncel Informer servisine (https://informer.yandex.ru/informer/...) yönlendiriyoruz.

Çözüm 2: AdBlocker Kullanan Ziyaretçiler İçin Yerel Fallback (onerror)

Günümüzde pek çok oyuncu ve geliştirici tarayıcısında AdBlocker (uBlock Origin, Brave Shield vb.) kullanıyor. Reklam engelleyiciler analitik alan adlarını engellediğinde, rozet görseli yine yüklenemeyebilir. Tasarımın hiçbir koşulda bozulmaması için rozetin 88x31 piksellik bir kopyasını kendi sunucumuzda (images/yandex_metrica_badge.png) barındırıyor ve onerror niteliğiyle otomatik devreye sokuyoruz:

<!-- 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: bugünün verileri (gösterimler, ziyaretler ve tekil ziyaretçiler)"
        class="ym-advanced-informer" data-cid="YOUR_TAG_ID" data-lang="tr" />
</a>
<!-- /Yandex.Metrika informer -->

Bu düzenlemenin ardından Mayhem Corporation sol menüsündeki Yandex Metrica rozeti hem normal tarayıcılarda canlı istatistiklerle hem de AdBlocker açık tarayıcılarda kırık ikon olmadan görüntülenir:

Güncelleme sonrası mayhemcorporation.com/mayhem/index.php sol menüsünde aktif Yandex Metrica Informer rozeti.

Sayfa gösterimi, ziyaret ve tekil ziyaretçi verilerini özetleyen 88x31 turkuaz Informer rozeti.

---

3. Web Sitemiz ve Oyunlarımız (Arar Games)

Web Sitemiz

• Mayhem Corporation: Oyun geliştirme ve XNA / MonoGame üzerine teknik yazıların yer aldığı web portalımız.
  mayhemcorporation.com

Oyunlarımız

• Blocked: Pixel Panzer: 2D piksel tank aksiyon ve arcade oyunu.
  Google Play | Microsoft Store
• Paint Trek: 2D uzay temalı arcade ve bulmaca oyunu.
  Google Play | Microsoft Store
• Space Dodger: Refleks odaklı 2D uzay arcade oyunu.
  Google Play

Sosyal Medya

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