竹磬网-邵珠庆の日记 生命只有一次,你可以用它来做些更多伟大的事情–Make the world a little better and easier


205月/140

从Google Analytics升级Universal Analytics

发布在 邵珠庆

从Urchin到Google Analytics,再到如今的Universal Analytics。Google的分析工具总是在不断的升级,完善中。搞的我们这些使用者一刻也不敢懈怠。努力的跟上这升级的节奏,不敢落后。从本篇文章开始,我们的注意力将从Google Analytics转移到对Universal Analytics的关注。

 

本篇文章将分两大部分来介绍Universal Analytics的代码。第一部分是Universal Analytics的全局代码,也就是网站中每个页面都需要添加的那部分常规追踪代码。第二部分是Universal Analytics的自定义代码。下面我们来分别看下这两部分追踪代码如何设置和实施,以及和Google Analytics追踪代码的区别。

 

第一部分 Universal Analytics全局代码

1,在返回数据时的变化

在对Universal Analytics的追踪代码和实施过程进行介绍之前,我想有必要先来介绍一个细节的变化。就是Google 分析工具在向服务器返回数据时的请求URL和方式的变化。在Google Analytics中,所有追踪到的数据会以对utm.gif图像的请求参数形式返回到Google服务器。因此,我们在检查Google Analytics时最常见的是以http://www.google-analytics.com/__utm.gif开头的URL地址。

但是现在,无论是你的网站部署的是Google Analytics,还是Universal Analytics,当你对返回数据进行检查时,都会发现一些变化。返回数据不再只有之前的一个URL地址了。而是可能会变成以下三个中的一个。

三类Google 分析工具返回数据URL地址

  1. http://www.google-analytics.com/__utm.gif
  2. http://www.google-analytics.com/collect
  3. http://stats.g.doubleclick.net/__utm.gif

这三类地址都可以正常返回访问者的行为数据,产生三类不同返回数据URL地址的原因在于网站中实施的Google分析工具。其中第一个是网站部署Google Analytics默认全局代码时返回数据的URL地址,第二个是网站部署Universal Analytics默认全局代码时返回数据的URL地址。第三个URL地址比较有意思,当我们启用受众特征和兴趣报告,并对默认的全局追踪代码进行定制时返回数据URL地址。

启用受众特征和兴趣报告需对Google分析的全局代码进行修改,并且在账户中的媒体资源部分选择启用受众特征和兴趣报告

下面我们以代码示例来说明下不同情况下可能产生的返回数据URL情况。

 

如果你的网站实施的是默认的Google Analytics全局追踪代码。

1
2
3
4
5
6
7
8
9
10
11
<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>

那么你将看到以http://www.google-analytics.com/__utm.gif开头的返回数据URL地址。

1
http://www.google-analytics.com/__utm.gif?utmwv=5.4.6&utms=1&utmn=1896906760&utmhn= bluewhale.cc &utmcs=utf-8&utmsr=1120x700&utmvp=1103x33&utmsc=24-bit&utmul=zh-cn&utmje=1&utmfl=11.9%20r900& utmdt=%E8%93%9D%E9%B2%B8%E7%9A%84%E7%BD%91%E7%AB%99%E5%88%86%E6%9E%90%E7%AC%94%E8%AE%B0%20%7C%20%E5%85%B3%E6%B3%A8Google%20Analytics%E5%BA%94%E7%94%A8%E4%B8%8E%E6%8A%80%E5%B7%A7&utmhid=1955227755&utmr=-&utmp=%2F&utmht=1387982554877&utmac=UA-24113315-1&utmcc=__utma%3D1.1231777628.1385699116.1387959194.1387982555.8%3B%2B__utmz%3D1.1387959194.7.1.utmcsr%3Dbaidu123%7Cutmccn%3D(not%2520set)%7Cutmcmd%3D(not%2520set)%3B&utmu=qFEAg~

 

如果你的网站实施的是默认的Universal Analytics全局追踪代码。

1
2
3
4
5
6
7
8
9
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
  ga('create', 'UA-12347890-11', 'bluewhale.cc');
  ga('send', 'pageview');
</script>

那么你将看到以http://www.google-analytics.com/collect开头的返回数据URL地址。

