【nginx】使用 sub_filter 注入 js 代碼,例如 google analysis 等
在一項工作中,已經將內網的一個網站通過 二級域名 + nginx + frp
的方式映射到公網。網站並不屬於我來管理,當我想了解有多少人使用了我提供的公網來訪問網站,此時就想起了 Google Analysis (簡稱 GA)。
並且在之前搭建前端時使用的 Netlify 服務,就可以實現直接插入 js 代碼而不需要修改前端代碼,就想到肯定有一種方式可以注入代碼。此時自然而然就想到了 nginx,通過搜索之後(見 Reference) 找到了對應的方式,但是方法為英文且是2015年,GA 代碼有點舊,所以在重新生成 GA 代碼的基礎上,注入到前端網站上。
除了 GA 之外,只要能插入 js,就有其他很多玩法了,例如:
- 修改數據;
- 增加廣告;
- 修改樣式;
- …
1. 創建 GA 1
- 進入 Admin
- 創建新的工作空間
- 進入 Data stream
- 找到自動生成的代碼,且點擊 copy 按鈕
注意:必須點擊 copy 按鈕,得到單行的代碼方便之後使用,不要選中用複製!
例如
<!-- Google tag (gtag.js) --> <script async src="//www.googletagmanager.com/gtag/js?id=G-******"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-******'); </script>
2. 注入代碼2
- 格式化 copy 代碼為
sub_filter </head> '{copy code}';
,要求如下:- 含義:替換 為後半部分
- 代碼必須為一行
- 使用 sub_filter 語句替換
- GA 生成的代碼中混用了
'
和"
,需要統一為"
- 不要忘記分號
例如
sub_filter </head> '<!-- Google tag (gtag.js) --> <script async src="//www.googletagmanager.com/gtag/js?id=G-******"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag("js", new Date()); gtag("config", "G-******"); </script>'
- 添加進 nginx 中的 location,然後重啟
注意: 似乎需要開啟 sub_filter 功能有單獨的指令,我是用的是寶塔提供的 nginx,重啟後直接可以使用。
注意: 是否只能插入 location 還待商議。
結果
網站 F12
GA 控制台
Reference
- //support.google.com/analytics/answer/9304153?hl=en#zippy=%2Cweb%2Cfind-your-g–id-for-any-platform-that-accepts-a-g–id%2Cadd-your-tag-using-google-tag-manager%2Cadd-the-google-tag-directly-to-your-web-pages
- //gist.github.com/jirutka/5279057