クイズファネルのイベントを計測し、Google Tag Managerにデータを送る方法

はじめに

クイズファネルは、デジタルマーケティングで最も強力なリード獲得ツールの1つです。訪問者を引き込み、貴重なファーストパーティデータを集め、オーディエンスのニーズを理解する助けになり、同時にリードの選別とコンバージョン率の最大化も行えます。

しかし、ここに問題があります。適切なトラッキングがなければ、手探り状態です。

リードを集めてLeadsPediaやLeadProsperなどのリード配信プラットフォームに送っているかもしれません。しかし、どのクイズの質問が最も響いているか、本当にわかっていますか？ ユーザーはどこで離脱しているか？ バイヤーが実際に受け入れる、意欲の高いリードにはどんな回答の組み合わせが当てはまるか？ そして何より、このデータの宝の山を活かして、FacebookやGoogleの広告キャンペーン向けにピンポイントなオーディエンスを作れていますか？

そこで登場するのがGoogle Tag Manager（GTM）とDataLayerです。

LanderLabのユーザーは、さまざまな業界で、高コンバージョンのランディングページとクイズファネルを何千も作ってきました。そこでよく聞かれる質問がこれです：「クイズを計測して、そのデータを広告の改善やリードの質の向上に活かすにはどうすればいいですか？」

このガイドでは、GTMとDataLayerを使ってクイズファネルのトラッキングを実装する方法を、順を追って解説します。

取り上げる内容：

• DataLayerとは何か、なぜクイズのトラッキングに欠かせないのか
• すべてのクイズファネルで計測すべき主要イベント
• コード例付きのステップバイステップの実装手順
• クイズのデータを取得して配信するためのGTMの設定方法
• このデータでリードの質と広告ターゲティングを高める実例

DataLayerとGTMの違いは？

本題に入る前に、この2つのコンポーネントを整理しておきましょう。

DataLayer ＝ 伝達役

dataLayerは、ページ上のユーザーの行動に関するデータを保持するJavaScriptの配列です。

dataLayer.push({
  'event': 'quiz_step_view',
  'step_name': 'Personal Information'
});

GTM ＝ 配信役

Google Tag ManagerはDataLayerを監視し、そのデータをFacebook、Google Ads、アナリティクスなどのプラットフォームに送ります。

こう考えるとわかりやすいでしょう。

DataLayer speaks -> GTM listens -> GTM tells Facebook, Google, etc.

両方がそろって初めて機能します。GTMのないDataLayerは役に立たず、データはそこに置かれたままです。DataLayerのないGTMは、監視する対象がありません。

計測すべき2つのイベント

クイズファネルでは、次の2つのイベントに注目します。

1. クイズのステップ表示

ユーザーがステップを表示したときに発火します。

計測する理由：

• 離脱ポイントを特定できる
• リターゲティングオーディエンスを作れる（例：「3ステップ以上見たが完了していない」）
• エンゲージメントの深さを測れる
• 進行度に基づいてリードの質をスコアリングできる

2. クイズの送信

ユーザーがクイズを送信したときに発火します。

計測する理由：

• 実際のコンバージョンを計測できる
• セグメント化のためにクイズの送信をすべて取得できる
• リードバイヤーに豊富なデータを送れる（承認率の向上につながる）

ステップ1：LanderLabにGoogle Tag Managerを導入する

LanderLabは直接の組み込みサポートにより、GTM連携を驚くほどかんたんにします。

GTMアカウントを作成する

1. tagmanager.google.comにアクセスします
2. コンテナを作成します（既存のものでもかまいません）
3. コンテナID（例：GTM-XXXXXX）を取得します

LanderLabのクイズにGTMを追加する

コードスニペットを手動で追加する代わりに、LanderLabにはGTM連携が組み込まれています。

1. LanderLabでLanding Page Settingsを開きます
2. Pixelsをクリックします
3. Google Tag Managerのセクションを探します
4. GTMのコンテナID（例：GTM-XXXXXX）を入力します
5. 設定を保存します

これで完了です。GTMのインストールコードはすべてLanderLabが自動で処理します。コードを手動で配置する必要はありません。

ステップ2：クイズイベントのトラッキングを実装する

LanderLabは特定のJavaScriptイベントを発火します。これを監視してDataLayerにプッシュできます。

参考：LanderLab Quiz Events API

クイズのステップ表示を計測する

このコードをクイズページに追加します（Code Editor、Settings -> Custom Code、またはGTM経由）：

window.addEventListener('ll-quiz-step-view', (event) => {
  const { quizId, stepId, stepName } = event.detail;
    
    if (window.dataLayer) {
        window.dataLayer.push({
            'event': 'll_quiz_step_view',
            'quiz_id': quizId,
            'step_id': stepId,
            'step_name': stepName
        });
    }
});

