使い方ガイド MOTENASU

分析 > WEB行動タグ設置

WEB行動タグ設置

▼事前準備：必要なものを確認

事前に必要なもの
  • Googleアカウント - GA4を管理するためのGoogleアカウント
  • GA4プロパティ - Google Analyticsのプロパティ作成（以下の手順で作成）
  • ウェブサイトの管理権限 - HTMLファイルを編集できる権限

注意点

Googleアカウントをお持ちでない方：

Googleアカウント作成

GA4プロパティとデータストリームの作成手順

まず、Google AnalyticsでGA4プロパティとWebサイト用のデータストリームを作成します。

1. GA4管理画面にアクセス

Google Analytics を開く
Googleアカウントでログインしてください。

2. 管理画面を開く

左下の「⚙️ 管理」をクリックします。

3. データストリームを開く

左側メニュー「プロパティ設定」の中から「データストリーム」をクリックします。

データストリームメニュー

4. 新しいストリームを追加

右上の「ストリームを追加」ボタンをクリックし、プラットフォームは「ウェブ」を選択してください。

重要

MOTENASUは「ウェブ」プラットフォームのみ対応しています。

  • ✅ ウェブ：対応（必ずこちらを選択）
  • ❌ iOS アプリ：対応していません
  • ❌ Android アプリ：対応していません

※ モバイルブラウザ（スマートフォン・タブレットのブラウザ）からのアクセスは「ウェブ」として計測されますので、問題なく利用できます。

ストリームを追加ボタン

5. プラットフォーム情報を入力

※ 入力例：

  • ウェブサイトのURL：例 www.mywebsite.com
  • ストリーム名：例 ウェブサイト（任意の名前でOK）
  • 拡張計測機能：✅ チェックを入れたまま（推奨）

※ モバイルアプリを選択した場合： バンドルID（iOS）またはパッケージ名（Android）を入力します。

入力後、画面下部の「ストリームを作成」ボタンをクリックします。

ストリーム設定画面

6. ストリーム作成完了を確認

ストリームが作成されると、データストリーム一覧に表示されます。

作成したストリーム（例：MOTENASU SHOP）の右側にある「→」をクリックして詳細画面を開きます。

データストリーム一覧

7. 測定IDを確認

「ウェブストリームの詳細」画面で、測定ID（G-XXXXXXXXXX の形式）をコピーしてください。

測定IDの確認

重要

この測定IDは、次のセクションでタグ設置時に使用します。

GA4プロパティの作成完了

測定ID（G-XXXXXXXXXX）を控えたら、次のセクションに進んでください。

補足：プロパティIDについて

MOTENASUのBigQuery連携設定では「プロパティID」（9-12桁の数字）が必要になります。

確認方法：

GA4管理画面 → ⚙️ 管理 → プロパティ列の「プロパティの詳細」をクリック → 右上に表示される「プロパティ ID」をコピー

プロパティIDの確認方法

▼BigQuery連携準備（MOTENASU側で実施）

重要

セクション1で作成したGA4プロパティIDを使用して、MOTENASU側でBigQuery連携の準備を行います。

MOTENASU側で実施する内容
1. お客様情報の登録

以下の情報をMOTENASU管理画面に登録します：

  • GA4管理者メールアドレス
  • GA4プロパティID（セクション1で確認した9-12桁の数字）
  • ご利用プラン
  • 許可ドメイン
2. BigQueryデータセットの自動作成

以下の処理を自動実行します：

  • 専用DBデータセットの作成（analytics_[プロパティID]形式）
  • データロケーション：asia-northeast1（東京）
3. IAM権限の自動付与

セキュアな権限設定を自動で行います：

  • お客様メールアドレスへのデータセット閲覧権限付与
  • GA4サービスアカウントへのデータ書き込み権限付与
  • セキュリティ分離設定（他のお客様データへのアクセス防止）
お客様側での最終設定（GA4管理画面でのBigQuery連携）

MOTENASU側でのセットアップ完了後、お客様のGA4管理画面でBigQuery連携の最終設定を行います。

重要

MOTENASU側で準備したBigQueryデータセットと権限を、GA4管理画面から連携させる最終ステップです。

1. GA4管理画面にログイン

MOTENASUから通知されたメールアドレスでGA4管理画面にアクセスします。

Google Analytics を開く

2. 管理画面からBigQueryのリンクを開く

左下の「⚙️ 管理」をクリック → プロパティ列の「プロダクトのリンク」→「BigQueryのリンク」を選択します。

BigQueryのリンクメニュー

3. 新しいリンクを作成

「BigQueryのリンク」画面で、右上の「リンク」ボタン（青いボタン）をクリックします。

リンクボタン

注意

既存のBigQueryリンクが表示されている場合は、このステップをスキップしてください。

4. BigQueryプロジェクトを選択

