【nginx】使用 nginx 时,使用 sub_filter 注入 js 代码,例如 google analysis 等
在一项工作中,已经将内网的一个网站通过 二级域名 + nginx + frp
的方式映射到公网。网站并不属于我来管理,当我想了解有多少人使用了我提供的公网来访问网站,此时就想起了 Google Analysis (简称 GA)。
并且在之前搭建前端时使用的 Netlify 服务,就可以实现直接插入 js 代码而不需要修改前端代码,就想到肯定有一种方式可以注入代码。此时自然而然就想到了 nginx,通过搜索之后(见 Reference) 找到了对应的方式,但是方法为英文且是2015年,GA 代码有点旧,所以在重新生成 GA 代码的基础上,注入到前端网站上。
1. 创建 GA 1
- 进入 Admin
- 创建新的工作空间
- 进入 Data stream
- 找到自动生成的代码,且点击 copy 按钮
注意:必须点击 copy 按钮,得到单行的代码方便之后使用,不要选中用复制!
例如
<!-- Google tag (gtag.js) --> <script async src="https://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="https://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
- https://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
- https://gist.github.com/jirutka/5279057
【nginx】使用 nginx 时,使用 sub_filter 注入 js 代码,例如 google analysis 等的更多相关文章
- c#: WebBrowser控件注入js代码的三种方案
聊做备忘. 假设js代码为: string jsCode = @"function showAlert(s) {{ alert('hello, world! ' + s);}}; showA ...
- HTML编码的用户输入------阻止向Controller的方法传入参数时用链接注入javascript代码或者HTML标记
- 图片攻击-BMP图片中注入恶意JS代码 <转载>
昨天看到一篇文章<hacking throung images>,里面介绍了如何在BMP格式的图片里注入JS代码,使得BMP图片既可以正常显示, 也可以运行其中的JS代码,觉得相当有趣. ...
- 如何在 js 代码中使用 jsp 标签或 Java 代码
JSP 标签还是很方便的,比如 Struts.Spring 等提供给我们的 JSP 标签,可以用它们来获取变量或进行一些计算.比如 struts2 的 <s:url value="/a ...
- onunload对应的js代码为什么不能执行?和onbeforeunload的区别?
为什么onunload对应的js代码不能执行? 为什么onbeforeunload才可以在离开页面时执行相应的js代码? 1.onunload和onbeforeunload都是在离开页面或者刷新页面的 ...
- Nginx+Tomcat发布时不间断服务的提供
原理 1.使用Nginx反向代理事项负载均衡,至少两个Tomcat(tomcatA+TomcatB)同时提供服务. 2.发布时配置Nginx的nginx.conf,只让其中的TomcatA临时提供所有 ...
- nginx实现动态分离,解决css和js等图片加载问题
改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...
- nginx反向代理时配置访问密码
在有些情况下,我们需要对服务器上的某些资源进行限流或者禁止陌生人访问,我们可以通过nginx配置来对url添加访问密码. 效果如下 nginx 开启访问验证在 nginx 下,提供了 ngx_http ...
- nginx 反向代理时丢失端口的解决方案
今天,配置nginx反向代理时遇到一个问题,当设置nginx监听80端口时转发请求没有问题.但一旦设置为监听其他端口,就一直跳转不正常:如,访问欢迎页面时应该是重定向到登录页面,在这个重定向的 ...
随机推荐
- 非root用户安装科学计算包blas、lapack和FFTW
一.安装FFTW 1.下载安装包 下载地址:http://www.fftw.org/download.html 2.编译安装 tar -zxvf fftw-3.3.10.tar.gz cd fftw ...
- mysql 存储过程和触发器
存储过程 -- 声明结束符 -- 创建存储过程 DELIMITER $ -- 声明存储过程的结束符 CREATE PROCEDURE pro_test() --存储过程名称(参数列表) BEGIN - ...
- Odoo 14 Action URL 生成
from werkzeug.urls import url_encode url = '/web#%s' % url_encode({ 'action': 'hr.plan_wizard_action ...
- Odoo14 js 怎么获取图片url链接
上内部代码: 1 _getImageURL: function (model, field, id, placeholder) { 2 id = (_.isArray(id) ? id[0] : id ...
- Vim基础用法,最常用、最实用的命令介绍(保姆级教程)
配置文件设置 set number (设置行号) set nocompatible (设置不兼容vi模式,不设置会导致许多vim特性被禁用) set clipboard=unnamed (设置普通的复 ...
- OpenCV4之C++入门详解
OpenCV之C++入门 1.Visual Studio安装及环境配置与搭建 下载地址:https://my.visualstudio.com/Downloads?q=Visual,下载后按照说明安装 ...
- React中useMemo与useCallback的区别
useMemo 把"创建"函数和依赖项数组作为参数传⼊入useMemo,它仅会在某个依赖项改变时才重新计算memoized 值.这种优化有助于避免在每次渲染时都进⾏行行⾼高开销的计 ...
- rcu stall 导致的hung 记录
synchronize_sched 也会在wait_rcu_gp 的长时间等待导致进入hung ,假设rcu没有及时执行的话, 另外,如果rcu积累到一定程度,内存自然就不足了,可能会oom. rcu ...
- 使用MindSpore计算旋转矩阵
技术背景 坐标变换.旋转矩阵,是在线性空间常用的操作,在分子动力学模拟领域有非常广泛的应用.比如在一个体系中切换坐标,或者对整体分子进行旋转平移等.如果直接使用Numpy,是很容易可以实现的,只要把相 ...
- [CF1538G] Gift Set (数学简单题)
题面 相信英文题面也很好理解 有 x \tt x x 个红糖, y \tt y y 个蓝糖.每一个礼包里面要么有 a \tt a a 个红糖+ b \tt b b 个蓝糖,要么是 a \tt a a ...