このコードの動作：

• LanderLabのll-quiz-step-viewイベントを監視します
• クイズとステップの情報を取り出します
• イベント名ll_quiz_step_viewでDataLayerにプッシュします

クイズの送信を計測する

window.addEventListener('ll-quiz-submit', (event) => {
    const { quizId, stepId, stepName, fieldsSimple } = event.detail;
    
    if (window.dataLayer) {
        window.dataLayer.push({
            'event': 'll_quiz_submit',
            'quiz_id': quizId,
            'step_id': stepId,
            'step_name': stepName,
            'submitted_data': fieldsSimple,
            'timestamp': new Date().toISOString()
        });
    }
});

このコードの動作：

• LanderLabのll-quiz-submitイベントを監視します
• 送信されたすべてのデータとクイズ情報を取得します
• イベント名ll_quiz_submitでDataLayerにプッシュします
• フォームデータ全体をfieldsSimpleに含めます（例：{ Name: ‘John’, Email: ‘john@example.com’, Zip: ‘12345’ }）
• 送信時刻を追跡するためのタイムスタンプを追加します

ステップ3：Google Tag Managerを設定する

データがDataLayerに流れ込むようになったので、次はGTMを設定して、それを取得しトラッキングプラットフォームに送ります。

DataLayer変数を作成する

GTMの変数は、DataLayerから特定のデータを取り出し、タグで使えるようにします。

GTMのダッシュボードで：

1. 左サイドバーのVariablesを開きます
2. 下にスクロールしてUser-Defined Variablesに移動します
3. Newをクリックします

次の5つの変数を作成します：

各変数について、Newをクリック -> Data Layer Variableを選択 -> 上の表の名前を入力 -> Saveの順に進めます。

完了すると、5つの変数が作成されているはずです。

トリガーを作成する

トリガーは、タグをいつ発火させるかをGTMに伝えます。ステップ表示用とクイズ送信用の2つのトリガーが必要です。

トリガー1：Quiz Step View

トリガー2：Quiz Submit

Facebookピクセル用のタグを作成する

次に、クイズのデータをFacebookに送るタグを作成します。Facebookピクセルがすでにページに設置されていることを確認してください（LanderLabのPixels設定またはGTM経由）。

タグ1：Facebook Pixel – Quiz Step View

1. 左サイドバーのTagsを開きます
2. Newをクリックします
3. タグ設定の領域をクリックします
4. Custom HTMLを選択します
5. HTMLコード：

<script>
  fbq('track', 'ViewContent', {
    content_name: {{DL - Quiz ID}},
    content_category: 'quiz_step',
    content_ids: [{{DL - Step ID}}],
    step_name: {{DL - Step Name}}
  });
</script>

1. Triggeringをクリックします
2. トリガーを選択します：LL Quiz Step View
3. タグに名前を付けます：Facebook Pixel – Quiz Step View
4. Saveをクリックします

これで何が起こるか：ユーザーがクイズのステップを表示するたびに、Facebookピクセルがクイズとステップの情報を付けたViewContentイベントを発火します。これにより、どこまで進んだかに基づいてユーザーのオーディエンスを作れます。

タグ2：Facebook Pixel – Quiz Submit（Leadイベント）

1. Newをクリックして別のタグを作成します
2. タグ設定の領域をクリックします
3. Custom HTMLを選択します
4. HTMLコード：

<script>
  fbq('track', 'Lead', {
    content_name: {{DL - Quiz ID}},
    content_category: 'quiz_completion',
    value: 10.00,
    currency: 'USD'
  });
</script>

1. Triggeringをクリックします
2. トリガーを選択します：LL Quiz Submit
3. タグに名前を付けます：Facebook Pixel – Quiz Submit
4. Saveをクリックします

これで何が起こるか：ユーザーがクイズを送信すると、FacebookピクセルがLeadイベントを発火します。これが最適化の主要なコンバージョンイベントです。value（値）の項目は、リード1件あたりの平均的な価値に合わせて調整してください。

個別のフォーム項目にアクセスする（任意）

submitted_dataには、{ Name: ‘John’, Email: ‘john@example.com’, Zip: ‘12345’ }のようなオブジェクトとして、すべてのフォーム項目が入っています。特定の項目（地域ターゲティング用の郵便番号や、カスタムパラメータ用のメールアドレスなど）にアクセスするには、GTMでCustom JavaScript変数を作成する必要があります。

例：送信データから郵便番号を取り出す

1. GTMでVariables -> User-Defined Variables -> Newの順に進みます
2. 変数設定の領域をクリックします
3. Custom JavaScriptを選択します
4. Custom JavaScriptコード：

