本文介绍如何在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的内容可以根据自己的需求重新填写。
设置好之后,保存报表单,如果已经设置了网站缓存,请手动清理一下网站缓存。
![image 45 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP Google Tag Manager:如何设置GA4事件询盘表单提交跟踪代码?第一步:开启表单Custom Message](http://nutswp.com/wp-content/uploads/2022/09/image-45-1024x653.png)
第二步:找到表单提交成功信息的CSS选择器
打开表单所在的页面,输入表单信息之后点击提交,之后可以看到表单提交成功的信息如下:
![image 46 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP image 46 - Google Tag Manager:如何设置网站询盘表单提交跟踪代码? - NUTSWP](http://nutswp.com/wp-content/uploads/2022/09/image-46-1024x374.png)
鼠标在当前页面右击,并选择Inspect。
进入代码查看器之后,点击左下角的元素选择器按钮
鼠标移动到表单提交成功信息上,并点击一下,定位到元素代码,然后右击元素代码行,复制选择器。
复制的文本如下(不同网站元素可能不一样,以你自己实际复制的内容为准):
#inquiry > div.elementor-message.elementor-message-success
第三步:在GTM中创建一个元素可见性触发器
登录到你的Google Tag Manager平台,进入触发器界面,点击【新建】添加一个新的触发器。
触发器类型选择【元素可见性】
其他配置参见下图:
元素选择器那里就粘贴你复制的元素选择器内容即可。
设置完成之后保存
第四步:在GTM平台中创建询盘表单提交跟踪代码
进入GTM代码配置页面,点击【新建】创建一个新的跟踪代码。
配置代码类型选择GA4事件。
其他设置如下图
如果还没有做GA4配置,请参阅《WordPress网站创建和添加Google数据分析代码完整指南》进行设置。
设置完成之后保存。
第五步:Tag Assistant工具测试验证代码是否生效
温馨提示:在测试之前请确保你的危皮开了全局模式,都则可能测试不成功,如果按照操作有测试不成功的情况,请更换子的网络环境再次尝试检测。
点击【预览】调用Tag Assistant工具测试
输入网址,点击【Connect】,之后自定跳转到你的网站
进入你的网站之后,找到表单页面,模仿用户填写表单并提交,提交之后点击网站右下角的提示框中【finish】按钮,返回到Tag Assistant工具页面。
点击【Continue】查看结果
可以看到代码被Fired成功。
方法2:通过设置表单提交成功跳转页面跟踪转化数据
通过设置表单提交成功跳转页面可能会存在数据误差,如果用户直接访问了Thank you页面也会被算作一次转化,所以不推荐这做法。
如果你需要使用这种方法,可以参考如下:
第一步:设置表单提交成功跳转页面(Thank you页面)
为你的表单【Action After Submit】添加一个【Redirect】动作。
添加之后可以看到【Redirect】设置,点击开进行设置
1 在Redirect to的地址栏中通过Elementor动态数据选择【Internal URL】
2 点开Elementor动态数据选择【Internal URL】的设置,在Type中选择【Content】
3 在Search&Select中搜索选择你创建好的Thank you页面(如果还没有创建好,就需要先去创建一下)
设置完成之后保存。
第二步:在GTM中创建一个Thank you页面触发器
触发器类型选择【网页浏览】
触发器条件选择【某些网页浏览】
并设置Page URL 等于【Thank you】页面链接地址
保存这个触发器
第三步:在GTM中创建表询盘单提交成功跟踪代码
方法和上文对应的内容一样,只是在选择触发器时不同,这里要选择刚刚创建的Thank you触发器。
其他的详细设置参见上文相应内容。
创建完成之后保存。
代码设置完成之后通过Tag Assistan验证代码是否生效即可。
最后:发布容器
代码验证通过之后需要发布一下容器,记录修改版本信息。
每次设置更新容器配置及代码之后记得做好版本发布,填写相应的版本修改内容。
返回GTM容器,点击右上角的【提交】按钮进行发布。
提交可以记录版本,你可以编辑每次变化的内容,进行版本管理,然后点击【发布】按钮进行发布。(如果切实不想写可以跳过直接发布)
发布之后会提示填写容器版本说明,按照提示填写即可(不想填写也可以跳过)。然后点击【继续】按钮。
然后弹出一个版本摘要,记录该容器版本中的相关内容,阅读后关闭即可。
最后在容器版本中可以查看历史版本信息。