客户案例

如何追踪测验漏斗事件,并将数据推送到 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