function() {
  const data = {{DL - Submitted Data}};
  return data && data.Zip;
}

1. 変数に名前を付けます：DL – Submitted Zip
2. Saveをクリックします

Facebookのタグで使うには：

<script>
  fbq('track', 'Lead', {
    content_name: {{DL - Quiz ID}},
    content_category: 'quiz_completion',
    zip_code: {{DL - Submitted Zip}},
    value: 10.00,
    currency: 'USD'
  });
</script>

クイズのどの項目についても、同様の変数を作成できます

Google Analytics 4用のタグを作成する

次にGA4のトラッキングを設定しましょう。GA4のMeasurement ID（G-XXXXXXXXXXのような形式）が必要です。

タグ3：GA4設定タグ（ベースタグ）

まだお持ちでなければ、最初にベースとなる設定タグを作成します：

1. Tags -> Newの順に進みます
2. タグ設定の領域をクリックします
3. Google Analytics: GA4 Configurationを選択します
4. Measurement ID:GA4のMeasurement ID（例：G-XXXXXXXXXX）を入力します
5. Triggeringをクリックします
6. All Pagesを選択します
7. タグに名前を付けます：GA4 Configuration
8. Saveをクリックします

注：GTMにすでにGA4 Configurationタグがある場合は、この手順は飛ばしてください。

タグ4：GA4 – Quiz Step View

タグ5：GA4 – Quiz Submit（リード獲得）

generate_leadを使う理由：これはGA4でリード獲得向けに推奨されているイベントです。コンバージョンレポートに自動で表示され、Google Adsでの最適化にも使えます。

ステップ4：設定をテストする

公開する前に、すべてが正しく動作することを確認するためテストが必要です。

GTMのプレビューモードでテストする

1. GTMで右上のPreviewボタンをクリックします
2. 「Your website’s URL」欄に、LanderLabのクイズのURLを入力します
3. Connectをクリックします
4. クイズページが新しいタブで開き、下部にGTMのデバッグパネルが表示されます

クイズのステップ表示イベントをテストする

クイズ送信イベントをテストする

Facebook Events Managerで確認する

Google Analytics 4で確認する

すべて動作していれば：GTMに戻り、Submitをクリックしてコンテナの変更を公開します。「Quiz Tracking Setup」のようなバージョン名と説明を追加し、Publishをクリックします。

実際の活用例

活用例1：エンゲージした見込み客をリターゲティングする

課題：ユーザーがクイズを始めても、最後まで完了しない。

対策：過去7日間にクイズを2ステップ以上見たユーザーのFacebookカスタムオーディエンスを作成し、クイズ送信者を除外して、完了を促す広告を配信します。

結果：離脱者の20-30%を取り戻し、CPAはコールドトラフィックより50%低くなります。

活用例2：質の高い類似オーディエンスを作る

課題：コールドトラフィックのCPLが高すぎる。

対策：クイズを完了してコンバージョンしたユーザーのカスタムオーディエンスを作成し、それをシードに類似オーディエンスを作ります。

結果：興味関心ターゲティングの2-3倍のコンバージョン率。

活用例3：回答パターンでセグメント化する

課題：すべてのリードが同じ価値ではなく、バイヤーは質の高いリードにより多く支払う。

対策：回答の組み合わせを追跡して意欲の高いリードと低いリードを見分け、セグメントごとに別のキャンペーンを作ります。

結果：承認されたリードの割合が40%以上アップし、より高い報酬を得られます。

活用例4：コンバージョン済みの人を除外する

課題：すでに完了した人にクイズ広告を見せて、予算を無駄にしている。

対策：クイズ送信者のオーディエンスを作成し、獲得キャンペーンから除外します。

結果：無駄な支出を15-25%削減できます。

まとめ

クイズファネルを適切にトラッキングすれば、リード獲得は勘頼みから、データドリブンな仕組みへと変わります。

LanderLabでGTMとDataLayerのトラッキングを実装すると、次のことができます。

• ユーザーがどこで、なぜ離脱するのかを正確に把握できる
• 実際のクイズ行動に基づいて、高精度にターゲティングしたオーディエンスを構築できる
• リードの質と承認率を高められる
• より良いデータで、キャンペーンを収益性を保ったまま拡大できる
• 正確なアトリビューションでROIを証明できる

セットアップには1-2時間かかりますが、見返りは絶大です。CPAの低下、リードの質の向上、そしてクイズファネルの全ステップを最適化できる力が手に入ります。

お困りですか？LanderLabのクイズイベントのドキュメントをご覧いただくか、サポートチームまでお問い合わせください。