Google Analytics設定ガイド¶

MkDocs MaterialサイトにGoogle Analyticsを導入してアクセス解析を行う方法を詳しく解説します。

前提条件

mkdocsを使ったGitHub Pagesの作成方法を完了していること
Googleアカウントを持っていること

1. Google Analytics 4 (GA4) の設定¶

1.1 Google Analyticsアカウント作成¶

Google Analyticsにアクセス
「測定を開始」をクリック
アカウント名を入力（例：My Documentation Site）
アカウントの詳細設定を確認
「次へ」をクリック

1.2 プロパティの設定¶

プロパティ名を入力（例：MkDocs Site）
レポートタイムゾーンを「日本」に設定
通貨を「日本円」に設定
「次へ」をクリック

1.3 ビジネスの詳細¶

業種カテゴリを選択（例：「コンピューター、電子機器」）
ビジネスの規模を選択
「作成」をクリック

1.4 データストリームの設定¶

「ウェブ」を選択

ウェブサイトのURL を入力

https://username.github.io/repository-name/

ストリーム名を入力（例：GitHub Pages Site）
「ストリームを作成」をクリック

1.5 測定IDの取得¶

作成完了後、測定ID（G-XXXXXXXXXX 形式）をコピーします。

GA4測定ID例

2. MkDocsへの実装¶

2.1 基本設定（推奨）¶

mkdocs.ymlにGoogle Analytics設定を追加：

# Google Analytics 4
plugins:
  - search:
      lang: ja

# Analytics (推奨方法)
extra:
  analytics:
    provider: google
    property: G-XXXXXXXXXX  # 取得した測定IDに置き換え
    feedback:
      title: この記事は役に立ちましたか？
      ratings:
        - icon: material/emoticon-happy-outline
          name: 役に立った
          data: 1
          note: >-
            フィードバックありがとうございます！
        - icon: material/emoticon-sad-outline
          name: 改善が必要
          data: 0
          note: >-
            フィードバックありがとうございます。改善に努めます。

2.2 レガシー設定（非推奨だが使用可能）¶

古いUniversal Analytics（UA）プロパティがある場合：

# Universal Analytics (レガシー)
google_analytics:
  - 'UA-XXXXXXXX-X'
  - 'auto'

Universal Analytics終了

Universal Analyticsは2023年7月1日で終了しました。新規作成にはGA4を使用してください。

3. カスタムイベント設定¶

3.1 イベント設定の追加¶

より詳細な分析のためにカスタムイベントを設定：

extra:
  analytics:
    provider: google
    property: G-XXXXXXXXXX
    feedback:
      title: この記事は役に立ちましたか？
      ratings:
        - icon: material/thumb-up-outline
          name: はい
          data: 1
          note: ありがとうございます！
        - icon: material/thumb-down-outline
          name: いいえ
          data: 0
          note: 改善に努めます。

3.2 カスタムJavaScriptでの拡張¶

docs/javascripts/analytics.jsを作成：

// カスタム イベント トラッキング
document.addEventListener('DOMContentLoaded', function() {
  // 外部リンククリックの追跡
  document.querySelectorAll('a[href^="http"]').forEach(function(link) {
    link.addEventListener('click', function() {
      gtag('event', 'click', {
        event_category: 'external_link',
        event_label: this.href,
        transport_type: 'beacon'
      });
    });
  });

  // ダウンロードリンクの追跡
  document.querySelectorAll('a[href$=".pdf"], a[href$=".zip"], a[href$=".doc"]').forEach(function(link) {
    link.addEventListener('click', function() {
      gtag('event', 'download', {
        event_category: 'file_download',
        event_label: this.href.split('/').pop(),
        transport_type: 'beacon'
      });
    });
  });

  // 検索の追跡
  const searchInput = document.querySelector('[data-md-component="search-query"]');
  if (searchInput) {
    searchInput.addEventListener('input', function() {
      if (this.value.length > 2) {
        gtag('event', 'search', {
          search_term: this.value
        });
      }
    });
  }
});

