「GTM」用元素可见性触发器做展示跟踪

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

更新时间:2024年6月10号

这一篇介绍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:可见时长

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

 

 

元素可见性设置示例

以为https://www.ichdata.com/上的文章为例子,看如何通过元素可见性去跟踪文章展示。

Step 1 :查看页面源码

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

「GTM」用元素可见性触发器做展示跟踪

 

将鼠标移动对应代码的位置,点击右键——「复制」——「CSS选择器」,复制的值将会用于触发器的设置。

 

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

从Step 1,我们已经知道了id是commentform。

在GTM中点击「触发器」—「新建」—「选择一个触发器类型以开始设置」——「元素可见性」,做如下设置:

「GTM」用元素可见性触发器做展示跟踪

 

  • 选择方法 :CSS选择器
  • 元素选择器:第一步里复制的,黏贴到这里
  • 可是触发此触发器:每次元素显示触发一次,因为一个页面会包含多个文章,所以每次元素显示都触发一次
  • 此触发器的触发条件:所有可见性事件,不做限制

 

Step 3 :设置代码

在GTM中点击「代码」—「新建」—「选择一个代码类型以开始设置」——「Google Analytics(分析):GA4 事件」,做如下设置:

「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