GA4イベント設定ガイド
カスタムイベント・コンバージョン・GTM連携

GA4イベントとは

GA4（Google Analytics 4）はすべてのユーザー行動をイベントとして記録する。旧UA（Universal Analytics）のように「ページビュー」「イベント」「トランザクション」を別のヒットタイプとして区別せず、全てが統一されたイベントモデルで処理される。

イベントは大きく3種類に分かれる。

イベントにはパラメータを付与できる。例えば page_view イベントには page_location（URL）や page_title（ページタイトル）が自動的に付与される。カスタムイベントにも任意のパラメータを追加でき、最大25個まで1イベントに付与可能だ。

自動収集イベント一覧

GA4の測定タグを設置するだけで、以下のイベントが自動的に収集される。追加設定は不要だ。

推奨イベント一覧

推奨イベントはGoogleが事前に定義した名前・パラメータの組み合わせだ。これらの名前を使うと、GA4のレポートUIが自動的にリッチな表示に拡張される。独自の名前でカスタムイベントを作る前に、推奨イベントで対応できないか必ず確認しよう。

推奨イベントの完全なリストはGoogleの公式ドキュメントで確認できる。フリーランスのポートフォリオサイトでは generate_lead（問い合わせ）と share（SNS共有）が特に重要だ。

カスタムイベントの作成方法

推奨イベントに該当しない独自の行動を計測したい場合は、カスタムイベントを作成する。GA4の管理画面から作成する方法（コード不要）と、gtag() または GTMで送信する方法がある。

方法1: GA4管理画面から作成（コード不要）

既存のイベントの条件を組み合わせて新しいイベントを作る方法だ。コードの変更が不要なため、エンジニア以外でも設定できる。

設定手順（5ステップ）:

1. GA4の管理画面を開き、左メニュー「管理」→「イベント」を選択
2. 「イベントを作成」→「作成」ボタンをクリック
3. カスタムイベント名を入力（例: scroll_50_percent）
4. 一致する条件を設定（例: event_name = scroll かつ percent_scrolled = 50）
5. 「作成」をクリックして保存

方法2: gtag()でコードから送信

HTMLに直接JavaScriptコードを記述してイベントを送信する方法だ。シンプルなサイトやWordPressのテンプレートに埋め込む場合に適している。

// 基本構文
gtag('event', 'イベント名', {
    パラメータ名: '値',
    パラメータ名2: '値2'
});

// 例: お問い合わせフォーム送信
document.querySelector('#contactForm').addEventListener('submit', function() {
    gtag('event', 'generate_lead', {
        event_category: 'contact',
        event_label: 'contact_form',
        value: 1
    });
});

// 例: ポートフォリオ作品の詳細表示
function trackPortfolioView(workTitle, workCategory) {
    gtag('event', 'portfolio_detail_view', {
        work_title: workTitle,
        work_category: workCategory,
        page_location: window.location.href
    });
}

// 例: 資料ダウンロード
document.querySelector('.js-downloadBtn').addEventListener('click', function() {
    gtag('event', 'file_download_click', {
        file_name: 'service-guide.pdf',
        file_type: 'pdf',
        download_source: 'service_page'
    });
});

イベント名の命名規則

カスタムイベント名には以下のルールがある。違反するとデータが収集されないため注意が必要だ。

GTMでのイベント設定

GTM（Googleタグマネージャー）を使えば、コードを直接編集せずにイベントを設定できる。複数の条件を組み合わせたトリガーや、動的な値の取得が必要な場合に特に有効だ。

ステップ1: 変数の設定

GTMの「変数」セクションで、イベントに渡す値を取得するための変数を設定する。

/* GTM 組み込み変数（有効化推奨） */
- Click URL        : クリックされたリンクのURL
- Click Text       : クリックされたテキスト
- Click Element    : クリックされたDOM要素
- Form Element     : 送信されたフォーム要素
- Page Path        : 現在のページパス
- Page URL         : 現在のURL

/* ユーザー定義変数の例 */
変数タイプ: データレイヤーの変数
データレイヤーの変数名: formType
→ dataLayer.push({ formType: 'contact' }) で送信した値を取得

ステップ2: トリガーの作成

イベントを発火させる条件を「トリガー」として定義する。よく使うトリガータイプは以下の通りだ。

ステップ3: タグの作成

トリガーの条件が満たされたときに実行する「タグ」を作成する。GA4イベントの場合、タグタイプは「Googleアナリティクス: GA4 イベント」を選択する。

/* GTMタグ設定例: お問い合わせ送信 */
タグの種類: Google アナリティクス: GA4 イベント
測定ID: G-XXXXXXXXXX
イベント名: generate_lead

イベントパラメータ:
  event_category = contact
  event_label = contact_form
  value = 1

トリガー: 「お問い合わせフォーム送信」トリガー

/* GTMタグ設定例: CTAボタンクリック */
タグの種類: Google アナリティクス: GA4 イベント
測定ID: G-XXXXXXXXXX
イベント名: cta_click

