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