「BigQuery プロジェクトを選択」画面が表示されます。

「BigQuery プロジェクトを選択」ボタンをクリックします。

BigQueryプロジェクトを選択

5. MOTENASU-prodプロジェクトを選択

アクセス権のあるBigQueryプロジェクト一覧から、MOTENASU-prod を選択します。

MOTENASU-prodプロジェクト選択

注意

MOTENASU-prod が表示されない場合は、MOTENASU側での権限付与が完了していない可能性があります。MOTENASUサポートにお問い合わせください。

6. データセットとロケーションを設定

プロジェクト選択後、以下の設定を行います：

  • データセット：analytics_[プロパティID] を選択
    例：analytics_123456789（MOTENASU側で作成済み）
  • データの場所：asia-northeast1 (東京) を選択
  • データストリーム：エクスポートしたいストリームにチェック（通常は全選択）
7. エクスポート頻度を選択

以下のエクスポート設定を行います：

  • 毎日のエクスポート：✅ 有効化してください（必須）
    → 毎日0時（JST）に前日分のデータが自動エクスポートされます
  • ストリーミングエクスポート：❌ 有効化しないでください
    → リアルタイム送信は課金対象のため、通常は不要です

重要

毎日のエクスポートのみで十分です。翌日には前日分のデータがMOTENASUダッシュボードで確認できます。

8. 設定を確認して送信

設定内容を確認し、「送信」ボタンをクリックします。

完了

BigQueryリンクが作成されました！

「BigQueryのリンク」一覧にリンクが表示され、ステータスが「有効」になれば完了です。

注意事項

  • BigQuery連携設定が完了するまで、データのエクスポートは開始されません
  • 設定完了後、最初のデータが表示されるまで24-48時間かかる場合があります
  • ストリーミングエクスポートは高額な課金が発生するため、通常は無効のままにしてください

セキュリティ設計

お客様は自分専用のデータセット（analytics_[プロパティID]）のみアクセス可能です。他のお客様のデータや社内データへのアクセスは完全に制限されています。

▼統合ライブラリの設置方法

Shopifyをご利用の方へ

Shopifyストアをご利用の場合は、Shopify専用の設置ガイドをご確認ください。

Shopify専用 GA4タグ設置ガイドはこちら

既存のGoogle Tag Manager (GTM) を使用している場合

GTMとの共存について:

MOTENASUのGA4タグは、既存のGTM（Google Tag Manager）と共存できますが、以下の点にご注意ください。

推奨設定パターン

パターン1: 別々の測定ID（推奨）

  • GTM: G-AAAAAAAAA（既存のGA4測定ID）
  • MOTENASU: G-BBBBBBBBB（新しいGA4測定ID）
  • ✅ メリット: 完全に独立して動作、イベント重複なし
  • ❌ デメリット: 2つのGA4プロパティを管理

パターン2: GTMを削除してMOTENASUのみ

  • 既存のGTMタグを削除
  • MOTENASUのGA4タグのみ使用
  • ✅ メリット: シンプル、重複なし
  • ❌ デメリット: GTMの他の機能が使えなくなる

⚠️ 重要

GTMとMOTENASUで同じ測定IDを使用すると、イベントの二重送信や設定の競合が発生します。必ず別々の測定ID（パターン1）を使用してください。

ga4-common.js 統合ライブラリ設置【推奨】

たった1つのファイルを読み込むだけで、すべてのGA4機能が利用できます。従来の複数ファイル管理から解放される最もシンプルな方法です。

1. 測定IDを取得

GA4管理画面 → 「管理」→ 「データストリーム」→ 該当するストリームをクリック

「G-XXXXXXXXXX」形式の測定IDをコピーします。

2. MOTENASU提供の固定URLを確認

MOTENASUが提供する固定のJSライブラリURLを使用します。

ファイルのダウンロードや配置は不要です。

URL例：https://ga4.motenasu-cdn.com/ga4-common.js

3. HTMLに統合ライブラリを読み込み

ウェブサイトのすべてのページの<head>タグ内に以下のコードを貼り付けます：

<!-- GA4統合ライブラリ（MOTENASU提供・固定URL） -->
<script src="https://ga4.motenasu-cdn.com/ga4-common.js"></script>

<script>
    // GA4統合クラスで初期化（推奨パターン: ネームスペース化）
    window.MOTENASU = window.MOTENASU || {};
    window.MOTENASU.ga4 = new GA4Analytics({
        // ↓ あなたのGA4測定IDに変更してください
        measurementId: 'G-XXXXXXXXXX',
        debugMode: false // 本番環境ではfalse
    });
</script>
実際の設置例