イベントパラメータ:
  button_text = {{Click Text}}
  page_path = {{Page Path}}
  click_url = {{Click URL}}

トリガー: 「CTAボタンクリック」トリガー

ステップ4: dataLayer.push()との連携

フォーム送信完了後やJavaScriptの処理完了後にイベントを送信したい場合は、dataLayer.push() を使ってGTMにデータを渡す。

// フォーム送信成功時にdataLayerへpush
fetch('/api/contact', { method: 'POST', body: formData })
    .then(response => {
        if (response.ok) {
            window.dataLayer = window.dataLayer || [];
            window.dataLayer.push({
                event: 'form_success',
                form_type: 'contact',
                form_destination: 'info@example.com'
            });
        }
    });

// GTM側のトリガー設定:
// タイプ: カスタムイベント
// イベント名: form_success

コンバージョン設定

GA4ではイベントを「コンバージョン（キーイベント）」としてマークすることで、ビジネス上重要な行動を優先的にレポートで追跡できる。2024年3月以降、GA4では「コンバージョン」から「キーイベント」に名称変更されたが、機能は同一だ。

コンバージョン登録の手順

1. GA4管理画面を開き、左メニュー「管理」→「キーイベント」を選択
2. 「新しいキーイベント」をクリック
3. コンバージョンとして計測したいイベント名を入力（例: generate_lead）
4. 「保存」をクリック

フリーランスサイトで登録すべきコンバージョン

デバッグ・確認方法

イベント設定後は、必ずデータが正しく送信されているか確認する。GA4には3つの確認手段がある。

1. DebugView（最も詳細）

GA4管理画面の「管理」→「DebugView」で、リアルタイムにイベントの送信状況を確認できる。デバッグモードを有効にする方法は2つ。

// 方法1: gtag()でデバッグモードを有効化
gtag('config', 'G-XXXXXXXXXX', {
    debug_mode: true
});

// 方法2: Chrome拡張「Google Analytics Debugger」をインストール
// → 拡張機能をONにしてサイトを閲覧するだけ

// 方法3: GTMのプレビューモード経由（後述）

DebugViewでは、イベントがタイムラインで表示され、各イベントをクリックするとパラメータの値も確認できる。イベント名の誤字や、パラメータの値が正しく渡っているかを検証する最も確実な方法だ。

2. リアルタイムレポート（簡易確認）

GA4のレポート画面の「リアルタイム」セクションで、過去30分以内のイベントを確認できる。DebugViewほど詳細ではないが、イベントが計測されているかどうかの簡易確認に便利だ。

3. GTMプレビューモード（GTM利用時）

GTMの「プレビュー」ボタンをクリックすると、Tag Assistantが起動する。ここでは以下を確認できる。

• どのトリガーが発火したか
• どのタグが実行されたか
• dataLayerに何がpushされたか
• 各変数の値は何だったか

フリーランスサイトでよく使うイベント設計例

フリーランスのポートフォリオサイトやコーポレートサイトで実際に設計するイベントの具体例を紹介する。そのままコピーして使えるコード付きだ。

例1: お問い合わせフォーム送信

// フォーム送信成功時
document.querySelector('#contactForm').addEventListener('submit', function(e) {
    // バリデーション通過後に送信
    gtag('event', 'generate_lead', {
        event_category: 'contact',
        event_label: document.querySelector('#inquiry-type').value,
        value: 1,
        currency: 'JPY'
    });
});

// コンバージョンとして登録: generate_lead → キーイベントに設定

例2: ポートフォリオ作品の閲覧

// 作品詳細を開いたとき
function onWorkDetailOpen(work) {
    gtag('event', 'select_content', {
        content_type: 'portfolio',
        item_id: work.id,
        item_name: work.title,
        item_category: work.category  // 'web_design', 'logo', etc.
    });
}

// 作品一覧のフィルター操作
document.querySelectorAll('.js-portfolioFilter').forEach(function(btn) {
    btn.addEventListener('click', function() {
        gtag('event', 'portfolio_filter', {
            filter_category: this.dataset.category,
            results_count: document.querySelectorAll('.work-item:not(.hidden)').length
        });
    });
});

例3: 料金ページの閲覧深度

// 料金セクションが画面に入ったとき（Intersection Observer）
var observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
        if (entry.isIntersecting) {
            gtag('event', 'view_pricing', {
                section_name: entry.target.dataset.section,
                page_path: window.location.pathname
            });
            observer.unobserve(entry.target);
        }
    });
}, { threshold: 0.5 });

document.querySelectorAll('.pricing-plan').forEach(function(el) {
    observer.observe(el);
});

例4: 電話リンクのタップ（モバイル）

// tel:リンクのクリックを計測
document.querySelectorAll('a[href^="tel:"]').forEach(function(link) {
    link.addEventListener('click', function() {
        gtag('event', 'phone_call_click', {
            phone_number: this.href.replace('tel:', ''),
            click_location: this.closest('section')?.id || 'unknown'
        });
    });
});

イベント設計のまとめ表