CSS 埋点统计

当一个网站或者 App 的规模达到一定程度，需要分析用户在 App 或者网站的相应操作，则需要埋点统计用户行为，这个不用多说，具体实现有 JS 脚本写好埋点事件并调接口，今天 get 到一种新的埋点统计方式保证耳目一新。下面代码简单示范一下。

1//index.html
2
3<!DOCTYPE html>
4<html>
5
6    <head lang="en">
7        <meta charset="UTF-8">
8        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
9        <title>CSS埋点</title>
10        <style>
11            .background {
12                background-size: 100% 100%;
13                width: 100%;
14                height: 100%;
15                position: fixed;
16                z-index: -100;
17            }
18
19            html {
20                background-color: #fff;
21            }
22
23            .notice-content {
24                border: 1px #ccc solid;
25                padding: 19px;
26                border-radius: 10px;
27                width: 80%;
28                margin-left: 10%;
29                margin-top: 10%;
30            }
31
32            .check-content {
33                padding: 0!important;
34                width: 80%!important;
35                margin-left: 25px;
36                margin-top: 10px;
37            }
38
39            .confirm {
40                float: left;
41                position: relative!important;
42                left: 6%;
43                height: 32px!important;
44                line-height: 32px!important;
45            }
46
47            .btn {
48                border: 1px solid #ff6689;
49                background-color: #ff6689;
50                width: 60%;
51                margin-left: 20%;
52                margin-top: 36px;
53                font-size: 16px;
54                font-weight: bold;
55                color: #FFFFFF;
56            }
57
58            .title {
59                display: block;
60                text-align: center;
61                font-size: 20px;
62                margin-bottom: 19px;
63            }
64
65            span {
66                display: block;
67                margin-bottom: 7px;
68            }
69
70            .mui-checkbox input[type=checkbox]:checked:before,
71            .mui-radio input[type=radio]:checked:before {
72                color: #ff6689;
73            }
74
75            .body-content {
76                width: 100%;
77                height: 100%;
78            }
79
80            body {
81                background-color: rgba(239, 239, 244, 0)!important;
82            }
83
84            .link:active::after{
85                margin: 100px 100px;
86                color: red;
87                content: url("http://192.168.1.100:8888/Hotels_Server/view/count.php?action=visit");
88            }
89        </style>
90    </head>
91
92    <body>
93        <div class="loading">
94            </div>
95        <div style="" class="body-content">
96            <div class="background">
97                <!-- <img id="background" src="img/background.png"> -->
98            </div>
99
100            <div class="notice-content">
101                <label class="title">登记须知</label>
102                <span>1.本次登记仅限于中国地区。</span>
103                <span>2.完成登记审核通过后，生育登记服务卡可到乡（镇、街道）直接领取，也可选择邮寄到付快递给申请人。</span>
104                <span>3.申请登记信息需真实完整，如有虚假，申请人将承担相应的法律责任。</span>
105            </div>
106            <a class="link title">访问</a>
107        </div>
108    </body>
109</html>
110
111
112//count.php
113<?php
114/**
115 * Created by PhpStorm.
116 * User: geek
117 * Date: 2018/1/18
118 * Time: 上午9:56
119 */
120
121    $actionName =  $_REQUEST["action"];
122
123    //时间格式化
124    $time = time();
125    $time = Date("Y-m-d",$time);
126
127    echo "访问动作->" .$actionName. " 访问时间->" . $time;
128?>

css点击统计

php代码统计

说明

当然这种方式使用比较简单的事件埋点。复杂的话还是需要 JS 操作。
JS 埋点统计用户可以通过浏览器禁用，CSS的话没办法禁用

CSS 埋点统计

CSS 埋点统计

评论区

相关推荐