HTMLファイルの完全な例を示します。統合ライブラリを使用したシンプルな設置例：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>あなたのサイトタイトル</title>
    
    <!-- GA4統合ライブラリ（1つのファイルのみ） -->
    <script src="https://ga4.motenasu-cdn.com/ga4-common.js"></script>
    <script>
      // シンプルな初期化（全機能が有効になります）
      window.MOTENASU = window.MOTENASU || {};
      window.MOTENASU.ga4 = new GA4Analytics({
          measurementId: 'G-XXXXXXXXXX',
          debugMode: false
      });
    </script>
    
    <!-- その他のCSS、メタタグなど -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- ページコンテンツ -->
    <h1>ページタイトル</h1>
    <p>ページ内容...</p>
</body>
</html>
統合ライブラリを使った簡単なイベント追跡

統合ライブラリを使用すると、よりシンプルで直感的なイベント追跡が可能です：

// 統合ライブラリでのイベント追跡例
<script>
// ボタンクリック（手動追跡用）
// ⚠️ 注意: ボタンクリックは自動追跡されません。追跡したいボタンに個別に設定が必要です。
function trackButtonClick(buttonName) {
    window.MOTENASU.ga4.core.trackButtonClick(buttonName);
}

// フォーム送信（手動追跡用 - 自動追跡有効時は不要）
function trackFormSubmit(formName) {
    window.MOTENASU.ga4.core.trackFormSubmit(formName);
}

// 自動追跡を有効にする（推奨）
window.MOTENASU.ga4.enableAutoTracking({
    downloads: true,     // ファイルダウンロード追跡（コンバージョン分析ダッシュボードで使用）
    forms: true          // フォーム送信追跡（コンバージョン分析ダッシュボードで使用）
    // 注意: buttons自動追跡機能はありません。重要なボタンのみ手動で実装してください。
});
</script>

<!-- ボタンクリック追跡（コンバージョン分析ダッシュボードで「ボタンクリック→コンバージョン分析」に使用） -->
<!-- 各ボタンにonclickイベントを追加して追跡 -->
<button onclick="trackButtonClick('今すぐ購入')">今すぐ購入</button>
<button onclick="trackButtonClick('カートに追加')">カートに追加</button>
<button onclick="trackButtonClick('お問い合わせ')">お問い合わせ</button>

<!-- 追跡されないボタンの例（onclickなし） -->
<button>詳細を見る</button>  <!-- このボタンは追跡されません -->

<!-- フォーム送信（自動追跡有効時は手動設定不要） -->
<form name="contact_form" id="contact_form">
    <!-- 自動追跡により、フォーム送信が自動的に計測されます -->
</form>

<!-- ファイルダウンロード（自動追跡有効時は手動設定不要） -->
<a href="/resources/product-catalog.pdf">製品カタログ</a>
<a href="/resources/price-list.pdf">価格表</a>
統合ライブラリでのEコマース設定例

オンラインショップの場合、統合ライブラリの簡潔なメソッドで購入完了やカート追加を計測できます：

// 購入完了イベント（サンキューページに設置）
<script>
// 統合メソッドで購入完了を処理（全機能を一括実行）
window.MOTENASU.ga4.handlePurchase({
    transaction_id: '12345',
    value: 15000,
    tax: 1500,           // 税額
    shipping: 500,       // 送料
    currency: 'JPY',
    items: [{
        item_id: 'SKU001',
        item_name: '商品名A',
        item_category: 'カテゴリ',
        quantity: 1,
        price: 15000
    }]
});
</script>

// 商品閲覧イベント（商品詳細ページで使用）
<script>
function trackViewItem(itemId, itemName, price, category) {
    // Eコマースモジュールで商品閲覧を追跡
    window.MOTENASU.ga4.ecommerce.trackViewItem({
        item_id: itemId,
        item_name: itemName,
        price: price,
        item_category: category || '',
        quantity: 1
    });
}
</script>

<!-- 商品詳細ページでの使用例 -->
<script>
// ページ読み込み時に自動実行
trackViewItem('SKU001', 'プレミアム商品A', 15000, 'Electronics');
</script>

// カート追加イベント
<script>
function trackAddToCart(itemId, itemName, price, imageUrl) {
    // 統合メソッドでカート追加を処理
    window.MOTENASU.ga4.handleAddToCart({
        item_id: itemId,
        item_name: itemName,
        price: price,
        quantity: 1,
        image_url: imageUrl || ''  // 商品画像URL（離脱配信のカート情報表示用）
    });
}
</script>

<!-- 商品ページでの使用例 -->
<button onclick="trackAddToCart('SKU001', '商品名A', 15000, 'https://example.com/images/product001.jpg')">
    カートに追加
</button>

// 購入手続き開始イベント（カートページの「レジに進む」「購入手続きへ」ボタンで使用）
<script>
function trackBeginCheckout(items, totalValue, coupon) {
    // 購入手続き（注文画面）への移動を追跡
    window.MOTENASU.ga4.ecommerce.trackBeginCheckout(items, coupon || '');
}
</script>

