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)