LYM -- 放浪形骸，踏歌雾霭；君心可晴，且歌且行

如何在Github托管网站中添加谷歌分析（Google Analytics）——异步跟踪

首先了解一下什么是谷歌分析，进入中文官网请点击这里。

当拥有自己个人网站的时候，我们就可以利用它来评估广告的投资回报率，并对您的Flash、视频以及社交网络网站和应用进行跟踪等功能。这里我主要介绍如何在Github上配置Google分析。

1 创建Github二级域名

当然，如果想拥有一个个人域名的网站，又不想花钱去买域名以及服务器，你可以在Github网站上注册账号。登入之后，你就可以创建新项目。在Github中，一个项目对应唯一的Git版本库。Github为每一个用户分配了一个二级域名username.github.com。比如我的二级域名就是lym406365619.github.com，我们可以很容易的创建自己二级域名中的主页，只要在托管空间下创建一个名为username.github.com的版本库，像其master分支提交网站静态页面即可，其中网站的首页为index.html。其中向Github添加SSH公钥可以参考一下我的这篇文章(http://lym406365619.github.io/blog/2013/05/16/add-ssh-keys-into-your-github/)。

2 获得google分析的tracking_id

进入google分析官网。登陆进去，依次点击管理 –> 新账户，选择想要跟踪的内容，这边我们选着网站，跟踪方法选择Universal Analytics,接着填入网站名称、网址等基本信息，点击获取跟踪ID，此时网站会总动帮你生成一个跟踪ID以及你的跟踪代码，下图是我的账户生成的跟踪ID以及跟踪代码。

谷歌分析ID以及跟踪代码

3 将Google分析部署到你的Github项目

——设置tracking_id

打开_config.yml配置文件，设置一下JB/analytics下的google的tracking-id，如下所示:

    JB :
  analytics :
    provider : google 
    google : 
    tracking_id : 'your id'

然后再向你需要运用Google分析的网站添加你刚才生成的javascript的跟踪代码。这样就能实现google分析跟踪设置。由于我想在我二级域名下的所有发表的博文都用google进行代码分析。因此参考Jekyll Bootstrap的设置，如果你本来就利用它的框架源码，就不要设置以下内容，只需改变一下上文中的跟踪ID即可。如果你设计了自己的主题框架，在需要进行google分析的页面中添加以下源码。比如我在_layout下的default.html和post.html中添加如下代码：

    {% include JB/analytics %}

注意：{% include JB/analytics %}应放在相应网页作为结束标记的</head>标记之前，且紧邻该标记。如果您的网站是使用模板来生成网页，请将代码段添加到包含<head>部分的文件中，放在作为结束标记的 </head>标记之前，且紧邻该标记。要在所有浏览器中都获得最佳效果，当在网站中加入其他脚本时，建议您采用以下两种方式之一：

1） 放到HTML</head>部分的跟踪代码段之前；

2） 在跟踪代码段与所有网页内容之后（如置于HTML正文的底部）。

其中analytics位于_layouts下的JB文件夹里，代码为：

     {% if site.safe and site.JB.analytics.provider and page.JB.analytics != false %}

  {% case site.JB.analytics.provider %}
  {% when "google" %}
    {% include JB/analytics-providers/google %}
  {% when "getclicky" %}
    {% include JB/analytics-providers/getclicky %}
  {% when "mixpanel" %}
    {% include JB/analytics-providers/mixpanel %}
  {% when "custom" %}
    {% include custom/analytics %}
  {% endcase %}

{% endif %}

因为之前_config.yml配置文件中设置为google，所以应该执行JB/analytics-providers/google里面的代码。下面应该是添加JavaScript代码里。

——设置JavaScript代码

刚开始我把之前生成的JavaScript代码复制到_include/JB/analytics-providers/google里面，但这个时候问题出现了，我利用谷歌调试工具进行测试，发现代码没有生效（一会我会告诉大家如何知道自己的跟踪已经设置成功了），不知道什么原因，而且我也是按照官方的设置进行部署的。于是我就使用JB使用的异步跟踪设置方式，发现测试成功。代码如下：

    <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', '{{ site.JB.analytics.google.tracking_id }}']);
  _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>

其中上述蓝色斜粗体可以代替成你获得的tracking_id。如果你不代替，必须在配置文件_config.yml中配置相关属性，如上所述。

4 调试、检测谷歌异步跟踪

Google分析官方提供了跟踪代码问题指导，列出常见的跟踪代码错误、常见报告数据问题以及调试方法。

下表是不同浏览器所使用不同的测测试调试工具：

浏览器 调试工具
All Firebug Lite
Chrome Google Analytics Tracking Code Debugger
Chrome Built-in Developer Tools (e.g. Resources)
Firefox Live HTTP Headers
Firefox Firebug
IE Fiddler
Sarari Built-in Activity window
IE/Sarari/Firefox Charles

我使用的是Firefox,介绍一下如何在Firefox调试谷歌异步跟踪是否正常运行，我使用的是Live HTTP Headers工具

第一步：下载并安装Live HTTP Headers；安装好后重启浏览器，一般会提示你重启浏览器；

第二步：打开Live HTTP Headers插件，在菜单栏选择Tools(工具) –> LiveHTTPHeaders；

第三步：点击打开页面上的Generator选项，并选择右边选项中的images、CSS、request；

第四步：打开含有Google分析跟踪插件的页面，即你要检测的页面。如果你之前已经打开了，刷新页面就行；

第五步：在刷新进入页面后，验证页面是否对urchin.js或者ga.js发出请求；

第六步：检查是否对_utm.gif发出请求。

如果实现上述步骤里，说明你的追踪设置应该没有问题。

如果想使用其他浏览器进行检测，请看官方文档吧。

以下是我测试页面的结果:

Google跟踪分析调试结果

5 结语

个人提交Google跟踪分析已经两天了，不过我的Google跟踪状态还是“未安装跟踪代码”，上网搜了以下，好像确实要等很久，如果各位也像我一样，不用着急，慢慢等吧。不过网站的一些数据还是可以看到的，因为Google会自动帮你生成一个报告分析，看了一下还是很详细的，可以慢慢研究。

Copyright ©2013-2015 LYM Power by Github. Base on Jekyll-Bootstrap.