用Google Analytics跟蹤頁面404錯誤與死連結

圖三：404錯誤跟蹤

原理說明

首先介紹下用到的document對象的三個屬性：document.location.pathname、document.location.search、document.referrer。每個html頁面都是一個document對象，通過javascript等指令碼可以調用document對象的屬性和方法，從而擷取與修改html頁面元素。

其中，document.location.pathname表示當前頁面url中去除網域名稱後的檔案路徑部分（例如http://www.wainsight.com/sitemap.html中的/sitemap.html部分）；document.location.search表示頁面動態url中問號及參數部分（例如http://www.wainsight.com/?p=371&preview=true中的?p=371&preview=true部分）；document.referrer表示進入當前頁面的前一個頁面的url，即內部連結與引薦來源地址。

圖一：擷取URL中檔案路徑

因此，通過document.location.pathname、document.location.se；arch屬性可擷取404錯誤連結，document.referrer屬性可擷取404錯誤連結所在的頁面；然後通過Google Analytics事件跟蹤_trackEvent或_trackPageview函數進行跟蹤。

圖二：跟蹤404錯誤頁面及死連結

404錯誤頁面單獨跟蹤代碼設定

用_trackPageview函數跟蹤，會將404錯誤連結及來源資訊展現內容報告中，需要通過進階過濾、進階細分等方式才能看到。網站分析協會Web Analytics Association建議將404錯誤頁面的Pageview剔除，因為它不能代表網站正常的使用者體驗，個人也是十分贊同，因此更推崇的是用事件跟蹤_trackEvent來單獨對404錯誤進行跟蹤。當然蘿蔔青菜各有所愛，你可以選擇下面任意一種。

在404頁面中添加以下代碼，以_trackPageview跟蹤404錯誤：

<script type='text/javascript'>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-N']);
_gaq.push(['_trackPageview', '404.html?page=' + document.location.pathname + document.location.search + '& from= ' + document.referrer ]);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
< /script>

在404頁面中添加以下代碼，以_trackEvent事件跟蹤404錯誤：

<script type='text/javascript'>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-N']);
_gaq.push(['_trackEvent', 'Error', '404', 'page:' + document.location.pathname + document.location.search + ' ref:' + document.referrer ]);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
< /script>

404錯誤頁面通用跟蹤代碼設定

通過錯誤狀態判斷並設定對應的跟蹤代碼，就可以在通用代碼中實現對404錯誤的跟蹤。例如你網站是Php頁面，可採用以下通用的跟蹤代碼設定，並且通過錯誤狀態判斷，跟蹤各類錯誤，例如404與410錯誤。

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-N']);
_gaq.push(
< ?php if (stristr($_SERVER['REDIRECT_STATUS'], "404")) { ?>
['_trackEvent', 'Error', '404', 'page:' + document.location.pathname + document.location.search + ' ref:' + document.referrer ]
< ?php } else { ?>['_trackPageview']<?php } ?> );
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
< /script>

WordPress、Joomla、DedeCMS等CMS系統404錯誤跟蹤代碼設定

如果使用的代碼跟蹤外掛程式或者直接在header、footer等模板中添加的跟蹤代碼，可以在404頁面添加以下代碼來補充。

<script type="text/javascript">
_gaq.push(['_trackEvent', 'Error', '404', 'page:' + document.location.pathname + document.location.search + ' ref:' + document.referrer ]);
< /script>

404錯誤報表查看與定製

通過“內容”“事件跟蹤”逐級報告查看，最後來個404錯誤詳情報告每周信箱訂閱計劃，整個網站的內部404錯誤、外部死連結就全部被你hold住了！ 

圖四：404錯誤頁面與死連結報告

用Google Analytics跟蹤404錯誤與死連結的原理與方法，就介紹這麼多了，