// スクロール深度の追跡
let scrollDepth = 0;
window.addEventListener('scroll', function() {
  const currentScroll = Math.round((window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100);

  if (currentScroll > scrollDepth && currentScroll % 25 === 0) {
    scrollDepth = currentScroll;
    gtag('event', 'scroll', {
      event_category: 'engagement',
      event_label: scrollDepth + '%',
      value: scrollDepth
    });
  }
});

mkdocs.ymlにJavaScriptファイルを追加：

extra_javascript:
  - javascripts/analytics.js

4. プライバシー設定¶

docs/javascripts/cookie-consent.jsを作成：

// Cookie同意バナーの表示
function showCookieConsent() {
  const consent = localStorage.getItem('cookie-consent');

  if (!consent) {
    const banner = document.createElement('div');
    banner.innerHTML = `
      <div style="position: fixed; bottom: 0; left: 0; right: 0; background: #333; color: white; padding: 1rem; z-index: 9999;">
        <p style="margin: 0 0 1rem 0;">
          このサイトではユーザー体験向上のためにGoogle Analyticsを使用しています。
          <a href="/privacy/" style="color: #4FC3F7;">プライバシーポリシー</a>
        </p>
        <button id="accept-cookies" style="background: #4FC3F7; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; margin-right: 1rem;">同意する</button>
        <button id="decline-cookies" style="background: #666; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px;">拒否する</button>
      </div>
    `;

    document.body.appendChild(banner);

    document.getElementById('accept-cookies').addEventListener('click', function() {
      localStorage.setItem('cookie-consent', 'accepted');
      document.body.removeChild(banner);

      // Google Analytics有効化
      window.gtag = window.gtag || function(){dataLayer.push(arguments);};
      gtag('consent', 'update', {
        'analytics_storage': 'granted'
      });
    });

    document.getElementById('decline-cookies').addEventListener('click', function() {
      localStorage.setItem('cookie-consent', 'declined');
      document.body.removeChild(banner);

      // Google Analytics無効化
      window.gtag = window.gtag || function(){dataLayer.push(arguments);};
      gtag('consent', 'update', {
        'analytics_storage': 'denied'
      });
    });
  }
}

document.addEventListener('DOMContentLoaded', showCookieConsent);

4.2 プライバシーポリシーページ¶

docs/privacy.mdを作成：

# プライバシーポリシー

## 取得する情報

このサイトでは、Google Analyticsを使用してアクセス状況を分析しています。

### 取得する情報の種類

- ページビュー数
- 訪問者数
- セッション時間
- 参照元サイト
- 使用デバイス情報
- 地理的な場所（国・地域レベル）

### 情報の利用目的

- サイトの利用状況分析
- コンテンツの改善
- ユーザー体験の向上

## Cookie について

Google Analyticsは以下のCookieを使用します：

| Cookie名 | 目的 | 保存期間 |
|----------|------|----------|
| _ga | ユーザーの識別 | 2年 |
| _ga_* | セッションの追跡 | 2年 |
| _gid | ユーザーの識別 | 24時間 |

## オプトアウト

Google Analyticsによる情報収集を無効にしたい場合：

1. [Google Analytics オプトアウト アドオン](https://tools.google.com/dlpage/gaoptout)をインストール
2. ブラウザの設定でCookieを無効化

## お問い合わせ

プライバシーに関するご質問は [お問い合わせ](mailto:your-email@example.com) までご連絡ください。

5. レポートとダッシュボード¶

5.1 重要な指標¶

Google Analyticsで確認すべき主要指標：

リアルタイム
現在のアクティブユーザー数
人気ページ
オーディエンス
新規 vs リピーター
地域別アクセス
デバイス別アクセス
行動
人気ページ
平均セッション時間
直帰率
カスタムレポート
検索キーワード
ダウンロード数
外部リンククリック

5.2 カスタムダッシュボード作成¶

重要な指標をまとめたダッシュボードを作成：

Google Analyticsで「カスタマイズ」→「ダッシュボード」
「作成」→「空白のキャンバス」
以下のウィジェットを追加：
指標：ページビュー、ユーザー、セッション
円グラフ：新規 vs リピーター
表：人気ページ
時系列：日別アクセス推移

6. データ分析とサイト改善¶

6.1 分析の活用方法¶

人気コンテンツの特定

行動 → サイトコンテンツ → すべてのページ

離脱ページの確認

行動 → サイトコンテンツ → 離脱ページ

検索クエリの分析

行動 → サイト内検索 → 検索キーワード

6.2 改善のためのアクション¶

分析結果に基づく改善例：

人気ページ: 関連コンテンツを充実
離脱の多いページ: コンテンツ見直し、CTA追加
モバイル流入: モバイル最適化強化
検索クエリ: 該当コンテンツの作成・改善

7. トラブルシューティング¶

よくある問題¶

データが表示されない¶

# 設定確認
grep -r "G-" mkdocs.yml

リアルタイムで反映されない¶

デプロイ完了を確認
ブラウザキャッシュをクリア
測定IDの再確認

プライベートIPからのアクセスが除外されない¶

// IPアドレス除外設定
gtag('config', 'G-XXXXXXXXXX', {
  'custom_map': {'dimension1': 'client_ip'}
});

8. セキュリティとコンプライアンス¶

8.1 データ保護¶

データ保存期間の設定
GA4管理画面 → データ設定 → データ保持
推奨：14ヶ月
IP匿名化（GA4では自動）
ユーザーのIPアドレスは自動的に匿名化
データ共有の無効化
管理 → アカウント設定 → データ共有設定

8.2 法的要件¶

GDPR対応（EU訪問者がいる場合）
個人情報保護法対応
Cookie法対応

📚 関連記事・次のステップ¶

アナリティクスの基本設定が完了したら、さらなる改善に取り組みましょう：

🎨 サイトの品質向上¶

デザイン改善ガイド - ユーザー体験の向上でアナリティクス指標を改善
高度な設定 - パフォーマンス最適化でページ表示速度を向上

📝 基本機能の充実¶

MkDocs作成ガイド - サイトの基本構造を見直し

🛠️ 運用・保守の効率化¶

便利ツール - データ分析や運用作業を効率化
crontab設定 - 定期的なレポート生成の自動化

このサイトでのアナリティクス実装

このサイトでは実際にGoogle Analytics 4を実装済みです。ページ下部の「この記事は役に立ちましたか？」のフィードバック機能もアナリティクスと連動しています。