提供基于WordPress外贸建站·技术支持·SEO咨询服务!
文章分类
文章标签

Google Tag Manager:如何设置网站询盘表单提交跟踪代码?

文章导航

本文介绍如何在Google Tag Manager中设置询盘表单提交跟踪代码,本文不涉及Google Tag Manager(以下简称GTM)跟踪代码安装以及其他Google数据分析设置的内容,如果你需要系统的Wordpress网站Google数据分析安装指南,请阅《WordPress网站创建和添加Google数据分析代码完整指南》这篇指南中包含了包含了通过表单提交触发器来跟踪Form ID 的方式进行数据跟踪,但是近期发现这个方法失效了。所以更新这篇文章作为最新GTM询盘表单提交转化跟踪设置的补充操作教程。

本文会介绍2种设置询盘表单提交跟踪代码,你可以根据自己需求选择进行设置。

在设置之前请确认你的WordPressB2B外贸网站已经搭建完成,如果你还在筹备阶段可以在本站阅读WordPress外贸建站教程来搭建你的外贸网站。

另外你需要创建好相应的询盘表单,本站教程以Elementor Pro的Form元素来创建询盘表单,你可以参见详细的《如何用Elementor Pro的Form元素制作B2B网站的询盘表单?》

方法1:通过设置表单提交成功提示信息跟踪转化数据(推荐)

通过设置表单提交成功信息进行跟踪会更加准确,只有表单提交成功了才算一次正确的转化。

第一步:开启表单Custom Message

进入表单设置的Additional Options,开启Custom Message,Message的内容可以根据自己的需求重新填写。

设置好之后,保存报表单,如果已经设置了网站缓存,请手动清理一下网站缓存。

Google Tag Manager:如何设置GA4事件询盘表单提交跟踪代码?第一步:开启表单Custom Message

第二步:找到表单提交成功信息的CSS选择器

打开表单所在的页面,输入表单信息之后点击提交,之后可以看到表单提交成功的信息如下:

image 46 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP

鼠标在当前页面右击,并选择Inspect。

image 47 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP

进入代码查看器之后,点击左下角的元素选择器按钮

image 48 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP

鼠标移动到表单提交成功信息上,并点击一下,定位到元素代码,然后右击元素代码行,复制选择器。

image 49 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP

复制的文本如下(不同网站元素可能不一样,以你自己实际复制的内容为准):

#inquiry > div.elementor-message.elementor-message-success

第三步:在GTM中创建一个元素可见性触发器

登录到你的Google Tag Manager平台,进入触发器界面,点击【新建】添加一个新的触发器。

Google Tag Manager:如何设置GA4事件询盘表单提交跟踪代码?第三步:在GTM中创建一个元素可见性触发器

触发器类型选择【元素可见性】

image 50 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP

其他配置参见下图:

元素选择器那里就粘贴你复制的元素选择器内容即可。

设置完成之后保存

image 52 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP

第四步:在GTM平台中创建询盘表单提交跟踪代码

进入GTM代码配置页面,点击【新建】创建一个新的跟踪代码。

image 53 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP

配置代码类型选择GA4事件。

image 55 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP

其他设置如下图

如果还没有做GA4配置,请参阅《WordPress网站创建和添加Google数据分析代码完整指南》进行设置。

设置完成之后保存。

image 56 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP

第五步:Tag Assistant工具测试验证代码是否生效

温馨提示:在测试之前请确保你的危皮开了全局模式,都则可能测试不成功,如果按照操作有测试不成功的情况,请更换子的网络环境再次尝试检测。

点击【预览】调用Tag Assistant工具测试

image 57 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP

输入网址,点击【Connect】,之后自定跳转到你的网站

image 58 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP

进入你的网站之后,找到表单页面,模仿用户填写表单并提交,提交之后点击网站右下角的提示框中【finish】按钮,返回到Tag Assistant工具页面。

image - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP

点击【Continue】查看结果

image 1 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP

可以看到代码被Fired成功。

image 2 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP

方法2:通过设置表单提交成功跳转页面跟踪转化数据

通过设置表单提交成功跳转页面可能会存在数据误差,如果用户直接访问了Thank you页面也会被算作一次转化,所以不推荐这做法。

如果你需要使用这种方法,可以参考如下:

第一步:设置表单提交成功跳转页面(Thank you页面)

为你的表单【Action After Submit】添加一个【Redirect】动作。

image 5 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP

添加之后可以看到【Redirect】设置,点击开进行设置

1 在Redirect to的地址栏中通过Elementor动态数据选择【Internal URL】

2 点开Elementor动态数据选择【Internal URL】的设置,在Type中选择【Content】

3 在Search&Select中搜索选择你创建好的Thank you页面(如果还没有创建好,就需要先去创建一下)

设置完成之后保存。

image 6 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP

第二步:在GTM中创建一个Thank you页面触发器

触发器类型选择【网页浏览】

触发器条件选择【某些网页浏览】

并设置Page URL 等于【Thank you】页面链接地址

保存这个触发器

image 7 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP

第三步:在GTM中创建表询盘单提交成功跟踪代码

方法和上文对应的内容一样,只是在选择触发器时不同,这里要选择刚刚创建的Thank you触发器。

其他的详细设置参见上文相应内容

创建完成之后保存。

image 8 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP

代码设置完成之后通过Tag Assistan验证代码是否生效即可。

最后:发布容器

代码验证通过之后需要发布一下容器,记录修改版本信息。

每次设置更新容器配置及代码之后记得做好版本发布,填写相应的版本修改内容。

返回GTM容器,点击右上角的【提交】按钮进行发布。

image 137 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP

提交可以记录版本,你可以编辑每次变化的内容,进行版本管理,然后点击【发布】按钮进行发布。(如果切实不想写可以跳过直接发布)

image 138 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP

发布之后会提示填写容器版本说明,按照提示填写即可(不想填写也可以跳过)。然后点击【继续】按钮。

image 9 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP

然后弹出一个版本摘要,记录该容器版本中的相关内容,阅读后关闭即可。

image 10 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP

最后在容器版本中可以查看历史版本信息。

image 11 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP
文章分类
文章标签
文章导航

搜索你想找的内容

建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!