1
http://www.google-analytics.com/collect?v=1&_v=j15&a=2124808192&t=pageview&_s=1&dl=http%3A%2F%2Fbluewhale.cc%2Ftest%2Fua_test.html&ul=zh-cn&de=gb2312&dt=UAcode%E6%B5%8B%E8%AF%95%E9%A1%B5%E9%9D%A2&sd=24-bit&sr=1120x700&vp=1103x33&je=1&fl=11.9%20r900&_utma=127635166.34592685.1383186536.1387941519.1387981700.19&_utmz=127635166.1387352120.16.8.utmcsr%3Dgoogle%7Cutmccn%3D(organic)%7Cutmcmd%3Dorganic%7Cutmctr%3D%25E8%2593%259D%25E9%25B2%25B8%25E7%25BD%2591%25E7%25AB%2599%25E5%2588%2586%25E6%259E%2590&_utmht=1387982003772&_u=MACC~&cid=34592685.1383186536&tid=UA-12347890-11&z=994756508

 

如果你的Google分析启用了受众特征和兴趣报告,并对默认的全局追踪代码进行了定制。

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-12347890-11']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

那么无论你的网站中实施Google Analytics还是Universal Analytics,你都会看到以http://stats.g.doubleclick.net/__utm.gif开头的返回数据URL地址。

1
http://stats.g.doubleclick.net/__utm.gif?utmwv=5.4.6dc&utms=1&utmn=894009105&utmhn=bluewhale.cc&utmcs=utf-8&utmsr=1120x700&utmvp=1120x33&utmsc=24-bit&utmul=zh-cn&utmje=1&utmfl=11.9%20r900&utmdt=%E8%93%9D%E9%B2%B8%E7%9A%84%E7%BD%91%E7%AB%99%E5%88%86%E6%9E%90%E7%AC%94%E8%AE%B0%20%7C%20%E5%85%B3%E6%B3%A8Google%20Analytics%E5%BA%94%E7%94%A8%E4%B8%8E%E6%8A%80%E5%B7%A7&utmhid=853429841&utmr=-&utmp=%2F&utmht=1387981699675&utmac=UA-12347890-1&utmcc=__utma%3D127635166.34592685.1383186536.1387941519.1387981700.19%3B%2B__utmz%3D127635166.1387352120.16.8.utmcsr%3Dgoogle%7Cutmccn%3D(organic)%7Cutmcmd%3Dorganic%7Cutmctr%3D%25E8%2593%259D%25E9%25B2%25B8%25E7%25BD%2591%25E7%25AB%2599%25E5%2588%2586%25E6%259E%2590%3B&utmu=qAE~

 

2,返回数据的类型变化

在介绍Google Analytics的文章中我们曾说过,Google Analytics支持5种数据类型。

而在Universal Analytics中对数据类型的标记和分类更加清晰,同时支持的数据类型也有增加。

在Universal Analytics的返回数据中通过参数t来记录本次记录到的数据属于哪种类型。除了我们之前介绍的5种类型以外,Universal Analytics还支持时间类型和社交类型的返回数据。

如上表所示,当t=pageview时表示页面类的数据,t=event时表示事件类的数据,t=Transaction或Item时表示电商类的订单数据,t=Social时表示社交类的数据,t=timing时表示计时类的数据。t参数的值不存在为空的情况。后面部分我们会详细介绍对触发不同类型数据代码的定制和实施方法。

 

3,Universal Analytics全局代码定制变化

前面介绍了返回数据URL的变化和数据类型的变化情况,下面我们进入正题,开始介绍Universal Analytics的全局代码。Universal Analytics的追踪代码与Google Analytics相比,更加简单,易用,并且可读性也更强。即使是一个非技术背景的分析人员,也能大概读懂代码所表示的含义并对追踪代码进行简单的定制工作。

常用代码定制界面化

首先,对于Google Analytics中我们使用最频繁的几项代码定制的工作,如添加新搜索引擎来源,访问次数超时设置,Cmapaign来源有效期设置,以及搜索关键词排除设置等操作在Universal Analytics中都不再需要对全局追踪代码进行修改或定制,这些操作在Universal Analytics中都被以友好的界面方式呈现,并且有清晰的引导和说明信息。

 

