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);
}
}