چگونه Yandex Metrica را به وب‌سایت خود اضافه کنیم؟ راهنمای راه‌اندازی گام به گام، Webvisor و تعمیر نشان Informer

به عنوان یک استودیوی مستقل بازی‌سازی یا تولیدکننده محتوا، اندازه‌گیری اینکه بازدیدکنندگان وب‌سایت شما کدام مقالات را مطالعه می‌کنند، روی کجای صفحه کلیک می‌کنند و چگونه با نشان‌های فروشگاه تعامل دارند، بسیار حائز اهمیت است. اگرچه Google Analytics یک استاندارد رایج است، اما به لطف قابلیت‌های رایگانی همچون Webvisor (بازپخش جلسه / Session Replay)، نقشه کلیک (Clickmap)، نقشه اسکرول (Scroll Map) و نشان بصری شمارنده (Informer)، سرویس Yandex Metrica (Yandex.Metrika) یک ابزار تحلیلی قدرتمند برای توسعه‌دهندگان محسوب می‌شود.

ما در Arar Games، در جریان بهینه‌سازی پرتال توسعه بازی خود یعنی Mayhem Corporation (mayhemcorporation.com) (که از سال ۲۰۱۱ فعال است) برای دستگاه‌های تلفن همراه (واکنش‌گرا / Responsive)، متوجه شدیم که شمارنده و نشان گرافیکی Yandex Metrica ما مربوط به سال ۲۰۱۲ در منوی سمت چپ اکنون به صورت یک تصویر شکسته نمایش داده می‌شود.

نشان قدیمی Yandex Metrica مربوط به سال ۲۰۱۲ با آدرس bs.yandex.ru که در مرورگرهای امروزی به صورت یک آیکون شکسته نمایش داده می‌شود.

در این راهنما، نحوه ایجاد یک تگ (Tag) جدید در Yandex Metrica از صفر، ادغام کد به‌روز شده tag.js در وب‌سایت و تعمیر نشان خراب Informer از منبع قدیمی bs.yandex.ru با پشتیبانی در برابر AdBlocker را به صورت گام به گام به اشتراک می‌گذاریم.

---

۱. ایجاد تگ جدید (Tag) در Yandex Metrica

پس از ورود به حساب کاربری Yandex خود در metrica.yandex.com، برای افزودن یک شمارنده وب‌سایت جدید به صفحه Add tag (metrica.yandex.com/add) می‌رویم. مراحل نصب شامل ۳ مرحله اصلی است:

مرحله ۱: Create Tag (اطلاعات تگ و تنظیمات Webvisor)

در اولین صفحه، اطلاعات هویتی و تنظیمات منطقه‌ای وب‌سایت را پیکربندی می‌کنیم:

