10 Ekim 2026 Cumartesi

如何向您的网站添加 Yandex Metrica：分步安装指南、Webvisor 与 Informer 徽章修复




如何向您的网站添加 Yandex Metrica：分步安装指南、Webvisor 与 Informer 徽章修复

作为独立游戏工作室或内容创作者，衡量网站访问者阅读了哪些文章、点击了页面的哪个位置以及他们如何与应用商店徽章进行互动至关重要。尽管 Google Analytics 是一项通用标准，但凭借免费的 Webvisor（会话回放 / Session Replay）、点击图（Clickmap）、滚动图（Scroll Map） 以及可视化计数器徽章（Informer） 功能，Yandex Metrica (Yandex.Metrika) 成为开发者极为强大的分析工具。

作为 Arar Games，在对自 2011 年上线至今的游戏开发门户网站 Mayhem Corporation (mayhemcorporation.com) 进行移动端自适应（responsive）改造时，我们注意到左侧菜单中自 2012 年以来的 Yandex Metrica 计数器和可视化徽章已显示为损坏图标。

Mayhem Corporation 左侧菜单中已损坏的旧版 Yandex Metrica 图片
2012 年遗留的地址为 bs.yandex.ru 的旧版 Yandex Metrica 徽章在现代浏览器中显示为损坏图标。

在本指南中，我们将分步分享如何从零开始创建新的 Yandex Metrica 代码标签（Tag）、将最新的 tag.js 代码集成到您的网站中，以及如何通过防广告拦截（AdBlocker）回退机制修复源自旧版 bs.yandex.ru 的损坏 Informer 徽章。

1. 在 Yandex Metrica 中创建新标签 (Tag)

使用您的 Yandex 账号登录 metrica.yandex.com 后，转到 Add tag (metrica.yandex.com/add) 页面以添加新的网站计数器。安装过程包括 3 个基本步骤：

步骤 1：Create Tag（标签信息与 Webvisor 设置）

在第一个页面中，配置我们网站的基本标识和区域设置：

步骤 1：Yandex Metrica 创建新标签界面

  1. Tag name： 输入可帮助您在控制台中识别项目的名称（例如：Mayhem Corporation）。
  2. Website URL： 输入不带协议（https://）的网站主域名（例如：mayhemcorporation.com）。
  3. Accept data only from the specified addresses： 务必勾选此复选框，以防止其他网站复制您的计数器 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）对比报告：

步骤 2：填写网站资料信息

1. Site Type（网站类型）

如果您运营的是以文章、技术指南、新闻或文档为主的门户网站，请选择 Informational website (Website with text content)；如果是直接针对应用程序/游戏的推广页面，可选择 Promo website：

选择网站类型

2. Industry（行业）

根据网站内容选择科技、媒体、文化/艺术等；如果在列表中没有完全匹配的选项，请选择底部的 Other：

行业选项 1

行业选项 2

3. CMS（内容管理系统）

如果您的网站使用 WordPress、Drupal、Joomla 或 Wix 等现成框架，可以从列表中进行选择。如果您像我们的 Mayhem Corporation 门户网站一样使用自行开发的定制 PHP/MySQL 或 .NET 架构，请选择列表底部的 Other 选项：

选择 CMS

4. CRM 系统

如果您不使用任何企业级 CRM，也可以在此处选择 Other（或 Without CRM）继续：

选择 CRM

5. Your Role in the Project（您在项目中的角色）

如果您是独立开发者或工作室创始人，请选择 Business management 或 Product management，然后点击 Continue 按钮：

选择项目中的角色

步骤 3：安装代码片段 (tag.js)

在最后一步中，Yandex Metrica 将生成最新的 JavaScript 计数器代码 (tag.js)，您需要将其放置在网站的 <head> 或 <body> 标签之间：

步骤 3：Yandex Metrica 计数器代码与安装界面

生成的最新计数器代码结构如下（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：针对使用广告拦截器用户的本地回退机制 (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 的浏览器中也不会出现损坏图标：

Mayhem Corporation 左侧菜单中更新后的 Yandex Metrica 徽章
更新后在 mayhemcorporation.com/mayhem/index.php 左侧菜单中正常运行的 Yandex Metrica Informer 徽章。

Yandex Metrica 88x31 徽章特写
汇集页面浏览量、访问次数和独立访客数据的 88x31 青绿色 Informer 徽章。

3. 我们的网站与游戏 (Arar Games)

我们的网站

  • Mayhem Corporation： 包含游戏开发与 XNA / MonoGame 技术文章的网站门户。
    mayhemcorporation.com

我们的游戏

社交媒体




Gönderen zaman:
Etiketler: , , , , , ,

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)