弹窗是网站吸引访客注意力、促进销售和收集潜在客户信息的有效工具。但如何评估弹窗的效果呢?

本文将详细介绍如何使用Google Tag Manager (GTM)和Google Analytics 4 (GA4)来追踪网站弹窗的展示次数、提交次数以及提交率。

一、追踪弹窗提交成功

1.1 检查元素

首先，我们需要找到表示弹窗提交成功的元素。

• 在您的网站上，右键点击并选择”检查”或按F12打开开发者工具。
• 触发弹窗并提交表单。
• 在开发者工具中，找到表示提交成功的元素。这可能是一个成功消息框或某个特定的HTML元素。
• 记录下这个元素的唯一标识符，可能是ID（如 #success-message）或特定的class（如 .form-submitted）。

1.2 创建触发器

接下来，我们在Google Tag Manager中创建一个触发器来捕捉这个成功提交的事件。

1. 登录您的Google Tag Manager账户。

2. 选择相应的容器。

3. 点击左侧菜单的”触发器”，然后点击右上角的”新建”按钮。

4. 命名您的触发器，例如”Popup Submission Success”。

5. 点击”触发器配置”框，选择”元素可见性”作为触发器类型。

6. 在”选择元素”部分：

• 如果您的网站只有一个弹窗，选择”ID”并输入相应的ID。
• 如果有多个弹窗，选择”CSS选择器”并输入适当的选择器。

7. 将”触发条件”设置为”每页一次”。

8. 在”高级设置”中：

• 将”最小可见百分比”设置为1。
• 勾选”观察DOM变化”。

9. 点击”保存”。

1.3 创建标签

现在，我们创建一个GA4事件标签来发送数据到Google Analytics。

1. 在GTM中，点击左侧菜单的”标签”，然后点击”新建”。

2. 命名您的标签，例如”GA4 – Popup Submitted”。

3. 点击”标签配置”框，选择”Google Analytics: GA4事件”。

4. 在”配置标签”部分，选择您的GA4配置变量。

5. 在”事件名称”字段中输入”popup_submitted”。

6. 在”事件参数”部分，添加以下参数：

• 名称：form_id，值：{{Element ID}}或您自定义的变量
• 名称：popup_submission，值：1

7. 在”触发器”部分，选择您刚才创建的”Popup Submission Success”触发器。

8. 点击”保存”。

1.4 在GA4中设置自定义维度和指标

1. 登录您的Google Analytics 4账户。

2. 进入”管理”>”自定义定义”。

3. 点击”创建自定义维度”：

• 维度名称：Form ID
• 范围：事件
• 事件参数：form_id

4. 点击”创建自定义指标”：

• 指标名称：Popup Submissions
• 范围：事件
• 事件参数：popup_submission
• 单位：标准

5. 保存这些设置。

二、追踪弹窗展示

2.1 检查元素

与之前类似，我们需要找到弹窗本身的唯一标识符。

1. 打开开发者工具。

2. 触发弹窗显示。

3. 在HTML结构中找到代表整个弹窗的元素。

4. 记录下它的ID或class。

2.2 创建触发器

1. 在GTM中，创建一个新的触发器。

2. 命名为”Popup Displayed”。

3. 选择”元素可见性”作为触发器类型。

4. 在”选择元素”部分，输入弹窗的ID或CSS选择器。

5. 设置”触发条件”为”每页一次”。

6. 在”高级设置”中，将”最小可见百分比”设置为100%。

7. 保存触发器。

2.3 创建标签

1. 复制之前创建的”GA4 – Popup Submitted”标签。

2. 重命名为”GA4 – Popup Displayed”。

3. 修改事件名称为”popup_displayed”。

4. 将popup_submission参数改为popup_displayed。

5. 更新触发器为刚才创建的”Popup Displayed”触发器。

6、 保存标签。

2.4 在GA4中设置自定义指标

1. 在GA4中，创建一个新的自定义指标：

• 指标名称：Popup Displayed
• 范围：事件
• 事件参数：popup_displayed
• 单位：标准

2. 保存设置。

三、 统一Form ID（如果需要）

如果弹窗展示和提交事件的Form ID不完全一致，可以使用自定义JavaScript来提取相同的ID部分。

1. 在GTM中，创建一个新的”自定义JavaScript”变量。

2. 命名为”Unified Form ID”。

3. 输入以下代码（根据实际情况调整）：

function() {

  var elementId = {{Element ID}};

  // 假设ID格式为 “form-popup-123″，我们只想要 “123” 部分

  return elementId.split(‘-‘).pop();

}

4. 在相关的标签中，将form_id参数的值更改为{{Unified Form ID}}。

四、创建报告

4.1 创建计算指标

1. 在GA4中，进入”管理”>”自定义定义”>”计算指标”。

2. 点击”新建计算指标”。

3. 设置如下：

• 名称：Popup Submission Rate
• 公式：(Popup Submissions / Popup Displayed) * 100
• 格式化：百分比
• 小数位：2

4. 保存设置。

4.2 在探索中创建报告

1. 在GA4中，进入”探索”。

2. 创建一个新的自由形式探索。

3. 设置维度为”Form ID”。

4. 添加以下指标：

• Popup Displayed
• Popup Submissions
• Popup Submission Rate

5. 根据需要调整图表类型和时间范围。

6. 保存报告。

结语

通过这个详细的报告，您可以清楚地看到每个弹窗的展示次数、提交次数和提交率。这些数据将帮助您比较不同弹窗的效果，识别表现较差的弹窗，并为优化提供依据。

记得定期查看这个报告，并根据数据调整您的弹窗策略。例如，如果某个弹窗的提交率特别低，您可能需要重新设计其内容或触发时机。相反，对于表现良好的弹窗，您可以考虑在网站的其他部分复制其成功经验。