用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错误与死链接的原理与方法，就介绍这么多了，