<!-- カートページでの使用例 -->
<button onclick="trackBeginCheckout([{item_id: 'SKU001', item_name: '商品A', price: 15000, quantity: 2}], 30000)">
    レジに進む
</button>
カート削除・クリア機能【重要】

カートから商品を削除したり、カート全体をクリアする場合の実装方法です。カゴ落ち精度向上のために必須の機能です：

// 個別商品をカートから削除
<script>
function removeFromCart(itemId, quantity = null) {
    // 統合メソッドで商品削除を処理（DBにも記録）
    window.MOTENASU.ga4.ecommerce.trackRemoveFromCart({
        item_id: itemId,
        quantity: quantity || 1
    });
}

// 商品オブジェクトを指定した削除
function removeCartItem(item) {
    window.MOTENASU.ga4.ecommerce.trackRemoveFromCart({
        item_id: item.id,
        item_name: item.name,
        price: item.price,
        quantity: item.quantity
    });
}
</script>

<!-- カートページでの使用例 -->
<button onclick="removeFromCart('SKU001', 1)">
    商品を削除
</button>

// カート全体をクリア
<script>
function clearCart(reason = 'user_action') {
    // 統合メソッドでカート全削除を処理（DBにも記録）
    window.MOTENASU.ga4.ecommerce.trackClearCart({
        reason: reason
    });
}

// ユーザーがカートを空にした場合
function handleClearCartButton() {
    // UI側でカートを空にする
    clearCartDisplay();
    
    // GA4に通知（カゴ落ち分析で正確な状態を記録）
    window.MOTENASU.ga4.ecommerce.trackClearCart({
        reason: 'user_clear_button'
    });
}
</script>

<!-- カートページでの使用例 -->
<button onclick="handleClearCartButton()">
    カートを空にする
</button>

// 数量変更（削除の応用）
<script>
function updateCartQuantity(itemId, newQuantity, currentQuantity, imageUrl) {
    if (newQuantity < currentQuantity) {
        // 数量減少 = 一部削除
        const removeQty = currentQuantity - newQuantity;
        window.MOTENASU.ga4.ecommerce.trackRemoveFromCart({
            item_id: itemId,
            quantity: removeQty
        });
    } else if (newQuantity > currentQuantity) {
        // 数量増加 = 追加
        const addQty = newQuantity - currentQuantity;
        window.MOTENASU.ga4.handleAddToCart({
            item_id: itemId,
            quantity: addQty,
            image_url: imageUrl || ''  // 商品画像URL
        });
    }
}
</script>

重要：カート削除機能の必要性

1. カゴ落ち精度向上：削除された商品も含めて分析すると精度が低下
2. DB登録：削除イベントも自動記録され、正確なカート状態を復元可能
3. CRM連携：カート状態の変更がリアルタイムでCRMに反映

自動追跡機能（設定するだけで自動動作）
// 自動追跡を有効化（1回設定するだけ）
window.MOTENASU.ga4.enableAutoTracking({
    downloads: true,     // ファイルダウンロード追跡
    forms: true          // フォーム送信追跡
});

// 以下は自動実行される（手動実装不要）
// - ADCODE自動検知（?adcode=ABC123）
// - loginKey自動検知（?loginkey=xxxxx）
// - UTMパラメータ自動検知（広告効果測定）

自動追跡機能について

有効化される機能:

  • downloads: true - ファイルダウンロード追跡
    • PDF、ZIP、Excel、Word、PowerPoint、画像、メディアファイル等のダウンロードを自動計測
    • 対象拡張子: pdf, doc, docx, xls, xlsx, ppt, pptx, txt, csv, zip, rar, 7z, tar, gz, jpg, jpeg, png, gif, webp, svg, mp3, mp4, avi, mov, wmv, flv, dmg, exe, apk, ipa
    • イベント名: custom_file_download
    • コンバージョン分析ダッシュボードで「ファイルダウンロード→コンバージョン分析」に使用
    • ダウンロードページ、ファイル種類別のCV転換率が計測可能
  • forms: true - フォーム送信追跡
    • 問い合わせフォーム、会員登録フォーム、ニュースレター登録等、全ての <form> タグの送信を自動計測
    • 追跡される情報: フォームID、フォーム名、フォームフィールド数（入力値は追跡されません）
      • 例: <form id="contact_form" name="お問い合わせ"> の場合
        • フォームID: contact_form
        • フォーム名: お問い合わせ
        • フォームフィールド数: 3 (お名前、メールアドレス、お問い合わせ内容)
        • ❌ 追跡されない: 実際の入力内容（田中太郎、tanaka@example.com、商品について...）
    • プライバシー保護: フォームに入力された個人情報や機密情報は一切送信されません
    • イベント名: custom_form_submit
    • コンバージョン分析ダッシュボードで「フォーム送信→コンバージョン分析」に使用
    • フォームID・フォーム名で区別可能、フォーム別の送信数・CV転換率が計測可能
    • 注意: 重要なフォーム（購入、会員登録等）は個別にカスタムイベント名を設定することを推奨