上图是Universal Analytics中添加搜索引擎来源的操作界面,你可以在报告界面中的“管理”部分找到这些定制操作界面。在这类界面中即使没有技术背景的分析师也可以完成对代码的定制工作,并且也不需要重复的对页面中的代码进行修改。当然你也可以选择通过Google Tag Manager来减少修改代码对网站及页面的影响,但界面化的操作比直接面对代码要友好很多。

自定义追踪代码全局变量

Universal Analytics的全局代码中允许我们对全局变量进行自定义。在Universal Analytics全局代码第一段的最后一部分,是默认的全局变量ga,对于这个全局变量,我们可以进行修改和自定义。

 

这是默认的默认的Universal Analytics全局追踪代码。第一部分最后的全局变量名称是ga,同时第二部分中的创建账户以及返回数据代码也都使用了ga这个全局变量。

1
2
3
4
5
6
7
8
9
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
  ga('create', 'UA-12347890-11', 'bluewhale.cc');
  ga('send', 'pageview');
</script>

我们对Universal Analytics的全局变量名称进行修改,将ga修改为ua,同时代码第二部分中所使用的全局变量名称也都需要手动修改为ua。

 

1
2
3
4
5
6
7
8
9
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ua');
 
  ua('create', 'UA-12347890-11', 'bluewhale.cc');
  ua('send', 'pageview');
</script>

——————————————————重要提示————————————————————

注意:本部分以后的代码我们都将以ua作为Universal Analytics的全局变量进行定制和实施介绍。在使用代码时请注意,如你的网站使用默认Universal Analytics全局代码,请将ua更改为ga再使用。否则可能导致代码无法正常工作!

———————————————————————————————————————————

Cookie有效期设置及名称

在Universal Analytics中除了修改全局变量名称外,我们还可以修改记录访客的Cookie有效期。Universal Analytics默认的cookie有效期为两年,我们可以通过设置cookieExpires修改这个cookie的有效期。

在上面的截图中,我们将Universal Analytics的Cookie名称改为uaCookie,并将过期时间从2年改为1天。具体的代码修改如下:

在Universal Analytics全局代码第二部分增加cookieExpires值的设置,以秒为单位,示例中86400秒等于24小时,即1天。(86400秒/60=1440分钟/60=24小时)

1
2
3
4
5
6
7
8
9
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ua');
 
  ua('create', 'UA-12347890-11',{'cookieExpires': 86400});
  ua('send', 'pageview');
</script>

更改Cookie名称的方法和修改有效期类似,在Universal Analytics全局代码中相同的位置对 cookieName值进行设置即可。

 

1
2
3
4
5
6
7
8
9
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ua');
 
  ua('create', 'UA-12347890-11',{'cookieName':'uaCookie','cookieExpires': 86400});
  ua('send', 'pageview');
</script>

需要说明的是,对Cookie有效期及名称的修改请在代码初次实施前完成,并且需要保证所有页面代码保持一致,否则你可能会因为同时存在多个不同名称及生存期的Cookie而导致网站的数据不准确。

 

第二部分 Universal Analytics自定义代码

对于Universal Analytics自定义代码的定制和实施与Google Analytics中变化不大。下面我们分别来介绍虚拟页面事件追踪,社交追踪和电商代码的定制和实施。所有的Universal Analytics自定义代码我们都将以onclick事件为例。并且以定制后的ua作为Universal Analytics全局变量进行介绍。如你的网站中使用默认的Universal Analytics全局代码,请讲ua更改为ga。否则代码可能无法正常工作。

 

1,  虚拟页面

常规的虚拟页面代码如下,在pageview后添加虚拟页面的命名规则即可,添加的虚拟页面名称以URL的形式出现在Universal Analytics的所有页面报告中。

1
<a href="http://bluewhale.cc"onClick="javascript:ua('send', 'pageview', '/virtual_pageviews_test');">虚拟页面</a>

与Google Analytics不同的是,Universal Analytics中除了可以定制虚拟页面的URL,还可以定制虚拟页面的title。在title后添加虚拟页面的title名称即可。这将大大提高虚拟页面在报告中的数据可读性。

1
<a href="http://bluewhale.cc"onClick="javascript:ua('send', 'pageview', {'page':'/virtual_pageviews_test','title':'virtual_page'});">虚拟页面测试(自定义页面URL及title)</a>

2,  事件追踪

Universal Analytics中的事件追踪与Google Analytics没有太大差别,同样使用事件类别,行动和标签三个默认参数来标记事件。

