GTM采集页面加载时间

原理:用js获取页面加载前后的两个时间相减,单位是ms,在做转换,然后通过事件发送至Google Analytics浏览器请求服务器的过程。

1_21_o.jpg

可以看到网页在向服务器请求可以分成几个时间段,寻址,连接服务器,加载页面,我们这里计算的是加载页面的耗时,具体其他时间有下面一些:

     pageLoadTime = loadEventStart - navigationStart
    domainLookupTime = domainLookupEnd - domainLookupStart
serverConnectionTime = connectEnd - connectStart
  serverResponseTime = responseStart - requestStart
    pageDownloadTime = responseEnd - responseStart
     redirectionTime = fetchStart - navigationStart
  domInteractiveTime = domInteractive - navigationStart
domContentLoadedTime = domContentLoadedEventStart - navigationStart

新建变量-->自定义Javascript
20180808100119.png

function() {
  var time = window.performance.timing;
  var ms = time.loadEventStart - time.navigationStart;
  return Math.round(ms/100)/10;
}

新建触发器-->触发器类型:窗口已加载
20180808084121.png

新建代码
-->代码类型Google Analytics(分析)- Universal Analytics
-->跟踪类型:事件
-->类别:页面速度
-->操作:Page URL
-->标签:选择刚才新建的自定义Javascript
-->值:选择刚才新建的自定义Javascript
-->非互动匹配:True

20180808084340.png

然后点击提交去实时里面,如果成功的话,就和下图差不多

20180809081839.png

下图是我第二天出来的数据,可以看一些维度,不过这个仅当作一个参考。

20180809080436.png

本文参考:
采集页面的准确加载时间
初探 performance – 监控网页与程序性能

已有 5 条评论

  1. 回复

    虽然不懂但我知道谷歌牛逼! = =

  2. 曉莊 曉莊
    回复

    您好,不知可否共享下 这个 typecho 的主题?

    1. 王叨叨 王叨叨 [作者]
      回复

      这个就是默认的typecho的主题啊。

  3. 秋水 秋水
    回复

    Google Analytics(分析)设置

    在此代码中启用替代设置
    高级设置

    这里是如何设置的

    1. 王叨叨 王叨叨 [作者]
      回复

      在此代码中启用替代设置不用勾选,高级设置就看自己的需要了。

添加新评论