客戶案例

如何追蹤問卷漏斗事件,並將資料推送到 Google Tag Manager

簡介 問卷漏斗是數位行銷中最強大的名單開發工具之一。它們能吸引訪客參與、收集有價值的第一方資料,幫助你了解受眾的需求,同時篩選名單並將轉換率最大化。

Olgert Pysqyli閱讀時間 7 分鐘

簡介

問卷漏斗是數位行銷中最強大的名單開發工具之一。它們能吸引訪客參與、收集有價值的第一方資料,幫助你了解受眾的需求,同時篩選名單並將轉換率最大化。

但問題在於:沒有正確的追蹤,你就像在盲飛。

你可能正在收集名單,並將它們傳送到 LeadsPedia 或 LeadProsper 這類名單分發平台,但你真的知道哪些問卷題目最能引起共鳴嗎?使用者在哪裡流失?哪些答案組合代表買家真正會接受的高意圖名單?最重要的是,你是否正在運用這座資料金礦,為 Facebook 與 Google 廣告活動打造精準鎖定的受眾?

這時就輪到 Google Tag Manager(GTM)與 DataLayer 登場了。

在 LanderLab,我們的使用者已經在各行各業打造了數以千計的高轉換登陸頁與問卷漏斗。我們經常聽到一個問題:「我該如何追蹤自己的問卷,並運用這些資料做出更好的廣告與更高品質的名單?」

在這份指南中,你會確切學到如何利用 GTM 與 DataLayer 實作問卷漏斗追蹤。

我們將涵蓋:

  • DataLayer 是什麼,以及它為何是問卷追蹤的必備要素
  • 每個問卷漏斗都應追蹤的關鍵事件
  • 附有程式碼範例的逐步實作方式
  • 如何設定 GTM 來擷取並分發問卷資料
  • 運用這些資料提升名單品質與廣告鎖定的實際情境

DataLayer 與 GTM:差別在哪裡?

在深入之前,先釐清這兩個元件:

DataLayer = 信差

dataLayer 是一個 JavaScript 陣列,用來儲存頁面上使用者行為的相關資料:

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

GTM = 分發者

Google Tag Manager 會監聽 DataLayer,並將這些資料傳送到 Facebook、Google Ads、Analytics 等平台。

可以這樣理解:

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

你需要兩者搭配運作。沒有 GTM 的 DataLayer 毫無用處,資料只會待在原地;沒有 DataLayer 的 GTM 則無從監聽。

需要追蹤的兩個事件

針對問卷漏斗,我們會聚焦在以下兩個事件:

1. 問卷步驟瀏覽

使用者瀏覽某個步驟時觸發。

為什麼要追蹤:

  • 找出流失節點
  • 建立再行銷受眾(例如「瀏覽了 3 個以上步驟但未完成」)
  • 衡量參與深度
  • 依據推進程度為名單品質評分

2. 問卷提交

使用者提交問卷時觸發。

為什麼要追蹤:

  • 追蹤實際轉換
  • 擷取所有問卷提交,用於受眾區隔
  • 向名單買家傳送更豐富的資料(提高接受率)

步驟 1:在 LanderLab 中安裝 Google Tag Manager

LanderLab 內建直接支援,讓 GTM 整合變得極其簡單。

建立 GTM 帳戶

  1. 前往 tagmanager.google.com
  2. 建立一個容器(或使用現有容器)
  3. 取得你的容器 ID(例如 GTM-XXXXXX)

將 GTM 加入你的 LanderLab 問卷

不需要手動加入程式碼片段,LanderLab 內建了 GTM 整合:

  1. 在 LanderLab 中,進入 Landing Page Settings
  2. 點擊 Pixels
  3. 找到 Google Tag Manager 區塊
  4. 輸入你的 GTM 容器 ID(例如 GTM-XXXXXX)
  5. 儲存設定

就是這麼簡單!LanderLab 會自動為你處理所有 GTM 安裝程式碼,不需要手動放置程式碼。

步驟 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 個變數:

變數名稱 變數類型 Data Layer 變數名稱
DL – Quiz ID Data Layer Variable quiz_id
DL – Step ID Data Layer Variable step_id
DL – Step Name Data Layer Variable step_name
DL – Submitted Data Data Layer Variable submitted_data
DL – Timestamp Data Layer Variable timestamp

