文章分类
新手入门学习建站主机推荐
非常适合外贸新手入门的一款共享主机,非常简洁的管理面板,第一年费低至300元!
文章标签

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
相关内容
Google Search Console网域资源添加配置教程

本文介绍Google Search Console网域资源添加配置教程,Google Search Console (简称GSC)提供2中资源类型,网域资源和网址前缀资源,前者包含域名下所有子域名的网站和应用的数据,后者只包含添加链接的网站数据。 本文介绍的是GSC网域资源配置过程。如果你希望了解更

阅读全文 »
外贸建站图片SEO优化指南

本文介绍外贸建站如何实现图片SEO优化, 搜索引擎为我们提供了很多的搜索功能,除了我们最常见的页面搜索以外,它还提供了图片搜索的功能, 我们可以通过对图片的SEO优化来提升图片在搜索结果中的排名,同时图片的SEO优化也会辅助对应的页面排名提升。 你可以通过Google图像SEO最佳做法来了解Goog

阅读全文 »
什么是Robots.txt文件?

什么是Robots.txt? Robots.txt文件规定了搜索引擎爬虫可以或者不可以爬取的内容,在WordPress中通常像RanKMath SEO这样的SEO插件都是会自动生成Robots.txt文件的,所以在默认情况下,不需要你手动修改。 如果你修改了反而很可能导致网站无法访问,所以对于Rob

阅读全文 »
Google Tag Manager:设置跟踪WhatsApp点击事件

本文介绍如何使用Google Tag Manager设置跟踪WhatsApp点击事件。 1、在网站添加WhatsApp按钮 你可以通过插件或者按钮链接的方式添加一个WhatsApp按钮如下: 当用户点击按钮时会跳转到WhatsApp会话窗口,在窗口中你可以看到一个链接地址,这个链接地址中会包含Wha

阅读全文 »
Google Tag Manager容器发布教程

本文介绍如何在Google Tag Manager中进行容器发布,容器发布包含了版本管理,这个过程很像软件的发布过程,可以帮助你记录每次修改和调整容器的过程。 这篇文章会通过链接的形式收录在我之前的写的《Google数据分析完整指南》中,指南中包含了Google标签管理器GTM的设置、Google数

阅读全文 »
文章分类
新手入门学习建站主机推荐
非常适合外贸新手入门的一款共享主机,非常简洁的管理面板,第一年费低至300元!
文章标签
想快速搭建一个完全属于自己的外贸独立站?
本站提供专业的外贸建站服务,如果你不想自己花时间精力搭建网站,可以将你的需求告诉我,我来帮助你搭建一个专业外贸独立站!
文章导航
文章分类
文章标签
建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!