اپنی ویب سائٹ میں Yandex Metrica کیسے شامل کریں؟ مرحلہ وار انسٹالیشن، Webvisor اور Informer بیج کی مرمت

ایک آزاد گیم اسٹوڈیو (Indie Game Studio) یا مواد تخلیق کار (Content Creator) کے طور پر، یہ ٹریک کرنا انتہائی اہم ہے کہ آپ کی ویب سائٹ پر آنے والے صارفین کون سے مضامین پڑھ رہے ہیں، صفحے کے کس حصے پر کلک کر رہے ہیں اور آپ کے اسٹور بیجز کے ساتھ کس طرح تعامل کر رہے ہیں۔ اگرچہ Google Analytics ایک مقبول معیار ہے، لیکن مفت Webvisor (سیشن ریکارڈنگ / Session Replay)، کلک میپ (Clickmap)، اسکرول میپ (Scroll Map) اور ویژول کاؤنٹر بیج (Informer) جیسی خصوصیات کے ساتھ Yandex Metrica (Yandex.Metrika) ڈویلپرز کے لیے ایک طاقتور اینالیٹکس ٹول ہے۔

بطور Arar Games، اپنے گیم ڈویلپمنٹ پورٹل Mayhem Corporation (mayhemcorporation.com) کو (جو 2011 سے لائیو ہے) موبائل فرینڈلی (responsive) بناتے ہوئے ہم نے محسوس کیا کہ بائیں مینو میں 2012 سے موجود ہمارا پرانا Yandex Metrica کاؤنٹر اور ویژول بیج اب ایک ٹوٹی ہوئی تصویر کے طور پر ظاہر ہو رہا تھا۔

2012 کا پرانا bs.yandex.ru ایڈریس والا Yandex Metrica بیج جو جدید براؤزرز میں ٹوٹی ہوئی تصویر کے آئیکن کے طور پر ظاہر ہو رہا ہے۔

اس گائیڈ میں، ہم ابتدا سے ایک نیا Yandex Metrica ٹیگ (Tag) بنانے، تازہ ترین tag.js کوڈ کو اپنی ویب سائٹ میں شامل کرنے اور پرانے bs.yandex.ru سورس والے خراب Informer بیج کو AdBlocker پروٹیکشن کے ساتھ مرحلہ وار درست کرنے کا طریقہ شیئر کر رہے ہیں۔

---

1. Yandex Metrica میں نیا ٹیگ (Tag) بنانا

اپنے Yandex اکاؤنٹ کے ذریعے metrica.yandex.com پر لاگ ان کرنے کے بعد، نیا ویب سائٹ کاؤنٹر شامل کرنے کے لیے ہم 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: دوسری ویب سائٹس کی جانب سے آپ کا Tag ID کاپی کر کے اسپام ٹریفک کے ذریعے اعدادوشمار کو خراب کرنے سے بچانے کے لیے اس چیک باکس کو لازمی منتخب رہنے دیں۔
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 انڈسٹری بینچ مارک رپورٹس کو درست طریقے سے تیار کرنے کے لیے 5 مختصر پروفائل سوالات پوچھتا ہے:

1. Site Type (ویب سائٹ کی قسم)

اگر آپ مضامین، تکنیکی گائیڈز، خبروں یا دستاویزات پر مبنی پورٹل چلاتے ہیں تو Informational website (Website with text content) منتخب کریں؛ اگر یہ براہ راست ایپ/گیم پرومو پیج ہے تو Promo website منتخب کر سکتے ہیں:

2. Industry (صنعت / شعبہ)

अपनी ویب سائٹ کے مواد کے مطابق ٹیکنالوجی، میڈیا، ثقافت/فن منتخب کریں یا اگر فہرست میں مناسب آپشن موجود نہ ہو تو سب سے نیچے Other کا انتخاب کریں:

3. CMS (مواد کا انتظامی نظام)

اگر آپ کی سائٹ WordPress, Drupal, Joomla یا Wix جیسا ریڈی میڈ پلیٹ فارم استعمال کرتی ہے تو آپ اسے منتخب کر سکتے ہیں۔ اگر آپ ہمارے Mayhem Corporation پورٹل کی طرح کسٹم PHP/MySQL یا .NET فن تعمیر استعمال کر رہے ہیں تو فہرست میں نیچے 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 کے دوران قائم کی گئی ویب سائٹس میں، Yandex Metrica کا مشہور فیروزی 88x31 پکسل کا شماریاتی بیج (Informer) درج ذیل پرانے ایڈریس کے ذریعے کال کیا جاتا تھا:

//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 اینڈ پوائنٹ

ویژول بیج کو فعال کرنے کے لیے، ہم تصویر کے سورس کو Yandex کی موجودہ Informer سروس (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.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 -->

اس تبدیلی کے بعد، Mayhem Corporation کے بائیں مینو میں Yandex Metrica بیج عام براؤزرز میں لائیو اعدادوشمار کے ساتھ اور AdBlocker فعال ہونے پر بھی بغیر کسی ٹوٹی ہوئی تصویر کے خوبصورتی سے ظاہر ہوتا ہے:

اپ ڈیٹ کے بعد mayhemcorporation.com/mayhem/index.php کے بائیں مینو میں فعال Yandex Metrica Informer بیج۔

صفحے کے مشاہدات، دوروں اور منفرد صارفین کے ڈیٹا کا خلاصہ پیش کرنے والا 88x31 فیروزی Informer بیج۔

---

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: اضطراری ردعمل (Reflex) پر مبنی 2D خلائی آرکیڈ گیم۔
  Google Play

سوشل میڈیا

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