Cách thêm Yandex Metrica vào trang web của bạn: Hướng dẫn cài đặt từng bước, Webvisor và sửa huy hiệu Informer

Là một studio game độc lập (Indie Game Studio) hoặc nhà sáng tạo nội dung, việc đo lường xem khách truy cập đọc những bài viết nào, nhấp vào đâu trên trang và tương tác với các huy hiệu cửa hàng như thế nào là vô cùng quan trọng. Mặc dù Google Analytics là tiêu chuẩn phổ biến, nhưng với các tính năng miễn phí như Webvisor (Phát lại phiên / Session Replay), Bản đồ nhấp chuột (Clickmap), Bản đồ cuộn trang (Scroll Map) và Huy hiệu bộ đếm trực quan (Informer), Yandex Metrica (Yandex.Metrika) là một công cụ phân tích mạnh mẽ dành cho các nhà phát triển.

Với tư cách là Arar Games, trong quá trình tối ưu giao diện cổng thông tin phát triển game Mayhem Corporation (mayhemcorporation.com) (hoạt động từ năm 2011) tương thích với thiết bị di động (responsive), chúng tôi nhận thấy bộ đếm Yandex Metrica cùng huy hiệu trực quan từ năm 2012 ở thanh điều hướng bên trái đã bị lỗi hiển thị hình ảnh.

Huy hiệu Yandex Metrica cũ từ năm 2012 với địa chỉ bs.yandex.ru hiển thị dưới dạng biểu tượng hình ảnh bị hỏng trên các trình duyệt hiện đại.

Trong hướng dẫn này, chúng tôi sẽ chia sẻ từng bước cách tạo thẻ (Tag) Yandex Metrica mới từ đầu, tích hợp mã tag.js mới nhất vào trang web của bạn và khắc phục huy hiệu Informer bị hỏng từ nguồn bs.yandex.ru cũ với cơ chế bảo vệ trước AdBlocker.

---

1. Tạo thẻ (Tag) mới trong Yandex Metrica

Sau khi đăng nhập bằng tài khoản Yandex tại metrica.yandex.com, hãy chuyển đến màn hình Add tag (metrica.yandex.com/add) để thêm bộ đếm trang web mới. Quá trình cài đặt gồm 3 bước cơ bản:

Bước 1: Create Tag (Thông tin thẻ và thiết lập Webvisor)

Trên màn hình đầu tiên, chúng ta cấu hình danh tính cơ bản và cài đặt khu vực cho trang web:

