通过 ChatGPT 使用 GTM 进行 iFrame 表单跟踪

Mon 22 Sep 2025

158 views

iFrame（内联框架）是一个 HTML 标签（<iframe>），它允许你在自己的网站中加载外部网页或文档。简单来说，它会在网页中创建一个小‘窗口’，用于展示来自其他来源的内容。比如，当你在网站中嵌入 YouTube 视频、Google 地图，甚至是预订表单时——通常就是通过 iFrame 来实现的。

为什么网站会使用 iFrame？

网站所有者经常依赖 iFrame 来引入外部内容，而无需直接托管。常见的用途包括：

显示第三方资源，例如视频、地图或广告。
嵌入交互式表单（如调查工具、注册表单或支付网关）。
提升用户体验，使访问者在同一页面上就能查看额外内容。

如何使用 Google Tag Manager（GTM）跟踪 iFrame

正如我们所知，iFrame 与主网站域名是完全独立的。当我们通过 iFrame 嵌入表单时，它并不会直接与我们的网站相连——这使得使用传统方法进行跟踪变得困难。

为了实现跟踪，我们首先需要在 Google Tag Manager（GTM）与 iFrame 表单之间建立交互。
但是，如果 iFrame 本身不提供任何交互，或者源站点没有提供相关选项，该怎么办呢？

别担心！今天我们会一步步带你找到解决方案。关键在于在 GTM 中使用自定义 HTML 代码来与 iFrame 建立连接。由于每个 iFrame 的结构都可能不同，因此并不存在一个通用的预写代码可以适用于所有情况。每一次设置都需要根据实际情况进行定制。

更棒的是——如果你不是编程人员（别担心，大多数人都不是！），你可以借助像 ChatGPT 这样的工具来生成或定制所需的代码。这样一来，整个过程就会变得更轻松，也不那么技术化。

步骤 1：进入你的 iFrame 联系页面

首先，导航到嵌入了 iFrame 的联系页面。打开浏览器的开发者工具，并切换到 Console（控制台） 标签。

接着，清空控制台以移除之前的日志，粘贴自定义代码，然后按下 Enter 执行。

window.addEventListener('message', function (e) {

console.log(e);

});

发生了什么： 你的浏览器开始‘监听’来自 iFrame 的消息。

当你提交 iFrame 表单时： iFrame 会向你的页面发送一条消息，你可以在控制台中看到它。

为什么有用： 你可以准确地知道表单何时被提交，并获取到它的数据。

接下来，保持控制台窗口打开，并开始填写你的 iFrame 表单。
当你成功提交表单后，你会在控制台部分看到额外的消息出现，这表明表单数据正在被跟踪。

从这些控制台消息中，寻找事件名称或类型，比如提示‘表单已提交’的动作。找到后，复制包含该事件名称或类型的整行代码。

同时，注意消息中显示的来源链接，并将代码和链接一并保存到记事本中。接下来，我们会借助 ChatGPT 使用这些信息来创建合适的跟踪方案。

太好了！现在，请更新代码，将其中的链接替换为你的来源链接。我们还为你准备了一条可在 ChatGPT 中使用的提示。

接下来，把代码和必要的信息粘贴到 ChatGPT 中。完成后，我们就可以提交这些数据，并生成适用于你的 iFrame 表单的自定义跟踪方案

window.addEventListener('message', function (e) {
console.log(e);
 if (e.origin === 'yourOrigin link paste here') {
 var eventData = e.data.eventName;
 // Check if the URL contains “onFormSubmitted”
 if (eventData.includes('onFormSubmitted')) {
 // Push the 'iFrame_submit' event to dataLayer
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
 'event': 'iFrame_submit',
 'eventData': eventData
 });}}});

Prompt: In the code above, I have written some code where ⁠ eventData ⁠ contains an event name: ⁠ onFormSubmitted ⁠.
Now, review the code below and follow the same structure.

这段代码是你从控制台获取的：拿来直接使用即可。

"paperform:{\"details\":{\"form_id\":\"676add7b836c2ffee0019dfd\",\"eventName\":\"SubmittedForm\",\"payload\":{\"title\":\"Consultation Form\",\"form_user_id\":438524,\"form_id\":\"676add7b836c2ffee0019dfd\",\"submission_id\":\"676bc20c1d8f816c93011b1d\",\"submitted_at\":\"2024-12-25 08:27:56\",\"total\":0,\"form_url\":\"https://f9qgbaag.paperform.co\",\"score\":null}},\"action\":\"analytics\",\"embed_id\":0,\"id\":\"f9qgbaag\"}"