Nginx 对接 Google Analytics

Jul 03, 2016

博客的前端页面基本设计完成了，想着该发几篇文章时才发现还没接入统计服务，由于习惯了 Google Analytics ，于是准备像往常一样接入它：

注册账户 > 页面放入跟踪代码 > 验证生效 > 完成

可是验证时发现两个问题，由于我启用了 Adblock（一个广告屏蔽扩展）导致 GA 尝试引入的统计 js 被屏蔽了， 而且我相信我的很多访客也安装了这款扩展，很尴尬…另一个问题就是：我的个人主页只有 1.5kb GA 引入的统计文件就有将近 30kb，虽然是异步加载，但是 30kb 也略大了些，其中有很多统计功能我是用不上的，比如电子商务追踪、用户计时跟踪…

选择后端统计

统计无非就前端统计和后端统计，简单对比下两者的优势：

前端统计的优势：

后端统计的优势：

对于我而言几乎不用权衡，个人站点详尽的统计比较鸡肋，广告屏蔽扩展的屏蔽十分影响准确性，国内各地与 GA 服务器的连接并不稳定，于是我开始尝试使用后端统计。由于我的主页和博客都是纯静态文件交给 Nginx 代理，为了一个统计服务在两者中间起个 Web framework 显然有点夸张，于是我的目标就是让 Nginx 直接与 GA 对接，访问静态资源的同时异步向 GA 提交统计数据。

完整代码：

# 启用 userid 会通过 cookie 给每个访客一个固定的 userid
userid on;
# 因为 GA 内的 userid 叫 cid 所以这里命名为 cid
userid_name cid;
# 相当于 cookie 的域，设置裸域则同一个用户访问二级域名会识别成一个用户，反之识别为不同的用户
userid_domain example.com;
# 相当于 cookie 的 path，设置为根目录就好
userid_path /;
# 相当于 cookie 的过期时间，设置为最大，尽可能的长期追踪一个用户的访问记录
userid_expires max;

location @ga {

    # 只允许内部访问
    internal;

    # 下面是判断用户语言（中文 or 英文），默认中文，其余中文，你可以自己拓展
    set $lang 'zh-cn';
    if ( $http_accept_language ~ en ) {
        set $lang 'en-us';
    }

    # 将数据提交至 GA ，这种方式生成的 HTTP 请求实际上是不怎么符合规范的，好在 GA 能识别
    # 参数说明：https://developers.google.com/analytics/devguides/collection/protocol/v1/parameters (网站底部可以设置成中文)
    # 需要解释的是 $uid_set$uid_got 当用户是第一次访问时 $uid_set 为 cid=xxxxx ,$uid_god 为空，以后访问时两者相反，所以 $uid_set$uid_got 实际上会得到 cid=xxxxx
    proxy_pass https://ssl.google-analytics.com/collect?v=1&tid=[这里是你的统计 ID]&$uid_set$uid_got&t=pageview&dh=$host&dp=$uri&uip=$remote_addr&dr=$http_referer&z=$msec&ul=$lang;

    # 不向 GA 提交原请求的 body
    proxy_pass_request_body off;
}


location / {
    root /path/to/home;
    index index.html;
    # 当匹配到此 location 时，这里会异步的调用 @ga
    post_action @ga;
}

值得注意的：

Reference

文章列表评论