1. Tag name: Nhập tên giúp bạn dễ dàng nhận diện dự án trong bảng điều khiển (Ví dụ: Mayhem Corporation).
2. Website URL: Nhập tên miền chính của trang web mà không có giao thức (https://) (Ví dụ: mayhemcorporation.com).
3. Accept data only from the specified addresses: Hãy chắc chắn để ô này được chọn nhằm ngăn chặn các trang web khác sao chép Tag ID và làm sai lệch số liệu thống kê của bạn bằng lưu lượng rác (spam).
4. Including subdomains: Nếu bạn muốn theo dõi cả các tên miền phụ như blog.yoursite.com trong cùng một bộ đếm, bạn có thể chọn mục này.
5. Time zone & Currency: Chọn múi giờ phù hợp (ví dụ: (GMT+03:00) Istanbul hoặc múi giờ địa phương của bạn) để giờ thiết lập lại khách truy cập hằng ngày khớp với thời gian của bạn, cùng loại tiền tệ như TRY (hoặc USD).
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 Tính năng quan trọng nhất: Khi kích hoạt tùy chọn này, Yandex Metrica cho phép bạn xem lại các chuyển động chuột, độ sâu cuộn trang và các thẻ trò chơi/bài viết mà khách truy cập nhấp vào dưới dạng bản ghi video ẩn danh.

---

Bước 2: Fill Out the Profile (Cấu hình hồ sơ trang web)

Ở bước thứ hai, Yandex Metrica đưa ra 5 câu hỏi hồ sơ ngắn để tạo báo cáo so sánh chuẩn ngành (benchmark) chính xác:

1. Site Type (Loại trang web)

Nếu bạn quản lý cổng thông tin tập trung vào bài viết, hướng dẫn kỹ thuật, tin tức hoặc tài liệu, hãy chọn Informational website (Website with text content); nếu là trang giới thiệu ứng dụng/trò chơi trực tiếp, bạn có thể chọn Promo website:

2. Industry (Ngành nghề)

Tùy theo nội dung trang web của bạn, chọn công nghệ, truyền thông, văn hóa/nghệ thuật hoặc nếu không có mục hoàn toàn trùng khớp trong danh sách, hãy chọn mục Other ở cuối:

3. CMS (Hệ thống quản trị nội dung)

Nếu trang web của bạn sử dụng nền tảng có sẵn như WordPress, Drupal, Joomla hoặc Wix, bạn có thể chọn từ danh sách. Nếu bạn sử dụng kiến trúc PHP/MySQL hoặc .NET tự xây dựng như cổng thông tin Mayhem Corporation của chúng tôi, hãy chọn Other ở cuối danh sách:

4. Hệ thống CRM

Nếu bạn không sử dụng bất kỳ hệ thống CRM doanh nghiệp nào, hãy chọn Other (hoặc Without CRM) trong trường này để tiếp tục:

5. Your Role in the Project (Vai trò của bạn trong dự án)

Nếu bạn là nhà phát triển độc lập hoặc người sáng lập studio, hãy chọn Business management hoặc Product management và nhấp vào nút Continue:

---

Bước 3: Cài đặt đoạn mã (tag.js)

Ở bước cuối cùng, Yandex Metrica tạo mã bộ đếm JavaScript mới nhất (tag.js) để bạn đặt vào giữa các thẻ <head> hoặc <body> của trang web:

Cấu trúc của đoạn mã bộ đếm vừa tạo như sau (thay thế YOUR_TAG_ID bằng số bộ đếm của riêng bạn):

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

Sau khi thêm mã này vào tệp mẫu chính của trang web (index.php hoặc header.php) và tải lên máy chủ, hãy nhấp vào nút "Check tag" trên màn hình để xác nhận rằng bộ đếm đang hoạt động trực tiếp, sau đó nhấn "Get started" để chuyển đến bảng điều khiển phân tích.

---

2. Sửa huy hiệu trực quan Yandex Metrica (Informer) bị hỏng và bảo vệ trước AdBlocker

Trên các trang web được xây dựng trong giai đoạn 2011–2014, huy hiệu thống kê màu xanh ngọc kích thước 88x31 pixel mang tính biểu tượng của Yandex Metrica (Informer) được gọi qua địa chỉ cũ sau:

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

Theo thời gian, Yandex đã ngừng hoạt động máy chủ bs.yandex.ru và tập lệnh cũ watch.js, khiến địa chỉ này trả về lỗi HTTP 404 Not Found và làm xuất hiện biểu tượng ảnh bị hỏng trên trang.

Giải pháp 1: Điểm cuối informer.yandex.ru cập nhật

Để huy hiệu hoạt động trở lại, chúng tôi chuyển hướng nguồn hình ảnh sang dịch vụ Informer hiện tại của Yandex (https://informer.yandex.ru/informer/...).

Giải pháp 2: Cơ chế dự phòng cục bộ (onerror) cho khách truy cập dùng AdBlocker

Hiện nay, nhiều game thủ và nhà phát triển sử dụng AdBlocker (uBlock Origin, Brave Shield, v.v.) trên trình duyệt. Khi trình chặn quảng cáo chặn các miền phân tích, hình ảnh huy hiệu có thể không tải được. Để bảo đảm giao diện không bị vỡ trong bất kỳ hoàn cảnh nào, chúng tôi lưu trữ một bản sao 88x31 pixel của huy hiệu trên chính máy chủ của mình (images/yandex_metrica_badge.png) và tự động kích hoạt thông qua thuộc tính 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 -->

Sau chỉnh sửa này, huy hiệu Yandex Metrica trong menu bên trái của Mayhem Corporation sẽ hiển thị số liệu trực tiếp trên trình duyệt thông thường và không bao giờ bị hỏng biểu tượng ngay cả khi AdBlocker được bật:

Huy hiệu Yandex Metrica Informer hoạt động trong menu bên trái của mayhemcorporation.com/mayhem/index.php sau khi cập nhật.

Huy hiệu Informer màu xanh ngọc 88x31 pixel tóm tắt số lượt xem trang, lượt truy cập và khách truy cập duy nhất.

---

3. Trang web và trò chơi của chúng tôi (Arar Games)

Trang web của chúng tôi

• Mayhem Corporation: Cổng thông tin web của chúng tôi với các bài viết kỹ thuật về phát triển trò chơi và XNA / MonoGame.
  mayhemcorporation.com

Trò chơi của chúng tôi

• Blocked: Pixel Panzer: Trò chơi hành động và arcade xe tăng đồ họa pixel 2D.
  Google Play | Microsoft Store
• Paint Trek: Trò chơi arcade và giải đố không gian 2D.
  Google Play | Microsoft Store
• Space Dodger: Trò chơi không gian arcade 2D thử thách phản xạ.
  Google Play

Mạng xã hội

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