針對每個變數,依序點擊 New -> 選擇 Data Layer Variable -> 輸入上表中的名稱 -> Save。

完成後,你應該已建立 5 個變數。

建立觸發條件

觸發條件用來告訴 GTM 何時觸發你的代碼。我們需要兩個觸發條件:一個用於步驟瀏覽,一個用於問卷提交。

觸發條件 1:Quiz Step View
  1. 在左側邊欄進入 Triggers
  2. 點擊 New
  3. 點擊觸發條件設定區域
  4. 將觸發條件類型選為 Custom Event
  5. Trigger Configuration:
    • Event name: ll_quiz_step_view
    • This trigger fires on: All Custom Events
  6. 為觸發條件命名:LL Quiz Step View
  7. 點擊 Save
觸發條件 2:Quiz Submit
  1. 再次點擊 New 建立另一個觸發條件
  2. 點擊觸發條件設定區域
  3. 將觸發條件類型選為 Custom Event
  4. Trigger Configuration:
    • Event name: ll_quiz_submit
    • This trigger fires on: All Custom Events
  5. 為觸發條件命名:LL Quiz Submit
  6. 點擊 Save

為 Facebook Pixel 建立代碼

接下來,我們要建立將問卷資料傳送到 Facebook 的代碼。請確認頁面上已安裝 Facebook Pixel(透過 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 Pixel 就會觸發一個包含問卷與步驟資訊的 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 Pixel 會觸發 Lead 事件。這是用於最佳化的主要轉換事件。請調整 value 欄位,使其符合你的平均名單價值。

存取個別表單欄位(選用)

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 Configuration 代碼(基礎代碼)

首先,如果還沒有基礎設定代碼,請先建立一個:

  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

  1. 點擊 New 建立新代碼
  2. 點擊代碼設定區域
  3. 選擇 Google Analytics: GA4 Event
  4. Configuration Tag:從下拉選單中選擇你的 GA4 Configuration 代碼
  5. Event Name: quiz_step_view
  6. Event Parameters:每新增一個參數,就點擊一次「Add Row」:
    • Parameter Name: quiz_id | Value: {{DL – Quiz ID}}
    • Parameter Name: step_id | Value: {{DL – Step ID}}
    • Parameter Name: step_name | Value: {{DL – Step Name}}
  7. 點擊 Triggering
  8. 選擇觸發條件:LL Quiz Step View
  9. 為代碼命名:GA4 – Quiz Step View
  10. 點擊 Save

代碼 5:GA4 – Quiz Submit(名單開發)

  1. 點擊 New 建立另一個代碼
  2. 點擊代碼設定區域
  3. 選擇 Google Analytics: GA4 Event
  4. Configuration Tag:選擇你的 GA4 Configuration 代碼
  5. Event Name: generate_lead
  6. Event Parameters:每新增一個參數,就點擊一次「Add Row」:
    • Parameter Name: quiz_id | Value: {{DL – Quiz ID}}
    • Parameter Name: step_name | Value: {{DL – Step Name}}
    • Parameter Name: value | Value: 10(依你的名單價值調整)
    • Parameter Name: currency | Value: USD
  7. 點擊 Triggering
  8. 選擇觸發條件:LL Quiz Submit
  9. 為代碼命名:GA4 – Quiz Submit
  10. 點擊 Save

為什麼要使用 generate_lead?這是 GA4 中建議用於名單開發的事件。它會自動出現在轉換報表中,並可用於 Google Ads 的最佳化。

步驟 4:測試你的設定

發布之前,你需要測試所有內容,確保一切運作正常。

在 GTM 預覽模式中測試

  1. 在 GTM 中點擊右上角的 Preview 按鈕
  2. 在「Your website’s URL」欄位中輸入你的 LanderLab 問卷 URL
  3. 點擊 Connect
  4. 你的問卷頁面會在新分頁中開啟,底部會顯示 GTM 偵錯面板

測試問卷步驟瀏覽事件

  1. 推進問卷,進入下一步
  2. 在 GTM 偵錯面板的事件清單中找到 ll_quiz_step_view
  3. 點擊它查看詳細資訊
  4. 確認以下幾點:
    • 事件已觸發
    • 變數已填入正確的值(quiz_id、step_id、step_name)
    • 代碼已觸發:Facebook Pixel – Quiz Step View 與 GA4 – Quiz Step View

測試問卷提交事件

  1. 完成問卷並提交
  2. 在 GTM 偵錯面板的事件清單中找到 ll_quiz_submit
  3. 點擊它查看詳細資訊
  4. 確認以下幾點:
    • 事件已觸發
    • 變數已填入正確的值(quiz_id、step_id、step_name)
    • 代碼已觸發:Facebook Pixel – Quiz Step View 與 GA4 – Quiz Step View

在 Facebook Events Manager 中驗證

  1. 前往 Facebook Events Manager
  2. 選擇你的像素
  3. 進入 Test Events 分頁
  4. 輸入你的問卷 URL 開始測試
  5. 走完問卷步驟,並確認你能看到:
    • 隨著你推進,ViewContent 事件被觸發
    • 提交時觸發 Lead 事件
    • 事件參數顯示正確(quiz_id、step_name 等)

在 Google Analytics 4 中驗證

  1. 進入你的 GA4 資源
  2. 依序進入 Reports -> Realtime
  3. 在你的網站上走完問卷步驟
  4. 在 Realtime 報表中,確認你能看到:
    • 出現 quiz_step_view 事件
    • 提交時出現 generate_lead 事件
    • 事件參數填入正確

如果一切正常:回到 GTM,點擊 Submit 發布容器的變更。加入一個版本名稱(如「Quiz Tracking Setup」)與說明,然後點擊 Publish。

實際應用情境

情境 1:再行銷已參與的使用者

問題:使用者開始了問卷,卻沒有完成。

解法:建立一個 Facebook 自訂受眾,包含過去 7 天內瀏覽了 2 個以上問卷步驟的使用者,排除已提交問卷的人,並向他們投放以促成完成為目標的廣告。

成果:以比冷流量低 50% 的 CPA,挽回 20-30% 中途放棄的使用者。

情境 2:建立高品質類似受眾

問題:冷流量的 CPL 過高。

解法:為完成問卷並轉換的使用者建立自訂受眾,再以此為種子建立類似受眾。

成果:轉換率比以興趣為基礎的鎖定高出 2-3 倍。

情境 3:依答案模式區隔

問題:並非所有名單都一樣,買家願意為合格名單支付更高的價格。

解法:追蹤答案組合,區分高意圖名單與低意圖名單,並為每個區隔建立獨立的廣告活動。

成果:名單接受率提升 40% 以上,並能拿到更高的佣金。

情境 4:排除已轉換的使用者

問題:把預算浪費在向已完成問卷的人展示問卷廣告上。

解法:建立一個由問卷提交者組成的受眾,並在獲客廣告活動中將其排除。

成果:減少 15-25% 的浪費支出。

結論

做好問卷漏斗追蹤,能讓你的名單開發從憑感覺猜測,轉變為以資料驅動的體系。

在 LanderLab 中實作 GTM 與 DataLayer 追蹤後,你可以:

  • 掌握使用者究竟在哪裡流失、為什麼流失
  • 建立以真實問卷行為為基礎的高精準受眾
  • 提升名單品質與接受率
  • 擴大廣告活動規模,憑藉更優質的資料穩定獲利
  • 證明 ROI,歸因準確無誤

整個設定需要 1-2 小時,但回報十分可觀:更低的 CPA、更高的名單品質,以及最佳化問卷漏斗每一步的能力。


需要協助嗎?請查看 LanderLab Quiz Events 文件,或聯絡我們的支援團隊。

幾分鐘內打造高轉換問卷漏斗

使用現成的產業範本,透過電話/電子郵件/OTP 驗證確保名單準確,並將名單即時分發給你的買家、合作夥伴或 CRM。

建立我的問卷漏斗

繼續閱讀

客戶案例中的更多文章。

主題

依主題瀏覽

每篇文章都歸在一個主題下。先從最貼近你目前廣告活動的主題讀起。

先讀操作手法。再建置頁面。

免費開始:建置登陸頁、發布到你自己的網域,並把每筆名單分派給你的買家,趕在下一波廣告活動上線之前。

從一段提示到合格名單

看一段提示如何變成上線的太陽能報價漏斗,每筆名單都送到你的買家,漏洞也在吃掉預算之前就被標出來。

0:00
0:59