ECサイト実装の優先順位
最優先（必須実装）
  • 購入完了 - handlePurchase()
  • カート追加 - handleAddToCart()
  • カート削除 - removeFromCart() ★カゴ落ち精度向上
  • 自動追跡有効化 - enableAutoTracking()
高優先（強く推奨）
  • 商品詳細閲覧 - trackViewItem()
  • チェックアウト開始 - trackBeginCheckout()
  • カート全削除 - clearCart() ★カゴ落ち精度向上

重要：カート削除機能について

従来はカート「追加」のみの追跡でしたが、カゴ落ち精度向上のためには「削除」「クリア」の追跡も必須です。DBに削除イベントも記録され、正確なカート状態の復元が可能になります。

実装パターン例

上記の最優先メソッド4つ（購入・追加・削除・自動追跡）を実装するだけで、基本的なEC分析からカゴ落ち配信まで対応可能です。

コンバージョン分析ダッシュボードを利用する場合の追加実装：

ボタンクリック追跡（trackButtonClick）を追加実装することで、以下のコンバージョン分析が可能になります：

  • 資料ダウンロード→購入：カタログPDFダウンロード後の購入転換率を測定
  • 特定LP→購入：キャンペーンLPからの購入転換率を測定
  • 問い合わせ→購入：お問い合わせフォーム送信後の購入転換率を測定
  • 会員登録→購入：新規会員登録後の購入転換率を測定

ボタンクリック追跡の重要ポイント：

  • ⚠️ 自動追跡なし: フォーム送信やファイルダウンロードと異なり、ボタンクリックは自動追跡されません
  • 手動実装が必須: 追跡したいボタンに個別に onclick イベントを追加する必要があります
  • 追跡される情報: ボタンテキスト（またはカスタム名称）、クリック時刻、ページURL、ユーザーID
  • 推奨実装: コンバージョンに影響する重要なボタンのみ追跡（全ボタン追跡は不要）

実装例：

<!-- 追跡されるボタン -->
<button onclick="trackButtonClick('今すぐ購入')">今すぐ購入</button>
<button onclick="trackButtonClick('無料相談申込')">無料相談申込</button>
<a href="/catalog.pdf" onclick="trackButtonClick('カタログダウンロード')">カタログDL</a>

<!-- 追跡されないボタン（onclickなし） -->
<button>詳細を見る</button>
<button>閉じる</button>

▼CookieID基準のユーザー識別・自動紐付け仕様【重要】

概要

基本原則

CookieID（user_pseudo_id）を基準に同一ユーザーを識別し、一度紐付いたuser_idを自動的に全イベントに適用します。

重要： 一度CookieIDとuser_idが紐付いたら、そのCookieIDからの全アクセス（loginKeyなし、未ログインでも）に自動的にuser_idを付与します。

ユーザー紐付けトリガー
1. loginKeyパラメータ経由

メール配信URLなどからのアクセス時、自動的にユーザーを識別

MOTENASUでのタグ利用

MOTENASUのメール配信・LINE配信などで、配信URLに [[LOGINKEY]] タグを挿入することで、受信者ごとに一意のloginKeyが自動生成されます。

// MOTENASU配信URL設定例
https://example.com/campaign?[[LOGINKEY]]

// 実際の配信時に、受信者ごとに以下のように置き換えられます
https://example.com/campaign?loginkey=2f98599a5491e580

// SDK側で自動検出（設定不要）
// loginKey自動検知は常時有効のため、自動的に処理されます
2. user_management_idパラメータ経由（チャネル配信成果取得）【開発中】

MOTENASUのチャネル配信（メール・LINE・SMS・DM）からの成果を測定し、どの配信からコンバージョンしたかを自動的に識別

MOTENASUでのタグ利用

MOTENASUのチャネル配信で、配信URLに [[UMID]] タグを挿入することで、配信ごとに一意のuser_management_idが自動生成されます。

測定できる情報：

  • どのチャネル配信（メール/LINE/SMS/DM）からのCVか
  • 配信キャンペーン別の成果
  • 配信セグメント別の転換率
  • 配信からCV までの経路分析
// MOTENASU配信URL設定例
https://example.com/campaign?[[UMID]]

// 実際の配信時に、配信ごとに以下のように置き換えられます
https://example.com/campaign?user_management_id=111111

// SDK側で自動検出（設定不要）
// user_management_idは自動的にGA4イベントに付与され、BigQueryに記録されます

[[LOGINKEY]]と[[UMID]]の併用

両方のタグを同時に使用することで、より詳細な分析が可能です：

// 両方を併用した配信URL
https://example.com/campaign?[[LOGINKEY]]&[[UMID]]