1
<a href="http://bluewhale.cc"onClick="javascript:ua('send', 'event', 'category', 'action', 'label');">事件追踪</a>

3,  社交追踪

Universal Analytics中的社交追踪与事件非常相似,你可以对网站中的各类社交分享按钮进行追踪,这里允许记录社交媒体的名称,社交按钮的行为,目标URL等信息。具体社交追踪代码如下。

1
<a href="http://bluewhale.cc"onClick="javascript:ga('send', 'social', 'socialNetwork', 'socialAction', 'socialTarget');">社交媒体</a>

加强型的社交追踪代码除了前面介绍的三个参数外,还能标记社交按钮被触发的页面名称。

1
<a href="http://bluewhale.cc"onClick="javascript:ua('send', 'social', 'socialNetwork', 'socialAction', 'socialTarget', {'page': '/my-new-page'});">社交媒体</a>

4,电子商务追踪

最后介绍的Universal Analytics定制代码是电商代码,结构和功能与Google Analytics类似,唯一不同的是Universal Analytics为了保证analytics.js的文件大小,没有把电商的代码放在里面,因此在使用电商代码时,需要单独调用ecommerce.js文件。另外,在使用电商代码前,需要先在Google分析管理后台开通电商报告功能。

以下是Universal Analytics电子商务代码示例。所有全局变量以及改为ua,请注意。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ua');
 
  ua('create', 'UA-12347890-11', 'bluewhale.cc');
  ua('send', 'pageview');
  ua('require', 'ecommerce', 'ecommerce.js');
  ua('ecommerce:addTransaction', {
  'id': '1234',                     // Transaction ID. Required.
  'affiliation': 'Acme Clothing',   // Affiliation or store name.
  'revenue': '11.99',               // Grand Total.
  'shipping': '5',                  // Shipping.
  'tax': '1.29'                     // Tax.
  });
  ua('ecommerce:addItem', {
  'id': '1234',                     // Transaction ID. Required.
  'name': 'Fluffy Pink Bunnies',    // Product name. Required.
  'sku': 'DD23444',               // SKU/code.
  'category': 'Party Toys',         // Category or variation.
  'price': '11.99',                 // Unit price.
  'quantity': '1'                   // Quantity.
  });
  ua('ecommerce:send');
</script>

 

本篇文章我们简单介绍了Universal Analytics的全局代码和自定义代码的定制和实施。更多Universal Analytics全局代码的定制内容请参看Google官方文档

—【所有文章及图片版权归 蓝鲸(王彦平)所有。欢迎转载,转自“蓝鲸网站分析博客”。】—

155月/140

升级Universal Analytics部署代码

发布在 邵珠庆

https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced
 
<!-- Google Analytics -->
<script>
/**
 * Creates a temporary global ga object and loads analy  tics.js.
 * Paramenters o, a, and m are all used internally.  They could have been declared using 'var',
 * instead they are declared as parameters to save 4 bytes ('var ').
 *
 * @param {Window}      i The global context object.
 * @param {Document}    s The DOM document object.
 * @param {string}      o Must be 'script'.
 * @param {string}      g URL of the analytics.js script. Inherits protocol from page.
 * @param {string}      r Global name of analytics object.  Defaults to 'ga'.
 * @param {DOMElement?} a Async script tag.
 * @param {DOMElement?} m First script tag in document.
 */
(function(i, s, o, g, r, a, m){
  i['GoogleAnalyticsObject'] = r; // Acts as a pointer to support renaming.

  // Creates an initial ga() function.  The queued commands will be executed once analytics.js loads.
  i[r] = i[r] || function() {
    (i[r].q = i[r].q || []).push(arguments)
  },

  // Sets the time (as an integer) this tag was executed.  Used for timing hits.
  i[r].l = 1 * new Date();

  // Insert the script tag asynchronously.  Inserts above current tag to prevent blocking in
  // addition to using the async attribute.
  a = s.createElement(o),
  m = s.getElementsByTagName(o)[0];
  a.async = 1;
  a.src = g;
  m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

ga('create', 'UA-XXXX-Y', 'auto'); // Creates the tracker with default parameters.
ga('send', 'pageview');            // Sends a pageview hit.
</script>
<!-- End Google Analytics -->