LoginSignup
4
3

More than 5 years have passed since last update.

Google AnalyticsにNavigation Timing APIの値を送信する方法

Last updated at Posted at 2013-09-23

1年ほど前に自分が書いた記事

Navigation Timing API を, Google Analyticsのデータとして送信して, Google Analyticsで閲覧者のNavigation Timing APIのデータを見れるようにしようと思い立って, コードを書いてみました.

基本は下記のJavaScriptの関数をコピペして自サイトのGoogle Analyticsが動いているページに埋め込んだあと, gaPerformance 関数を適切なタイミングで実行すればできると思います.

ただ, 適切なタイミングが難しく, onLoadイベント内で行うと, window.performance.timing.loadEventEndの値が入らないためトラッキングできなくなると思うので注意が必要です.

自分の場合は,

$(function () {setTimeout(gaPerformance, 3000);});

などとして, onLoadイベント内で3秒後に gaPerformance を起動する, とかやってますが, 他にいい方法があれば是非教えてください.

なお, コードはGithubにもあげてみました
https://github.com/1987yama3/ga-navigation-timing

ga-navigation-timing.js
function gaPerformance () {
   var sendEvent = function (category, action, label, value, opt_noninteraction) {
      category = category || 'Performance';
      if (typeof value !== 'undefined' && value < 0) {
         return;
      }
      if (typeof _gaq !== 'undefined' && typeof _gaq.push === 'function') {
         _gaq.push(['_trackEvent', category, action, label, value, opt_noninteraction]);
      }
   };
   if (typeof window.performance !== 'undefined') {
      var navigation = window.performance.navigation;
      var timing = window.performance.timing;

      sendEvent(undefined, 'Navigation', 'RedirectCount', navigation.redirectCount, true);
      sendEvent(undefined, 'Timing', 'Redirect', (timing.redirectEnd - timing.redirectStart), true);
      sendEvent(undefined, 'Timing', 'Application Cache', (timing.domainLookupStart - timing.fetchStart), true);
      sendEvent(undefined, 'Timing', 'DNS Lookup', (timing.domainLookupEnd - timing.domainLookupStart), true);
      sendEvent(undefined, 'Timing', 'TCP Connection', (timing.connectEnd - timing.connectStart), true);
      sendEvent(undefined, 'Timing', 'Request Time', (timing.responseStart - timing.requestStart), true);
      sendEvent(undefined, 'Timing', 'Response Time', (timing.responseEnd - timing.responseStart), true);
      sendEvent(undefined, 'Timing', 'DOM Interactive Time', (timing.domInteractive - timing.domLoading), true);
      sendEvent(undefined, 'Timing', 'DOM Complete', (timing.domComplete - timing.domLoading), true);
      sendEvent(undefined, 'Timing', 'onLoad Event', (timing.loadEventEnd - timing.loadEventStart), true);
      sendEvent(undefined, 'Timing', 'Total Time', (timing.loadEventEnd - timeing.navigationStart), true);
   }
}
4
3
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3