// 実際の配信URL（自動生成）
https://example.com/campaign?loginkey=2f98599a5491e580&user_management_id=111111
  • [[LOGINKEY]]：誰がアクセスしたか（ユーザー識別）
  • [[UMID]]：どの配信からアクセスしたか（配信成果識別）
3. ログイン処理時の手動設定（オプション）

ログイン済みユーザーのIDを設定する場合は、以下のいずれかの方法で実装できます。

方法1: 静的HTML埋め込み（推奨・最も簡単）

サーバー側でログイン済みユーザーIDをHTMLに埋め込み、ページ読み込み時に自動設定

// ログイン後のページHTMLに以下を追加（PHP/Ruby/Python等のテンプレート）
<script>
    // ログイン済みの場合のみ実行
    if ('<?php echo isset($_SESSION["user_id"]) ? "true" : "false"; ?>' === 'true') {
        window.MOTENASU.ga4.setUserIdAfterLogin('<?php echo $_SESSION["user_id"]; ?>');
    }
</script>

方法2: data属性を使った静的設定

HTMLのdata属性にユーザーIDを埋め込み、SDK側で自動読み取り

// HTML（ログイン済みの場合のみdata-user-idを出力）
<body data-user-id="<?php echo $_SESSION['user_id'] ?? ''; ?>">

// JavaScript（ページ読み込み時に自動実行）
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const userId = document.body.getAttribute('data-user-id');
        if (userId) {
            window.MOTENASU.ga4.setUserIdAfterLogin(userId);
        }
    });
</script>

方法3: グローバル変数を使った静的設定

サーバー側でJavaScript変数として出力

// サーバー側テンプレートで変数出力
<script>
    var CURRENT_USER_ID = '<?php echo $_SESSION["user_id"] ?? ""; ?>';
</script>

// GA4初期化後に実行
<script>
    if (CURRENT_USER_ID) {
        window.MOTENASU.ga4.setUserIdAfterLogin(CURRENT_USER_ID);
    }
</script>

重要

  • loginKeyパラメータがある場合は手動設定不要 - loginKeyから自動的にuser_idが取得されます
  • 一度設定すれば永続化 - 次回アクセス時は自動的にuser_idが付与されるため、毎回の設定は不要
  • 方法1が最も簡単 - 既存のログイン処理に1行追加するだけで完了
自動紐付けの仕組みとデータ保持期間

重要な仕様

1. 7日間遡及更新： user_id紐付け時、過去7日間のイベントデータを遡って更新
2. 自動付与： 紐付け後は、loginKeyなしのアクセスでも自動的にuser_idが付与

user_idの保持期間
設定方法 保持期間 説明
loginKey経由（URLパラメータ） GA4セッションが変わるまで GA4のセッションID（_gaのセッション）が変更されると自動的にクリアされます。通常30分の非アクティブ後に新セッションとなります。
手動ログイン（setUserIdAfterLogin） 永続的 明示的なログアウト（handleLogout呼び出し）またはブラウザデータ削除まで保持されます。セッション変更の影響を受けません。
GA4のCookie（_ga） 最大2年間（ブラウザにより異なる） Googleが管理するCookieID（user_pseudo_id）の有効期限。Chrome/Firefox: 最大2年間、Safari: 最大7日間
実装例：基本的な設定

最もシンプルな実装例です。メール配信のURLに自動的に追加されるloginKeyパラメータにより、ユーザーが自動的に識別されます。

基本的な流れ

1. GA4ライブラリを設置（セクション4参照）
2. メール配信URLに [[LOGINKEY]] を含める
3. ユーザーがリンクをクリックすると自動的に識別される
4. 以降のアクセスでも自動的にユーザーが識別される

メール配信URLの設定例
// メール本文のリンク例
https://example.com/campaign?[[LOGINKEY]]

// 実際に配信されるURL（自動生成）
https://example.com/campaign?loginkey=2f98599a5491e580

完了

これだけで完了！ 追加のコーディングは不要です。

注意点

  • setUserIdAfterLogin()は、ログイン成功時に1回だけ呼び出してください
  • 一度紐付けが完了すると、以降のイベントには自動的にuser_idが付与されます
  • loginKeyパラメータは自動検出されるため、手動での処理は不要です
  • 過去7日を超えるデータは遡及更新されません（パフォーマンス考慮）

▼広告効果測定：UTMパラメータの使い方

UTMパラメータとは？

UTMパラメータは、Meta（Facebook）、Google広告、Yahoo!広告などの広告効果を測定するための標準的な方法です。URLに追加することで、どの広告からユーザーが来たのかを自動的に識別できます。

重要

GA4ライブラリが自動検知： UTMパラメータ付きのURLでアクセスすると、自動的に広告データが記録されます。追加のコーディングは不要です。

