11 Ekim 2026 Pazar

WebサイトにYandex Metricaを追加する方法：ステップバイステップ導入、Webvisor、Informerバッジの修復




WebサイトにYandex Metricaを追加する方法：ステップバイステップ導入、Webvisor、Informerバッジの修復

インディーゲームスタジオやコンテンツクリエイターにとって、Webサイトを訪れたユーザーがどの記事を読み、ページのどこをクリックし、ストアバッジとどのようにインタラクションしているかを把握することは非常に重要です。Google Analyticsは標準的な選択肢ですが、Yandex Metrica（Yandex.Metrika）は、無料のWebvisor（セッションリプレイ / Session Replay）、クリックマップ（Clickmap）、スクロールマップ（Scroll Map）、**ビジュアルカウンターバッジ（Informer）**などの強力な機能を備えた開発者向けのアナリティクスツールです。

Arar Gamesでは、2011年から運営しているゲーム開発ポータルサイト**Mayhem Corporation (mayhemcorporation.com)をモバイル対応（レスポンシブ化）する過程で、左側メニューにある2012年当時のYandex Metrica**カウンターとビジュアルバッジの画像リンクが切れていることに気づきました。

Mayhem Corporation 左メニューの壊れた古いYandex Metrica画像
2012年当時の古い bs.yandex.ru アドレスのYandex Metricaバッジが、最新ブラウザでリンク切れアイコンとして表示されている様子。

本ガイドでは、新しいYandex Metricaタグをゼロから作成し、最新の tag.js コードをWebサイトに埋め込み、古い bs.yandex.ru による壊れたInformerバッジをAdBlocker対策（フォールバック）付きで修復する手順をステップバイステップで解説します。

1. Yandex Metricaで新しいタグを作成する

Yandexアカウントで metrica.yandex.com にログイン後、新しいWebサイトカウンターを追加するために 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（サイトプロファイルの設定）

ステップ2では、サイトの業界比較（ベンチマーク）レポートを正確に生成するために、Yandex Metricaから5つの簡単なプロファイル質問が表示されます：

ステップ 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はWebサイトの <head> または <body> タグ内に配置する最新の JavaScriptカウンターコード（tag.js） を生成します：

ステップ 3: Yandex Metrica カウンターコードと導入画面

生成される最新カウンターコードの構造は次のとおりです（YOUR_TAG_ID をご自身のカウンター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年頃に開設されたWebサイトでは、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: 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が有効なブラウザでも画像リンク切れを起こさずに美しく表示されます：

Mayhem Corporation 左メニューの更新されたYandex Metricaバッジ
更新後、mayhemcorporation.com/mayhem/index.php の左メニューで正常に動作しているYandex Metrica Informerバッジ。

Yandex Metrica 88x31 バッジの拡大図
ページビュー数、訪問回数、ユニークビジター数を要約した88x31のターコイズブルーInformerバッジ。

3. 当スタジオのWebサイトとゲーム作品（Arar Games）

公式Webサイト

  • Mayhem Corporation: ゲーム開発およびXNA / MonoGameに関する技術記事を掲載している当スタジオのWebポータル。
    mayhemcorporation.com

ゲームタイトル

ソーシャルメディア




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

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)