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

文章列表评论