Google Analytics基础—追踪代码 - Joanna Qian

从Google Analytics推出到现在，共有三种不同类型的网站追踪代码。他们分别是 Urchin，传统追踪代码和异步追踪代码。Urchin是第一代的追踪代码，Google已经不推荐使用。现在使用较多的是传统追踪代码和异步追踪代码。在Google Analytics后台添加代码中的就是最新的异步追踪代码。这两种追踪代码在结构，功能和具体的添加过程中都有一些差别，这里分别介绍传统代码和添加异步追踪代码的差异以及具体的实施方法

一、传递追踪代码

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
 
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}</script>

第一部分的主要功能是使用JavaScript动态判断当前请求页面的HTTP协议类型(http或https)，然后追踪代码将使用适当的协议类型向Google Analytics服务器请求ga.js文件

当JavaScript判断网站当前请求页面使用的是标准HTTP协议时，产生的字符串是

<script src='http://www.Google-Analytics.com/ga.js' type='text/javascript'>

而如果JavaScript判断当前请求页面使用的是安全连接时，产生的字符串是

<script src='https://ssl.Google-Analytics.com/ga.js' type='text/javascript'>

第二部分的主要功能是关联你的帐户ID，将追踪到的数据返回Google Analytics服务器，并避免了追踪代码执行过程中的错误对页面产生的影响。同时，所有的定制追踪方法也将包含在这部分中

二、异步追踪代码

<script type="text/javascript"> 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-12347890-2']);
  _gaq.push(['_trackPageview']);
 
  (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>

异步追踪代码使用了改进的方法来追踪网站访客，在语法上比传统代码更加灵活。同时，它通过浏览器支持异步JavaScript的优势提高了追踪代码的加载速度。因此，异步追踪代码比传统追踪代码更加灵活。即使放在页面顶部</head>的位置也不会延误页面和内容的渲染。Google Analytics建议将异步追踪代码添加到网站页面的顶部，也就是HTML代码的</head>之前

异步追踪代码的结构和传统追踪代码类似，也可以分为两部分。但在顺序上正好相反。它使用_setAccount来关联你的帐户ID。

三、追踪代码在网页中的位置

添加传统追踪代码的页面代码结构:

<html>
<head>
<title></title>
</head>
<body>
<!—传统追踪代码-->
</body>
</html>

添加异步追踪代码的页面代码结构——三种方式都可以

<html>
<head>
<title></title>
<!—异步追踪代码-->
</head>
<body>
</body>
</html>

<html>
<head>
<title></title>
</head>
<body>
<!—异步追踪代码-->
</body>
</html>

<html>
<head>
<!—异步追踪代码第一部分-->
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
</script>
</head>
<body>

<p>bluewhale.cc </p>
<!—异步追踪代码第二部分-->
<script>  (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>
</body>
</html>

四、追踪代码在网页中的应用

1、Google Map的追踪代码

google.maps.event.addListener(marker, 'click', function() {
    gaq.push(['_trackEvent', 'category', 'action', 'opt_label']);
    infoWindow.setContent(html);
    infoWindow.open(map, marker); 
  }); 
  markers.push(marker); 
}

2、sharethis的追踪代码——Google Analytics Share Widget help

ShareThis已经和Google Analytics整合在一起，ShareThis会自动扫描页面查找Google Analytics的ID并记录socail events，在Google Analytics的报告页面中通过查看名字为“ShareThis”的event来观察ShareThis的活动状况。

Event Tracking > Categories > ShareThis

也可以使用手工追踪：

<script type="text/javascript">         
    stLight.options({                 
    publisherGA:"UA-1645146-1"    
 }); 
</script>

也可以手工关闭追踪

<script type="text/javascript">
        stLight.options({
                tracking:"false"
        });
</script>

3、addthis的追踪代码

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a> 
<a class="addthis_button_linkedin_counter"></a> 
<a style="margin-left:25px;" class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a style="margin-left:10px;" class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">
 var addthis_config = {
  data_ga_property: 'INSERT_YOUR_GOOGLE_ANALYTICS_UA_ID_HERE',
  data_ga_social : true
 }; 
</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=INSERT_YOUR_ADDTHIS_PUBLISHER_ID_HERE"></script>
<!-- AddThis Button END -->

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;">
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_pinterest_pinit" pi:pinit:layout="vertical"></a>
<a onclick="_gaq.push(['_trackEvent', 'rss', 'clicked-rss-button'])" style="position: relative; left: -5px; top: 5px;" href="INSERT_YOUR_RSS_FEED_URL_HERE" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="INSERT_YOUR_RSS_FEED_URL_HERE" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"></a>
</div>
<script type="text/javascript">
 var addthis_config = {
  data_ga_property: 'INSERT_YOUR_GOOGLE_ANALYTICS_UA_ID_HERE',
  data_ga_social : true
 }; 
</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=INSERT_YOUR_ADDTHIS_PUBLISHER_ID_HERE"></script>
<!-- AddThis Button END -->

Note this doesn’t include an AddThis button and has an RSS Feed appended to the AddThis code

4、将网站的Google Analytics追踪代码添加到404 页面里

GA 传统追踪代码

<script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-12347890-1");
pageTracker._addOrganic("soso", "w");
pageTracker._addOrganic("sogou", "query");
pageTracker._addOrganic("yodao", "q");
pageTracker._initData();
pageTracker._trackPageview("/404.html?page=" + document.location.pathname + document.location.search + "&from=" + document.referrer);
</script>

GA 异步追踪代码

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-12347890-1']);
  _gaq.push(['_addOrganic', 'soso', 'w']);
  _gaq.push(['_addOrganic', 'yodao', 'q']);
  _gaq.push(['_addOrganic', 'sogou', 'query']);
  _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 = 'http://www.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

代码的作用是访问者访问404页面时，_trackPageview函数将丢失页面的名称，和推介来源发送给Google Analytics服务器。

例如：当访问者访问404页面时，Google Analytics会向服务器返回一条数据，就像下面这条信息一样。并最终将404页面的信息显示在报告里。

http://www.google-analytics.com/__utm.gif?……&utmp=%2F404.html%3Fpage%3D%2F404.php%26from%3D……

在热门内容报告中查看404页面信息。

在热门内容报告的底部过滤器中输入404，就可以看到404页面的报告了。报告中包括不仅包括出现错误的URL地址，还会显示访问者上一个访问的页面（推介来源）。通过这些信息，可以及时检查相关页面，修改错误链接。

参考：

posted on 2013-05-29 04:44 Joanna Qian 阅读(894) 评论(0) 收藏举报

刷新页面返回顶部