UTMパラメータの種類
パラメータ 説明 例
utm_source 参照元（どの媒体か） facebook, google, yahoo, line
utm_medium メディア（広告の種類） cpc, display, social, email
utm_campaign キャンペーン名 summer_sale_2024, new_product
utm_term 検索キーワード（オプション） running_shoes, fitness
utm_content 広告バリエーション（オプション） banner_a, text_ad_1
広告プラットフォーム別設定方法
Google広告【推奨：自動タグ設定】

最も簡単

Google広告とGA4をリンクすれば、UTMパラメータ不要で自動計測されます。

設定手順：

  1. Google広告管理画面 → 「ツールと設定」→ 「リンクされたアカウント」
  2. 「Google Analytics（GA4）」→ 「詳細を表示」→ 「リンク」
  3. 「自動タグ設定」を有効化

完了

これだけで完了！ UTMパラメータの手動設定は不要です。

手動設定する場合（自動タグ設定が使えない場合のみ）：

utm_source=google&utm_medium=cpc&utm_campaign={campaignid}&utm_term={keyword}

設定場所： キャンペーン → 設定 → キャンペーンのURLオプション → 「トラッキングテンプレート」

Meta（Facebook/Instagram）広告【ダイナミックパラメーター推奨】

Meta広告では、広告ごとに「ダイナミックパラメータ」を使って自動的にパラメータを設定できます。

utm_source=facebook&utm_medium=paid_social&utm_campaign={{campaign.name}}&utm_content={{ad.name}}

ダイナミックパラメータの例：

  • {{campaign.name}} - キャンペーン名が自動入力
  • {{adset.name}} - 広告セット名が自動入力
  • {{ad.name}} - 広告名が自動入力
  • {{site_source_name}} - Facebook/Instagramが自動判別

設定場所： Meta広告マネージャー → 広告作成 → 「トラッキング」セクション → 「URLパラメーター」

注意

キャンペーン名・広告セット名・広告名は必ず半角英数字で作成してください。日本語を使うと文字化けします。

Yahoo!広告【2025年新パラメータ対応】

Yahoo!広告では、アカウント・キャンペーン・広告グループなど様々な階層で設定できます。

utm_source=yahoo&utm_medium=cpc&utm_campaign={campaign}&utm_term={keyword}

設定場所：

  • アカウント全体： アカウント → ツール → トラッキング → アカウントトラッキング
  • キャンペーン単位： キャンペーン → 設定 → URLオプション

2025年対応

Yahoo!広告は2025年1月より新しいパラメータを導入しました。最新の設定についてはYahoo!広告の公式ヘルプをご確認ください。

LINE広告
utm_source=line&utm_medium=paid_social&utm_campaign=friend_acquisition&utm_content=banner_a

設定場所： LINE広告マネージャー → 広告作成 → 「トラッキング」→ 「カスタムパラメータ」

X（Twitter）広告

X広告では、動的パラメータを使用して自動的にUTMパラメータを設定できます。

utm_source=twitter&utm_medium=paid_social&utm_campaign={{campaign.name}}&utm_content={{tweet.id}}

X広告の動的パラメータ：

  • {{campaign.name}} - キャンペーン名
  • {{campaign.id}} - キャンペーンID
  • {{tweet.id}} - ツイートID
  • {{lineitem.name}} - 広告グループ名

設定場所： X Ads Manager → キャンペーン作成 → 広告グループ → トラッキングパラメータ

ヒント

X広告では、プロモーション済みツイートごとに異なるUTMパラメータを設定できるため、個別のツイートパフォーマンスを詳細に分析できます。

TikTok広告

TikTok広告では、マクロ（動的パラメータ）を使用してUTMパラメータを自動設定できます。

utm_source=tiktok&utm_medium=paid_social&utm_campaign=__CAMPAIGN_NAME__&utm_content=__AID_NAME__&utm_term=__CID__

TikTok広告のマクロ：

  • __CAMPAIGN_NAME__ - キャンペーン名
  • __AID_NAME__ - 広告名
  • __CID__ - クリエイティブID
  • __PLACEMENT__ - 配置（TikTok/Pangle等）
  • __ADGROUP_NAME__ - 広告グループ名

設定場所： TikTok Ads Manager → キャンペーン → 広告グループ → トラッキング → URLパラメータ

注意

TikTokのマクロは二重アンダースコア（__）で囲む必要があります。また、キャンペーン名などは半角英数字で設定することを推奨します。

ADCODEとの併用

UTMパラメータとMOTENASUのADCODEは同時に使用できます：

https://example.com/product?adcode=ABC123&utm_source=facebook&utm_medium=cpc&utm_campaign=summer_sale

推奨

UTMパラメータで広告媒体を識別し、ADCODEで社内管理用のコードを使い分けると、より詳細な分析が可能になります。

データの確認方法

