วิธีเพิ่ม Yandex Metrica ลงในเว็บไซต์ของคุณ: คู่มือติดตั้งทีละขั้นตอน, Webvisor และการแก้ไขป้าย Informer

ในฐานะสตูดิโอเกมอินดี้หรือผู้สร้างคอนเทนต์ การวัดผลว่าผู้เข้าชมเว็บไซต์ของคุณอ่านบทความใด คลิกตรงไหนในหน้าเว็บ และมีปฏิสัมพันธ์กับป้ายร้านค้าของคุณอย่างไร ถือเป็นเรื่องที่สำคัญมาก แม้ว่า Google Analytics จะเป็นมาตรฐานที่ใช้กันทั่วไป แต่ด้วยฟีเจอร์อย่าง Webvisor (บันทึกวิดีโอเซสชัน / Session Replay), แผนที่การคลิก (Clickmap), แผนที่การเลื่อนหน้าจอ (Scroll Map) และ ป้ายแสดงสถิติตัวนับ (Informer) ที่ให้บริการฟรี ทำให้ Yandex Metrica (Yandex.Metrika) เป็นเครื่องมือวิเคราะห์ที่ทรงพลังอย่างยิ่งสำหรับนักพัฒนา

ในฐานะทีมงาน Arar Games ระหว่างที่เรากำลังปรับปรุงพอร์ทัลพัฒนาเกม Mayhem Corporation (mayhemcorporation.com) ที่เปิดให้บริการมาตั้งแต่ปี 2011 ให้รองรับการแสดงผลบนอุปกรณ์เคลื่อนที่ (Responsive) เราสังเกตเห็นว่าตัวนับและป้ายกราฟิก Yandex Metrica ในเมนูด้านซ้ายซึ่งติดตั้งไว้ตั้งแต่ปี 2012 แสดงผลเป็นรูปภาพที่เสียหาย (Broken Image)

ป้าย Yandex Metrica เก่าจากปี 2012 ที่ชี้ไปยังที่อยู่ bs.yandex.ru ปรากฏเป็นไอคอนรูปภาพเสียบนเบราว์เซอร์ยุคปัจจุบัน

ในคู่มือนี้ เราจะพาคุณสร้างแท็ก (Tag) ใหม่ของ Yandex Metrica ตั้งแต่เริ่มต้น นำโค้ด tag.js ที่อัปเดตแล้วไปติดตั้งในเว็บไซต์ของคุณ และซ่อมแซมป้าย Informer ที่เสียหายจากโดเมนเดิม bs.yandex.ru พร้อม ระบบป้องกัน AdBlocker ทีละขั้นตอน

---

1. การสร้างแท็ก (Tag) ใหม่ใน Yandex Metrica

หลังจากเข้าสู่ระบบด้วยบัญชี 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 ข้อเกี่ยวกับโปรไฟล์เพื่อสร้างรายงานเปรียบเทียบมาตรฐานในอุตสาหกรรม (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 พิกเซลสีฟ้าเทอร์ควอยซ์อันเป็นเอกลักษณ์ของ 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 และทำให้เกิดไอคอนรูปภาพเสียบนหน้าเว็บ

วิธีแก้ที่ 1: เอนด์พอยต์ใหม่ informer.yandex.ru

เพื่อให้ป้ายแสดงผลได้ถูกต้อง เราจะเปลี่ยนเส้นทางแหล่งที่มาของรูปภาพไปยังบริการ Informer ปัจจุบันของ Yandex (https://informer.yandex.ru/informer/...)

วิธีแก้ที่ 2: ระบบ Fallback ในเครื่อง (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 หลังการอัปเดต

ป้าย 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