Skip to content

Commit da3e863

Browse files
n0099n0099
committed
involve google analytics js and event stats at ./withGoogleAnalytics
1 parent 5b19c15 commit da3e863

File tree

6 files changed

+1467
-0
lines changed

6 files changed

+1467
-0
lines changed

‎README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,3 +44,10 @@ error_page 502 /502.html;
4444
readfile('/path/to/your/404.html');
4545
exit;
4646
```
47+
48+
# Google Analytics
49+
如需搭配谷歌分析使用并将访问错误页作为事件记录，您可以使用withGoogleAnalytics目录下版本，并设置正确的GA_MEASUREMENT_ID：
50+
```bash
51+
cp ./withGoogleAnalytics/* ./
52+
sed -i 's/GA_MEASUREMENT_ID/UA-XXXXXXX-1或GA-XXXXX/g' *.html
53+
```

‎withGoogleAnalytics/401.html‎

Lines changed: 292 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,292 @@
1+
<html>
2+
<head>
3+
<title>401 UNAUTHORIZED</title>
4+
<meta name="viewport" content="width=device-width, initial-scale=1">
5+
<link href="https://fonts.googleapis.com/css?family=VT323&display=swap" rel="stylesheet">
6+
<style>
7+
.glitch {
8+
color: white;
9+
position: relative;
10+
margin: 0 auto;
11+
}
12+
13+
@keyframes noise-anim {
14+
0% {
15+
clip: rect(65px, 9999px, 42px, 0);
16+
}
17+
5% {
18+
clip: rect(29px, 9999px, 80px, 0);
19+
}
20+
10% {
21+
clip: rect(67px, 9999px, 44px, 0);
22+
}
23+
15% {
24+
clip: rect(34px, 9999px, 57px, 0);
25+
}
26+
20% {
27+
clip: rect(42px, 9999px, 71px, 0);
28+
}
29+
25% {
30+
clip: rect(98px, 9999px, 45px, 0);
31+
}
32+
30% {
33+
clip: rect(32px, 9999px, 40px, 0);
34+
}
35+
35% {
36+
clip: rect(8px, 9999px, 11px, 0);
37+
}
38+
40% {
39+
clip: rect(5px, 9999px, 37px, 0);
40+
}
41+
45% {
42+
clip: rect(99px, 9999px, 48px, 0);
43+
}
44+
50% {
45+
clip: rect(84px, 9999px, 60px, 0);
46+
}
47+
55% {
48+
clip: rect(45px, 9999px, 72px, 0);
49+
}
50+
60% {
51+
clip: rect(61px, 9999px, 6px, 0);
52+
}
53+
65% {
54+
clip: rect(35px, 9999px, 39px, 0);
55+
}
56+
70% {
57+
clip: rect(74px, 9999px, 3px, 0);
58+
}
59+
75% {
60+
clip: rect(94px, 9999px, 78px, 0);
61+
}
62+
80% {
63+
clip: rect(51px, 9999px, 15px, 0);
64+
}
65+
85% {
66+
clip: rect(52px, 9999px, 84px, 0);
67+
}
68+
90% {
69+
clip: rect(79px, 9999px, 56px, 0);
70+
}
71+
95% {
72+
clip: rect(6px, 9999px, 87px, 0);
73+
}
74+
100% {
75+
clip: rect(95px, 9999px, 35px, 0);
76+
}
77+
}
78+
79+
.glitch:after {
80+
content: attr(data-text);
81+
position: absolute;
82+
left: 2px;
83+
text-shadow: -1px 0 red;
84+
top: 0;
85+
color: white;
86+
overflow: hidden;
87+
clip: rect(0, 900px, 0, 0);
88+
animation: noise-anim 2s infinite linear alternate-reverse;
89+
}
90+
91+
@keyframes noise-anim-2 {
92+
0% {
93+
clip: rect(44px, 9999px, 55px, 0);
94+
}
95+
5% {
96+
clip: rect(78px, 9999px, 31px, 0);
97+
}
98+
10% {
99+
clip: rect(72px, 9999px, 57px, 0);
100+
}
101+
15% {
102+
clip: rect(44px, 9999px, 48px, 0);
103+
}
104+
20% {
105+
clip: rect(11px, 9999px, 55px, 0);
106+
}
107+
25% {
108+
clip: rect(64px, 9999px, 55px, 0);
109+
}
110+
30% {
111+
clip: rect(3px, 9999px, 86px, 0);
112+
}
113+
35% {
114+
clip: rect(86px, 9999px, 15px, 0);
115+
}
116+
40% {
117+
clip: rect(49px, 9999px, 39px, 0);
118+
}
119+
45% {
120+
clip: rect(6px, 9999px, 31px, 0);
121+
}
122+
50% {
123+
clip: rect(3px, 9999px, 37px, 0);
124+
}
125+
55% {
126+
clip: rect(81px, 9999px, 56px, 0);
127+
}
128+
60% {
129+
clip: rect(11px, 9999px, 50px, 0);
130+
}
131+
65% {
132+
clip: rect(6px, 9999px, 9px, 0);
133+
}
134+
70% {
135+
clip: rect(100px, 9999px, 7px, 0);
136+
}
137+
75% {
138+
clip: rect(20px, 9999px, 69px, 0);
139+
}
140+
80% {
141+
clip: rect(36px, 9999px, 69px, 0);
142+
}
143+
85% {
144+
clip: rect(33px, 9999px, 71px, 0);
145+
}
146+
90% {
147+
clip: rect(10px, 9999px, 45px, 0);
148+
}
149+
95% {
150+
clip: rect(21px, 9999px, 94px, 0);
151+
}
152+
100% {
153+
clip: rect(98px, 9999px, 27px, 0);
154+
}
155+
}
156+
157+
.glitch:before {
158+
content: attr(data-text);
159+
position: absolute;
160+
left: -2px;
161+
text-shadow: 1px 0 blue;
162+
top: 0;
163+
color: white;
164+
overflow: hidden;
165+
clip: rect(0, 900px, 0, 0);
166+
animation: noise-anim-2 3s infinite linear alternate-reverse;
167+
}
168+
</style>
169+
<style>
170+
body {
171+
margin: 0;
172+
box-sizing: border-box;
173+
height: 100%;
174+
background-color: #000000;
175+
background-image: radial-gradient(#11581E, #041607);
176+
font-family: 'VT323', Helvetica, sans-serif;
177+
font-size: 1.5rem;
178+
font-weight: 300;
179+
color: rgba(128, 255, 128, 0.8);
180+
text-shadow:
181+
0 0 1ex rgba(51, 255, 51, 1),
182+
0 0 2px rgba(102, 74, 74, 0.8);
183+
}
184+
185+
a {
186+
color: #fff;
187+
text-decoration: none;
188+
}
189+
a::before {
190+
content: "[";
191+
}
192+
a::after {
193+
content: "]";
194+
}
195+
196+
.overlay {
197+
pointer-events: none;
198+
position: absolute;
199+
width: 100%;
200+
height: 100%;
201+
background:
202+
repeating-linear-gradient(
203+
180deg,
204+
rgba(0, 0, 0, 0) 0,
205+
rgba(0, 0, 0, 0.3) 50%,
206+
rgba(0, 0, 0, 0) 100%);
207+
background-size: auto 4px;
208+
z-index: 99;
209+
}
210+
.overlay::before {
211+
content: "";
212+
pointer-events: none;
213+
position: absolute;
214+
display: block;
215+
top: 0;
216+
left: 0;
217+
right: 0;
218+
bottom: 0;
219+
width: 100%;
220+
height: 100%;
221+
background-image: linear-gradient(
222+
0deg,
223+
transparent 0%,
224+
rgba(32, 128, 32, 0.2) 2%,
225+
rgba(32, 128, 32, 0.8) 3%,
226+
rgba(32, 128, 32, 0.2) 3%,
227+
transparent 100%);
228+
background-repeat: no-repeat;
229+
animation: scan 7.5s linear 0s infinite;
230+
}
231+
@keyframes scan {
232+
0% {
233+
background-position: 0 -100vh;
234+
}
235+
35%, 100% {
236+
background-position: 0 100vh;
237+
}
238+
}
239+
240+
.terminal {
241+
box-sizing: inherit;
242+
position: absolute;
243+
height: 100%;
244+
width: 1000px;
245+
max-width: 100%;
246+
padding: 4rem;
247+
}
248+
249+
.output {
250+
color: rgba(128, 255, 128, 0.8);
251+
text-shadow:
252+
0 0 1px rgba(51, 255, 51, 0.4),
253+
0 0 2px rgba(255, 255, 255, 0.8);
254+
}
255+
.output::before {
256+
content: "> ";
257+
}
258+
259+
.input {
260+
color: rgba(192, 255, 192, 0.8);
261+
text-shadow:
262+
0 0 1px rgba(51, 255, 51, 0.4),
263+
0 0 2px rgba(255, 255, 255, 0.8);
264+
}
265+
.input::before {
266+
content: "$ ";
267+
}
268+
</style>
269+
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
270+
<script>
271+
window.dataLayer = window.dataLayer || [];
272+
function gtag(){dataLayer.push(arguments);}
273+
gtag('js', new Date());
274+
gtag('config', 'GA_MEASUREMENT_ID');
275+
gtag('event', '401', {
276+
'event_label': window.location.href,
277+
'event_category': 'httpErrorPage',
278+
'non_interaction': true
279+
});
280+
</script>
281+
</head>
282+
<body>
283+
<div class="overlay"></div>
284+
<div class="terminal">
285+
<h2>ERROR</h2>
286+
<h1 class="glitch" data-text="401 UNAUTHORIZED">401 UNAUTHORIZED</h1>
287+
<p class="output">未授权: 由于凭据无效，访问被拒绝</p>
288+
<p class="output">您无权使用所提供的凭据查看此目录或页面</p>
289+
<p class="input">返回 <a href="javascript:history.back()">上一页</a> 或访问 <a href="/">首页</a></p>
290+
</div>
291+
</body>
292+
</html>

0 commit comments

Comments
 (0)