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 – 监控网页与程序性能

标签: GA, GTM

除单独说明外，文章默认采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。

本文超过2年没有更新，今后内容也许不会被维护或者支持，部分内容可能具有时效性，涉及技术细节或者软件使用方面，本文不保证相应的技术更新和实践可操作性。

小礼物走一走
打赏

相关文章：

已有 5 条评论

  1. 羽中 羽中
    2018-08-13 11:22
    回复

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

  2. 曉莊 曉莊
    2018-08-22 23:48
    回复

    您好，不知可否共享下 这个 typecho 的主题？

    1. 王叨叨 王叨叨 [作者]
      2018-08-23 13:33
      回复

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

  3. 秋水 秋水
    2018-09-13 12:00
    回复

    Google Analytics（分析）设置

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

    这里是如何设置的

    1. 王叨叨 王叨叨 [作者]
      2018-09-13 15:42
      回复

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

添加新评论