https://www.simoahava.com/analytics/the-youtube-video-trigger-in-google-tag-manager/
创建和配置触发器
Trigger类型选择内置的YouTube Video，设置如下
代码配置
变量配置
内置变量
- Video Provider：gtm.videoProvider: ‘youtube’，跟踪视频的播放平台（这里当然是YouTube）。
- Video Status：gtm.videoStatus: ‘start’/’complete’/’pause’,/’buffering’/’progress’，分别表示视频开始，完成播放，暂停播放，缓存中，播放细节（百分比，播放时长）。（注意：这里的百分比和播放时长都是严格按照视频时长来的，例如一个4分钟的视频，如果你从1分钟开始看，那么25%的Trigger就已经触发了。）
- Video URL： gtm.videoUrl: ‘https://www.youtube.com/watch?v=…’，表示嵌入的video地址。
- Video Title： gtm.videoTitle: ‘Aquaman Movie’，视频的标题。
- Video Duration：gtm.videoDuration: 197，视频时长。
- Video Current Time：gtm.videoCurrentTime: 30，视频的现在时间。
- Video Percent：gtm.videoPercent: 15，表示视频播放的百分比。
- Video Visible：gtm.videoVisible: true，true或者false，表示视频的可见度（是否在浏览器视窗中显示。）
自定义变量{{JS – Get video action}}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function() { var status = {{Video Status}}; switch (status) { case 'start': return 'Start playing'; case 'pause': return 'Pause'; case 'buffering': return 'Buffering'; case 'progress': return 'Reached ' + {{Video Percent}} + '%'; case 'complete': return 'Reached the end'; } } |
解释一下这段JS代码，首先将Video Status这个内置变量赋值给status。
switch…case…case这一段表示，如果status是start，返回：Start Playing，以此类推。
目的是为了让数据报表readable。
用自然语言翻译这段代码应该是：
|
1 2 3 4 5 6 7 8 9 10 11 |
make status = {{Video Status}} if status == 'start': return 'Start Playing'; if status == 'pause': return 'Pause'; if status == 'buffering': return 'Buffering'; if status == 'progress': return 'Reached ' + {{Video Percent}} + '%'; if status == 'complete': return 'Reached the end'; |
跟踪 lazy-load/动态嵌入 的video
前端技术越来越高级，lazy-load和动态嵌入都是能够大幅度改善网页加载速度，提升用户体验的技术。
如果你的网站应用了这个技术，引入如下的api库即可。
|
1 |
<script src="https://www.youtube.com/iframe_api"> |
记得debug
打开preview mode，然后调试，调试OK后，再上线。
Be First to Comment