設定したUTMパラメータは以下で確認できます：

  • GA4管理画面： レポート → 集客 → トラフィック獲得
  • 流入元効果測定ダッシュボード： チャネル別・キャンペーン別の詳細分析
  • DBテーブル： 最大2年間のデータ保持

注意

UTMパラメータは大文字小文字を区別します。統一したルールで設定してください（例：すべて小文字、アンダースコア区切り）。

▼設置確認：正しく動作しているかチェック

リアルタイムレポートで確認
1. GA4管理画面を開く

Google Analytics を開く

2. リアルタイムレポートを確認

左メニューの「レポート」→ 「リアルタイム」をクリック

別のブラウザやスマートフォンでサイトにアクセスして、アクティブユーザー数が表示されるか確認

正常な状態

リアルタイムレポートでアクティブユーザーが「1」以上表示される

Google Tag Assistant（Chrome拡張）で確認
1. 拡張機能をインストール

Tag Assistant をインストール

2. サイトで確認

自分のサイトにアクセスして、Tag Assistant のアイコンをクリック

「Google Analytics GA4」が緑色で表示されていれば正常に動作中

ブラウザの開発者ツールで確認
1. 開発者ツールを開く

サイトにアクセスして F12 キーを押す（または右クリック→「検証」）

2. Networkタブで確認

「Network」タブ → ページをリロード → 「collect」で検索
「https://www.google-analytics.com/g/collect」へのリクエストが送信されていれば正常

よくある問題

データが表示されない場合は、24時間程度待ってから再確認してください。GA4は初期データの反映に時間がかかることがあります。

▼基本設定の完了

設置完了

タグ設置が正常に確認できれば、基本設定は完了です。GA4はDBにデータをエクスポートし、MOTENASUで分析ダッシュボードを構築するため、GA4管理画面での追加設定は不要です。

▼よくある問題と解決方法

データが表示されない

症状

GA4を設置したが、データが一切表示されない

解決方法：
  • 時間を置く： 初回設置から24-48時間待つ
  • 測定IDを確認： 正しいIDが設定されているか確認
  • タグの配置： <head>内に正しく配置されているか確認
  • JavaScriptエラー： ブラウザのコンソールでエラーを確認
  • AdBlocker： 広告ブロッカーを無効にして確認
リアルタイムデータは見えるが履歴データがない

症状

リアルタイムレポートには表示されるが、過去のデータが蓄積されない

解決方法：
  • データ保持設定： 管理 → データ設定 → データ保持 を確認
  • フィルター設定： 内部トラフィックフィルターの影響を確認
  • タイムゾーン： プロパティのタイムゾーン設定を確認
データが部分的にしか表示されない

症状

一部のページやイベントのデータが取得できない

解決方法：
  • 全ページ設置確認： すべてのページにタグが設置されているか確認
  • SPA対応： Single Page Applicationの場合は追加設定が必要
統合ライブラリが読み込まれない

症状

ga4-common.jsが読み込まれない、またはGA4クラスが使用できない

解決方法：
  • ファイルパス確認： ga4-common.jsのパスが正しく設定されているか確認
  • ファイル存在確認： ga4-common.jsファイルがサーバー上に存在するか確認
  • 初期化タイミング： DOMContentLoadedイベント内で初期化しているか確認
  • デバッグモード： debugMode: true でブラウザコンソールのログを確認
URLパラメータの自動検知が動作しない

症状

URLパラメータを付けてもイベントが送信されない、またはユーザー識別されない

自動検知されるパラメータ一覧：
パラメータ名 用途 形式
loginkey / loginKey ユーザー自動識別（user_id設定） 任意の文字列
adcode / ADCODE MOTENASU広告コード追跡 4-50文字の英数字
user_management_id チャネル配信情報追跡 数字のみ
utm_source 流入元（Google、Facebook等） 任意の文字列
utm_medium 流入媒体（cpc、email等） 任意の文字列
utm_campaign キャンペーン名 任意の文字列
utm_term 検索キーワード 任意の文字列
utm_content 広告コンテンツ識別 任意の文字列
解決方法：
  • パラメータ形式確認： 上記の正しいパラメータ名を使用しているか確認
  • バリデーション確認： adcodeは4-50文字の英数字、user_management_idは数字のみ
  • デバッグモード： debugMode: true にしてコンソールログを確認
    • loginKey検知: 「GA4Analytics: Login key detected and user_id set」
    • adcode検知: 「GA4Adcode: Processing adcode」
    • user_management_id検知: 「GA4Adcode: Processing user_management_id」
    • UTMパラメータ検知: 「GA4Attribution: New traffic source detected」
  • URL例： https://example.com/?loginkey=ABC123&utm_source=google&utm_medium=cpc
測定IDがわからない

確認方法

GA4管理画面 → 管理 → データストリーム → 該当ストリーム → 「G-XXXXXXXXXX」を確認