看页面访问深度

GTM实战指南 GA小站 3082次浏览 已收录 0个评论

下面分享如何通过GTM监测用户的访问深度,也就是用户浏览量整个页面多大比例。可以对评估用户对页面是否有兴趣作为一个补充。也可以用于衡量页面设计的长短版选择。
 原理是:通过GTM注入JS,监测用户下拉行为,通过事件push形式和数据层传递数据,再通过Tag中的事件促发。
实现过程

1、设置trigger,需要窗口加载才算注入js触发
看页面访问深度

2、注入js,主动push event和数据层变量
看页面访问深度


<script>
!function(e,n,t){"use strict";var r,o,a,l,i={minHeight:0,elements:[],percentage:!0,userTiming:!1,pixelDepth:!1,nonInteraction:!0,gaGlobal:!1,gtmOverride:!1},c=e(n),u=[],g=0;e.scrollDepth=function(h){function p(e){l?l({event:"ScrollDistance",eventCategory:"Scroll Depth",eventAction:e,eventLabel:"Baseline",eventValue:1,eventNonInteraction:!0}):(r&&n[a]("send","event","Scroll Depth",e,"Baseline",1,{nonInteraction:!0}),o&&_gaq.push(["_trackEvent","Scroll Depth",e,"Baseline",1,!0]))}function s(e,t,i,c){l?(l({event:"ScrollDistance",eventCategory:"Scroll Depth",eventAction:e,eventLabel:t,eventValue:1,eventNonInteraction:h.nonInteraction}),h.pixelDepth&&arguments.length>2&&i>g&&(g=i,l({event:"ScrollDistance",eventCategory:"Scroll Depth",eventAction:"Pixel Depth",eventLabel:D(i),eventValue:1,eventNonInteraction:h.nonInteraction})),h.userTiming&&arguments.length>3&&l({event:"ScrollTiming",eventCategory:"Scroll Depth",eventAction:e,eventLabel:t,eventTiming:c})):(r&&(n[a]("send","event","Scroll Depth",e,t,1,{nonInteraction:h.nonInteraction}),h.pixelDepth&&arguments.length>2&&i>g&&(g=i,n[a]("send","event","Scroll Depth","Pixel Depth",D(i),1,{nonInteraction:h.nonInteraction})),h.userTiming&&arguments.length>3&&n[a]("send","timing","Scroll Depth",e,c,t)),o&&(_gaq.push(["_trackEvent","Scroll Depth",e,t,1,h.nonInteraction]),h.pixelDepth&&arguments.length>2&&i>g&&(g=i,_gaq.push(["_trackEvent","Scroll Depth","Pixel Depth",D(i),1,h.nonInteraction])),h.userTiming&&arguments.length>3&&_gaq.push(["_trackTiming","Scroll Depth",e,c,t,100])))}function v(e){return{"25%":parseInt(.25*e,10),"50%":parseInt(.5*e,10),"75%":parseInt(.75*e,10),"100%":e-5}}function f(n,t,r){e.each(n,function(n,o){-1===e.inArray(n,u)&&t>=o&&(s("Percentage",n,t,r),u.push(n))})}function m(n,t,r){e.each(n,function(n,o){-1===e.inArray(o,u)&&e(o).length&&t>=e(o).offset().top&&(s("Elements",o,t,r),u.push(o))})}function D(e){return(250*Math.floor(e/250)).toString()}function d(e,n){var t,r,o,a=null,l=0,i=function(){l=new Date,a=null,o=e.apply(t,r)};return function(){var c=new Date;l||(l=c);var u=n-(c-l);return t=this,r=arguments,0>=u?(clearTimeout(a),a=null,l=c,o=e.apply(t,r)):a||(a=setTimeout(i,u)),o}}var y=+new Date;h=e.extend({},i,h),e(t).height()<h.minHeight||(h.gaGlobal?(r=!0,a=h.gaGlobal):"function"==typeof ga?(r=!0,a="ga"):"function"==typeof __gaTracker&&(r=!0,a="__gaTracker"),"undefined"!=typeof _gaq&&"function"==typeof _gaq.push&&(o=!0),"function"==typeof h.eventHandler?l=h.eventHandler:"undefined"==typeof dataLayer||"function"!=typeof dataLayer.push||h.gtmOverride||(l=function(e){dataLayer.push(e)}),h.percentage?p("Percentage"):h.elements&&p("Elements"),c.on("scroll.scrollDepth",d(function(){var r=e(t).height(),o=n.innerHeight?n.innerHeight:c.height(),a=c.scrollTop()+o,l=v(r),i=+new Date-y;return u.length>=4+h.elements.length?void c.off("scroll.scrollDepth"):(h.elements&&m(h.elements,a,i),void(h.percentage&&f(l,a,i)))},500)))}}(jQuery,window,document);jQuery.scrollDepth();
</script>

3、设置Trigger,接受自定义事件ScrollDistance
看页面访问深度

4、接受数据层变量,共四个:eventCategory、 eventAction、eventLabel和eventValue
看页面访问深度

5、设置tag中的事件
看页面访问深度6、测试
看页面访问深度
计算规则:如果一个用户将整个页面浏览完,那么每一行都会计算1


GA小站, 版权所有丨如未注明 , 均为原创

转载请注明标题:看页面访问深度
链接:https://www.ichdata.com/look-at-the-depth-of-page-visits-via-gtm.html

喜欢 (0)
[hyz1100@126.com]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址