كيفية إضافة Yandex Metrica إلى موقعك الإلكتروني: دليل التثبيت خطوة بخطوة، Webvisor، وإصلاح شارة Informer المعطلة

بصفتك استوديو ألعاب مستقلاً أو صانع محتوى، فإن قياس المقالات التي يقرؤها الزوار، وأين ينقرون في الصفحة، وكيف يتفاعلون مع شارات المتاجر الخاصة بك يُعد أمرًا بالغ الأهمية. على الرغم من أن Google Analytics يمثل معيارًا شائعًا، إلا أن Yandex Metrica (Yandex.Metrika) تُعد أداة تحليلية قوية للمطورين بفضل ميزاتها المجانية مثل Webvisor (تسجيل الجلسات / Session Replay)، وخريطة النقر (Clickmap)، وخريطة التمرير (Scroll Map)، وشارة العداد المرئي (Informer).

نحن في Arar Games، وأثناء جعل بوابة تطوير الألعاب الخاصة بنا Mayhem Corporation (mayhemcorporation.com)—الموجودة على الإنترنت منذ عام 2011—متجاوبة مع الأجهزة المحمولة (responsive)، لاحظنا أن عداد Yandex Metrica وشارتها المرئية المتبقية منذ عام 2012 في القائمة الجانبية اليسرى قد أصبحت تظهر كصورة معطلة.

ظهور شارة Yandex Metrica القديمة لعام 2012 بعنوان bs.yandex.ru كأيقونة صورة مكسورة في المتصفحات الحديثة.

في هذا الدليل؛ نشارك خطوة بخطوة كيفية إنشاء علامة (Tag) جديدة لـ Yandex Metrica من الصفر، ودمج كود tag.js المحدث في موقعك، وإصلاح شارة Informer المعطلة القادمة من عنوان bs.yandex.ru القديم مع حماية مدعومة لمانع الإعلانات AdBlocker.

---

1. إنشاء علامة (Tag) جديدة في Yandex Metrica

بعد تسجيل الدخول إلى metrica.yandex.com باستخدام حساب Yandex الخاص بك، ننتقل إلى شاشة Add tag (metrica.yandex.com/add) لإضافة عداد موقع ويب جديد. يتكون الإعداد من 3 خطوات أساسية:

الخطوة 1: Create Tag (معلومات العلامة وإعدادات Webvisor)

في الشاشة الأولى، نقوم بتهيئة إعدادات الهوية والمنطقة الأساسية لموقعنا:

1. Tag name: أدخل اسمًا يتيح لك التعرف على مشروعك في لوحة التحكم (مثال: Mayhem Corporation).
2. Website URL: أدخل النطاق الأساسي لموقعك بدون بادئة البروتوكول https:// (مثال: mayhemcorporation.com).
3. Accept data only from the specified addresses: احرص على إبقاء هذا المربع محددًا لمنع المواقع الأخرى من نسخ معرّف العداد (ID) الخاص بك وتلويث إحصاءاتك بالزيارات العشوائية (spam traffic).
4. Including subdomains: يمكنك تحديد هذا الخيار إذا كنت تريد جمع النطاقات الفرعية مثل blog.yoursite.com في العداد نفسه.
5. Time zone & Currency: اختر (GMT+03:00) Istanbul (أو منطقتك الزمنية) والعملة TRY (أو USD) حتى تتطابق ساعات إعادة تعيين الزوار اليومية مع التوقيت المستهدف.
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 الميزة الأكثر أهمية: عند تفعيل هذا الخيار، تتيح لك Yandex Metrica تسجيل حركات الماوس لزوار موقعك، وعمق التمرير، وبطاقات الألعاب/المقالات التي نقروا عليها، وكأنها تسجيل فيديو مجهول الهوية.

---

الخطوة 2: Fill Out the Profile (تهيئة ملف تعريف الموقع)

في الخطوة الثانية، تطرح Yandex Metrica خمسة أسئلة قصيرة حول ملف التعريف لإنتاج تقارير مقارنة معيارية (benchmark) دقيقة للمجال:

1. Site Type (نوع الموقع)

