আপনার ওয়েবসাইটে কীভাবে 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 কাউন্টার এবং ভিজ্যুয়াল ব্যাজটি আধুনিক ব্রাউজারে নষ্ট হয়ে গেছে এবং আর প্রদর্শিত হচ্ছে না।

আধুনিক ব্রাউজারগুলিতে ২০১২ সালের পুরনো bs.yandex.ru ঠিকানার Yandex Metrica ব্যাজটি নষ্ট ছবির আইকন হিসেবে প্রদর্শিত হওয়া।

এই নির্দেশিকায়; আমরা শুরু থেকে নতুন একটি Yandex Metrica ট্যাগ (Tag) তৈরি করা, আপনার সাইটে আধুনিক tag.js কোড যুক্ত করা এবং AdBlocker সুরক্ষা সহ পুরনো bs.yandex.ru ভিত্তিক নষ্ট Informer ব্যাজটি মেরামত করার প্রক্রিয়া ধাপে ধাপে শেয়ার করছি।

---

১. Yandex Metrica-তে নতুন ট্যাগ (Tag) তৈরি করা

আপনার Yandex অ্যাকাউন্ট দিয়ে metrica.yandex.com-এ লগইন করার পর, নতুন ওয়েবসাইট কাউন্টার যোগ করতে Add tag (metrica.yandex.com/add) স্ক্রিনে যান। সেটআপটি ৩টি প্রধান ধাপে সম্পন্ন হয়:

ধাপ ১: Create Tag (ট্যাগ তথ্য এবং Webvisor কনফিগারেশন)

প্রথম স্ক্রিনে আমরা আমাদের সাইটের প্রাথমিক পরিচিতি এবং অঞ্চলের সেটিংস কনফিগার করি:

1. Tag name: ড্যাশবোর্ডে আপনার প্রকল্পটি সহজে চেনার জন্য একটি নাম লিখুন (যেমন: Mayhem Corporation)।
2. Website URL: প্রোটোকল (https://) ছাড়া আপনার সাইটের মূল ডোমেন নাম লিখুন (যেমন: mayhemcorporation.com)।
3. Accept data only from the specified addresses: অন্য কোনো সাইট যেন আপনার কাউন্টার আইডি কপি করে স্প্যাম ট্র্যাফিক দিয়ে পরিসংখ্যান নষ্ট করতে না পারে, সেজন্য এই বক্সটি অবশ্যই চিহ্নিত (checked) রাখুন।
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 ভিজিটরদের মাউস নড়াচড়া, স্ক্রোল গভীরতা এবং তারা কোন গেম/নিবন্ধ কার্ডে ক্লিক করেছেন তা একটি বেনামী ভিডিও রেকর্ডিংয়ের মতো দেখার সুবিধা দেয়।

---

ধাপ ২: 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 আপনার সাইটের <head> বা <body> ট্যাগের মধ্যে বসানোর জন্য আধুনিক JavaScript কাউন্টার কোড (tag.js) তৈরি করে:

তৈরি করা আধুনিক ট্র্যাকিং কোডের কাঠামো নিম্নরূপ (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 সুরক্ষা

২০১১–২০১৪ সালে তৈরি ওয়েবসাইটগুলিতে 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 দেখায় এবং পৃষ্ঠায় একটি নষ্ট ছবির আইকন তৈরি করে।

সমাধান ১: হালনাগাদ করা informer.yandex.ru এন্ডপয়েন্ট

ভিজ্যুয়াল ব্যাজটি প্রদর্শন করতে ছবির উৎসটি Yandex-এর বর্তমান Informer সার্ভিসে (https://informer.yandex.ru/informer/...) রিডাইরেক্ট করি।

সমাধান ২: 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 -->

এই পরিবর্তনের পর Mayhem Corporation-এর বাম মেনুতে Yandex Metrica ব্যাজটি সাধারণ ব্রাউজারে লাইভ পরিসংখ্যান সহ এবং AdBlocker সক্রিয় ব্রাউজারে কোনো ভাঙা আইকন ছাড়াই সুন্দরভাবে প্রদর্শিত হয়:

আপডেটের পর mayhemcorporation.com/mayhem/index.php বাম মেনুতে সক্রিয় Yandex Metrica Informer ব্যাজ।

পৃষ্ঠা প্রদর্শন, ভিজিট এবং অনন্য ভিজিটরদের সংক্ষেপিত রূপ প্রদানকারী ৮৮x৩১ ফিরোজা Informer ব্যাজ।

---

৩. আমাদের ওয়েবসাইট এবং গেমসমূহ (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