۱. Tag name: نامی وارد کنید که به شما در شناسایی پروژه در پنل کمک کند (مثال: Mayhem Corporation). ۲. Website URL: دامنه اصلی وب‌سایت خود را بدون پروتکل (https://) وارد کنید (مثال: mayhemcorporation.com). ۳. Accept data only from the specified addresses: حتماً این گزینه را فعال بگذارید تا از کپی کردن Tag ID شما توسط وب‌سایت‌های دیگر و آلوده کردن آمار با ترافیک اسپم جلوگیری شود. ۴. Including subdomains: اگر می‌خواهید زیردامنه‌هایی مانند blog.yoursite.com نیز در همین شمارنده ثبت شوند، این گزینه را علامت بزنید. ۵. Time zone & Currency: منطقه زمانی مناسب (مثلاً (GMT+03:00) Istanbul یا منطقه زمانی محلی خود) را انتخاب کنید تا زمان بازنشانی روزانه آمار بازدیدکنندگان دقیق باشد و واحد پول را نیز مانند TRY (یا USD) مشخص کنید. ۶. Session Replay, scroll map, form analysis (Webvisor):

💡 مهم‌ترین قابلیت: با فعال کردن این گزینه، Yandex Metrica به شما امکان می‌دهد حرکات ماوس، عمق اسکرول و کلیک‌های بازدیدکنندگان روی کارت‌های بازی/مقالات را مانند یک ویدیوی ناشناس تماشا کنید.

---

مرحله ۲: Fill Out the Profile (تکمیل پروفایل وب‌سایت)

در مرحله دوم، Yandex Metrica برای ایجاد گزارش‌های مقایسه معیارهای صنعتی (Benchmark) دقیق، ۵ سوال کوتاه در مورد پروفایل مطرح می‌کند:

۱. Site Type (نوع وب‌سایت)

اگر پرتالی با تمرکز بر مقالات، راهنماهای فنی، اخبار یا مستندات را مدیریت می‌کنید، گزینه Informational website (Website with text content) را انتخاب کنید؛ اگر یک صفحه تبلیغاتی مستقیم برای برنامه/بازی است، گزینه Promo website را برگزینید:

۲. Industry (صنعت / حوزه فعالیت)

بسته به محتوای سایت خود، فناوری، رسانه، فرهنگ/هنر یا در صورتی که گزینه منطبقی در لیست وجود ندارد، گزینه پایانی Other را انتخاب نمایید:

۳. CMS (سیستم مدیریت محتوا)

اگر وب‌سایت شما از پلتفرم‌های آماده مانند WordPress، Drupal، Joomla یا Wix استفاده می‌کند، می‌توانید آن را از لیست انتخاب کنید. اگر مانند پرتال Mayhem Corporation ما از معماری اختصاصی PHP/MySQL یا .NET استفاده می‌کنید، گزینه Other را در انتهای لیست انتخاب کنید:

۴. سیستم CRM

اگر از هیچ سیستم CRM سازمانی استفاده نمی‌کنید، در این بخش نیز با انتخاب گزینه Other (یا Without CRM) ادامه دهید:

۵. Your Role in the Project (نقش شما در پروژه)

اگر یک توسعه‌دهنده مستقل یا بنیان‌گذار استودیو هستید، گزینه Business management یا Product management را انتخاب کرده و روی دکمه Continue کلیک کنید:

---

مرحله ۳: نصب قطعه کد (tag.js)

در آخرین مرحله، Yandex Metrica کد جدید شمارنده جاوا اسکریپت (tag.js) را ایجاد می‌کند که باید آن را بین تگ‌های <head> یا <body> وب‌سایت خود قرار دهید:

ساختار کد شمارنده ایجاد شده به صورت زیر است (به جای YOUR_TAG_ID شناسه تگ اختصاصی شما قرار می‌گیرد):

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

پس از افزودن کد به قالب اصلی وب‌سایت (index.php یا header.php) و آپلود آن بر روی سرور، با کلیک بر روی دکمه "Check tag" در صفحه بررسی کنید که شمارنده به صورت زنده کار می‌کند و سپس با زدن "Get started" وارد داشبورد تحلیلی خود شوید.

---

۲. تعمیر نشان بصری خراب Yandex Metrica (Informer) و محافظت در برابر AdBlocker

در وب‌سایت‌هایی که در سال‌های ۲۰۱۱ تا ۲۰۱۴ ایجاد شده‌اند، نشان آماری فیروزه‌ای نمادین 88x31 پیکسلی Yandex Metrica (Informer) با آدرس قدیمی زیر فراخوانی می‌شد:

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

از آنجا که Yandex در طول سال‌ها سرور bs.yandex.ru و اسکریپت قدیمی watch.js را بازنشسته کرده است، این آدرس اکنون خطای HTTP 404 Not Found را برمی‌گرداند و موجب نمایش تصویر خراب در صفحه می‌شود.

راه‌حل ۱: اندپوینت به‌روز شده informer.yandex.ru

برای راه‌اندازی نشان بصری، منبع تصویر را به سرویس جدید Informer شرکت Yandex هدایت می‌کنیم (https://informer.yandex.ru/informer/...).

راه‌حل ۲: فال‌بک محلی (onerror) برای بازدیدکنندگان دارای AdBlocker

امروزه بسیاری از گیمرها و توسعه‌دهندگان از AdBlocker (مانند uBlock Origin، Brave Shield و غیره) در مرورگرهای خود استفاده می‌کنند. زمانی که مسدودکننده‌های تبلیغات دامنه‌های تحلیلی را مسدود می‌کنند، تصویر نشان ممکن است بارگذاری نشود. برای جلوگیری از برهم خوردن چیدمان سایت در هر شرایطی، یک کپی 88x31 پیکسلی از نشان را در سرور خودمان (images/yandex_metrica_badge.png) نگهداری کرده و با ویژگی 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.Metrika"
        title="Yandex.Metrika: 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 -->

پس از این تنظیمات، نشان Yandex Metrica در منوی سمت چپ Mayhem Corporation هم در مرورگرهای معمولی با آمار لحظه‌ای و هم در مرورگرهای دارای AdBlocker بدون هیچ تصویر شکسته‌ای به درستی نمایش داده می‌شود:

نشان فعال Yandex Metrica Informer در منوی سمت چپ mayhemcorporation.com/mayhem/index.php پس از به‌روزرسانی.

نشان فیروزه‌ای رنگ 88x31 پیکسلی Informer که خلاصه بازدیدهای صفحه، دفعات مراجعه و بازدیدکنندگان یکتا را نمایش می‌دهد.

---

۳. وب‌سایت و بازی‌های ما (Arar Games)

وب‌سایت ما

• Mayhem Corporation: پرتال اینترنتی ما حاوی مقالات فنی در مورد توسعه بازی و XNA / MonoGame.
  mayhemcorporation.com

بازی‌های ما

• Blocked: Pixel Panzer: بازی اکشن و آرکید تانک پیکسلی دو بعدی.
  Google Play | Microsoft Store
• Paint Trek: بازی آرکید و معمایی فضایی دو بعدی.
  Google Play | Microsoft Store
• Space Dodger: بازی آرکید فضایی دو بعدی مبتنی بر عکس‌العمل سریع.
  Google Play

شبکه‌های اجتماعی

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