إذا كنت تدير بوابة تركز على المقالات أو الأدلة التقنية أو الأخبار أو الوثائق، فاختر Informational website (Website with text content)؛ أما إذا كانت صفحة ترويجية مباشرة لتطبيق/لعبة فاختر Promo website:

2. Industry (القطاع)

بناءً على محتوى موقعك، اختر التكنولوجيا أو الوسائط أو الثقافة/الفنون، أو إذا لم يكن هناك خيار مطابق تمامًا في القائمة فاختر Other في الأسفل:

3. CMS (نظام إدارة المحتوى)

إذا كان موقعك يستخدم منصة جاهزة مثل WordPress أو Drupal أو Joomla أو Wix، يمكنك اختيارها من القائمة. أما إذا كنت تستخدم بنية مخصصة طوّرتها بنفسك بلغة PHP/MySQL أو .NET مثل بوابة Mayhem Corporation الخاصة بنا، فحدد خيار Other أسفل القائمة:

4. نظام CRM

إذا لم تكن تستخدم أي نظام CRM مؤسسي، فيمكنك المتابعة باختيار Other (أو Without CRM):

5. Your Role in the Project (دورك في المشروع)

إذا كنت مطورًا مستقلاً أو مؤسس استوديو، فحدد Business management أو Product management واضغط على زر Continue:

---

الخطوة 3: تثبيت مقتطف الشفرة البرمجية (tag.js)

في الخطوة الأخيرة، تقوم Yandex Metrica بإنشاء كود عداد JavaScript الحديث (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" للانتقال إلى لوحة التحليلات الخاصة بك.

---

2. إصلاح شارة Yandex Metrica المرئية المعطلة (Informer) وحماية AdBlocker

في المواقع التي تم إنشاؤها بين عامي 2011 و2014، كانت شارة الإحصاءات الفيروزية الشهيرة بحجم 88x31 بكسل (Informer) من Yandex Metrica تُستدعى بواسطة هذا العنوان القديم:

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

على مر السنين، أوقفت Yandex خادم bs.yandex.ru والبرنامج النصي القديم watch.js، لذا يُرجع هذا العنوان الآن خطأ HTTP 404 Not Found وينتج عنه رمز صورة مكسورة في الصفحة.

الحل 1: نقطة النهاية المحدثة informer.yandex.ru

لعرض الشارة المرئية، نقوم بإعادة توجيه مصدر الصورة إلى خدمة Informer الحالية من Yandex (https://informer.yandex.ru/informer/...).

الحل 2: خيار محلي بديل للزوار الذين يستخدمون مانع الإعلانات AdBlocker (onerror)

اليوم، يستخدم العديد من اللاعبين والمطورين 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.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 -->

بعد هذا التعديل، تظهر شارة Yandex Metrica في القائمة اليسرى لـ Mayhem Corporation بإحصاءات حية في المتصفحات العادية، وبدون أي أيقونة معطلة في المتصفحات التي تم تفعيل مانع الإعلانات AdBlocker فيها:

شارة Yandex Metrica Informer النشطة في القائمة اليسرى لـ mayhemcorporation.com/mayhem/index.php بعد التحديث.

شارة Informer الفيروزية بحجم 88x31 التي تلخص مشاهدات الصفحة والزيارات والزوار الفريدين.

---

3. موقعنا وألعابنا (Arar Games)

موقعنا

• Mayhem Corporation: بوابة الويب الخاصة بنا التي تحتوي على مقالات تقنية حول تطوير الألعاب وXNA وMonoGame.
  mayhemcorporation.com

ألعابنا

• Blocked: Pixel Panzer: لعبة دبابات وحركة وأركيد ثنائية الأبعاد (2D) بنمط البكسل.
  Google Play | Microsoft Store
• Paint Trek: لعبة أركيد وألغاز فضائية ثنائية الأبعاد (2D).
  Google Play | Microsoft Store
• Space Dodger: لعبة أركيد فضائية ثنائية الأبعاد (2D) تركز على سرعة رد الفعل.
  Google Play

وسائل التواصل الاجتماعي

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