「GTM」用元素可见性触发器跟踪表单提交

Google Tag Manager Haran 7年前 (2017-10-20) 4837次浏览 2个评论
文章目录[隐藏]

更新时间:2024年12月3号

这一篇介绍GTM里的元素可见性触发器

认识元素可见性

Google Tag Manager里有一个叫做元素可见性触发器,当页面展示特定的内容或信息,就会触发。

 

元素可见性的界面

元素可见性的设置页面如下:

「GTM」用元素可见性触发器跟踪表单提交

 

  • 选择方法:通过什么方式定位跟踪的位置,有两种方式:
    • ID:根据元素的 ID 属性值选择单个元素。
    • CSS选择器:根据指定的 CSS 选择器模式选择一个或多个元素。

 

  • 何时出发次触发器控制触发频率
    • 每次网页加载是触发一次:每个pv只触发一次。
    • 每次元素显示出发一次:每首次匹配上就触发一次,同一个页面多个地方公用id的时候,只有第一个id触发。
    • 每次元素在屏幕上显示时:每次匹配都触发一次。

 

  • 公开范围最低百分比:指定在触发器触发之前有多少百分比的所选元素必须在屏幕上可见。也就是显出多大比例就可以触发。如是图片的时候,设置为50%,那么图片显示出50%的时候,触发器就触发。
  • 设置在屏显示时长下限:指定在触发器触发之前所选元素必须在屏幕上显示多长时间。该时间将在特定页面基础上累积。换句话说,如果某个元素先显示 5000 毫秒,然后消失,接着再次返回显示 5000 毫秒,则其总在屏显示时长将计为 10000 毫秒。也就是这个元素的至少被展示多长时间才会被触发。
  • 观察 DOM 更改:跟踪显示为 DOM 更改的匹配元素。也即是Dom元素改变而导致的匹配触发,这种条件比较极端。

 

元素可见性内置变量

「GTM」用元素可见性触发器跟踪表单提交

可见性触发器有在内置变量有两个变量:

  • Percent Visible:可见百分比
  • On-Screen Duration:可见时长

这两个变量可以放在事件中的行为和标签,这个触发器还在数据层传递有其他信息,有需要可以用数据层去接受配置,更多信息去看官方文档吧。

 

 

演示案例:用元素可见性跟踪表单提交

表单提交成功后,页面会显示这段话:

「GTM」用元素可见性触发器跟踪表单提交

可以通过元素可见性去跟踪表单提交。

 

Step 1 :查看页面源码

将鼠标移动需要跟踪位置,点击鼠标右键中的“检测”然后查看页面元素:

「GTM」用元素可见性触发器跟踪表单提交

可以看到有class wpcf7-response-output,这个将用于触发器的设置。

 

Step 2 :设置元素可见性触发器

在GTM中点击「触发器」—「新建」—「选择一个触发器类型以开始设置」——「元素可见性」,命名为“表单提交——元素可见性”,做如下设置:

「GTM」用元素可见性触发器跟踪表单提交

 

  • 选择方法 :CSS选择器
  • 元素选择器从Step 1,我们已经知道了class wpcf7-response-output,且是在div里,所以设定为div.wpcf7-response-output,
  • 可是触发此触发器:每次元素显示触发一次,因为一个页面会包含多个文章,所以每次元素显示都触发一次
  • 此触发器的触发条件:所有可见性事件,不做限制

 

Step 3 :设置代码

在GTM中点击「代码」—「新建」—「选择一个代码类型以开始设置」——「Google Analytics(分析):GA4 事件」,命名为“GA4-Event-Submit Form(元素可见性)”,做如下设置:

「GTM」用元素可见性触发器跟踪表单提交

注意:如需要区分,请自行设置事件参数。

 

Step 4 :预览调试

最后就是测试,页面打开看到文章,然后返回到Tag Assistant,可以看到准确触发:

「GTM」用元素可见性触发器跟踪表单提交

如果你不会调试,请看:Google Tag Manager中新的调试方式:Tag Assistant

 


如有疑问,可以在文章底部留言或邮件(haran.huang@ichdata.com) 我~
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 请教一下,站点内有多个banner,是否就需要写多个代码和触发器来对应每个id或者css选择器呢?
    bear2018-09-21 11:11 回复 Windows 7 | Chrome 69.0.3497.100