如何在 Google Analytics 裡檢視 nginx 實時日誌

語言: CN / TW / HK

Google Analytics 對於站長來說,是一個非常好用的工具,它能對網站流量做非常詳細的分析。但隨著 AdBlock 越來越流行,我們在 Google Analytics 上能看到的資料越來越少。但使用者的確是訪問了我們的網站,訪問記錄都在 Nginx 日誌裡。我們有辦法將 Nginx 日誌傳送給 Google Analytics 來完善資料統計嗎?當然是可以的!我們不僅能用 Google Analytics 來分析訪問使用者,還可以用來分析網站靜態資源的訪問情況,甚至是 api 的呼叫情況。下圖就是我將自己一個網站的 Nginx 日誌傳送給 Google Analytics 之後在 Google Analytics 上看到的統計資訊。

Realtime

我就以 https://blog.chenyuanwai.com 這個網站為例,完整演示一遍過程,整個部署過程不超過 30 分鐘。

提前準備

我們需要提前準備兩樣東西。一個是在伺服器上重新安裝 Nginx。一個是在 Google Analytics 裡新增一個網站。

Nginx

我用的伺服器是 Ubuntu 16.04.3,其他 linux 的發行版安裝 Nginx 的過程類似。首先我們要先把我們在用的 Nginx 停掉,然後安裝我們用到的新的 Nginx。確保以下命令使用 root 使用者執行。

# 停掉 Nginx
service nginx stop
# 安裝 Nginx
apt -y install --no-install-recommends wget gnupg ca-certificates
wget -O - https://openresty.org/package/pubkey.gpg | apt-key add -
echo "deb http://openresty.org/package/ubuntu $(lsb_release -sc) main" | tee /etc/apt/sources.list.d/openresty.list
apt update
# nginx 會安裝在

/usr/local/openresty/nginx apt -y install openresty

到這裡我們就安裝好了 Nginx。因為 Nginx 的安裝目錄變了,我們要對新的 Nginx 配置檔案做一些修改。開啟 /usr/local/openresty/nginx/conf/nginx.conf 檔案,在 http 配置下面引用之前的網站配置檔案,修改後的 nginx.conf 大概是下面這個樣子,我刪掉了其中的註釋。注意,你可能需要根據自己的實際情況對新的 nginx.conf 做修改。

worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    # 新加的這樣 include 配置,把之前的網站配置檔案載入進來
    include /etc/nginx/conf.d/*;
}

在 Google Analytics 裡新增一個網站

在 Google Analytics 裡新增 property 時,預設是新增一個 Google Analytics 4 property。我們需要的是一個 Universal Analytics property。所以在新增 property 頁面點選 show advanced options,在裡面選擇 Create a Universal Analytics property,如下圖所示

Universal Analytics property

建立好之後,你就能看類似 UA-181920284-1 的 tracking id,這個 tracking id 就是我們用來給 Google Analytics 傳送資料時要使用的引數。

給 Google Analytics 傳送資料

Nginx 和 Google Analytics 準備好之後,我們就要開始讓 Nginx 給 Google Analytics 傳送資料了。我們用 opm 先安裝一個庫。opm 是 Nginx 的包管理工具,類似 python 的 pip。

opm get BeanYoung/lua-resty-ga
opm get thibaultcha/lua-resty-jit-uuid
wget https://raw.githubusercontent.com/cloudflare/lua-resty-cookie/master/lib/resty/cookie.lua -O /usr/local/openresty/site/lualib/resty/cookie.lua

安裝好之後,我們修改網站的 Nginx 配置檔案。修改前的配置檔案大概是這樣的:

server {
	server_name blog.chenyuanwai.com;
	listen 443;
	ssl on;
	ssl_certificate /etc/nginx/ssl/blog.chenyuanwai.com.cert;
	ssl_certificate_key /etc/nginx/ssl/blog.chenyuanwai.com.key;

	location / {
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Forwarded-Proto $scheme;
		proxy_set_header Host $http_host;
		proxy_redirect off;
		proxy_pass http://127.0.0.1:8081;
	}
	access_log /var/log/nginx/blog-access.log;
	error_log /var/log/nginx/blog-error.log;
}

修改後的配置大概是這樣的

# 這一部分是給 Google Analytics 傳送請求要用到的
resolver 223.5.5.5 valid=3600s ipv6=off;
lua_ssl_trusted_certificate /etc/ssl/certs/ca-certificates.crt;

# 這裡是日誌的快取,我們每秒把快取裡的請求批量傳送給 Google Analytics
lua_shared_dict ga_cache 128m;
init_by_lua_block {
    local process = require 'ngx.process'
    process.enable_privileged_agent()
}
init_worker_by_lua_block {
    local process = require 'ngx.process'
    local ga = require 'resty.ga'
    local uuid = require 'resty.jit-uuid'

    uuid.seed()

    if process.type() == 'privileged agent' then
        ngx.timer.every(1, ga.send)
    end
}

server {
    server_name blog.chenyuanwai.com;
    listen 443;
    ssl on;
    ssl_certificate /etc/nginx/ssl/blog.chenyuanwai.com.cert;
    ssl_certificate_key /etc/nginx/ssl/blog.chenyuanwai.com.key;

    access_log /var/log/nginx/blog-access.log;
    error_log /var/log/nginx/blog-error.log;

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass http://127.0.0.1:8081;

        # 根據自己的業務來設定使用者 cid。這裡只是在 cookie 裡記錄了一個 _cid 的欄位
        access_by_lua_block {
            local cookie = require 'resty.cookie'
            local uuid = require 'resty.jit-uuid'

            local ck = cookie:new()
            local cid = ck:get("_cid")
            if not cid then
                cid = uuid()
            end
            ck:set({key = '_cid', value = cid})
            ngx.ctx.cid = cid
        }

        # 每個請求結束後,把當前請求的日誌存到快取裡
        log_by_lua_block {
            local ga = require 'resty.ga'

            -- 將自己的 tracking id 填在這裡
            local tid = '

UA-181920284-1' local cid = ngx.ctx.cid local uip = ngx.var.remote_addr -- 如果你的網站是放在 cloudflare 後面的,這裡把 uip 換成 cloudflare 傳的使用者 ip local headers = ngx.req.get_headers() if headers['CF-Connecting-IP'] then uip = headers['CF-Connecting-IP'] end ga.collect(tid, cid, uip) } } }

配置好了之後,我們重啟 Nginx

service openresty restart

大功告成。這時,如果重新整理一下網站,很快就能在 Google Analytics 裡看到實時的資料了。

Realtime

還可以做什麼

其實這是一個很好地開始,在這個基礎上,我們還做更多有意思的事情。比如我們可以把 API 伺服器的 Nginx 日誌傳送給 Google Analytics,就可以在 Google Analytics 裡看到所有的 API 呼叫統計。我們也可以用 lua-resty-ga 這個庫把每個 http 請求的狀態、響應大小、是否命中快取等指標傳送給 Google Analytics,用 Google Analytics 裡的自定義統計來把這些資料展示出來。

如果你覺得這篇文章有幫到你,歡迎給我寫的

這個庫一個:star:️。