CSS 埋点统计
原文地址： https://my.oschina.net/u/1778933/blog/1608904
CSS 埋点统计
当一个网站或者 App 的规模达到一定程度，需要分析用户在 App 或者网站的相应操作，则需要埋点统计用户行为，这个不用多说，具体实现有 JS 脚本写好埋点事件并调接口，今天 get 到一种新的埋点统计方式保证耳目一新。下面代码简单示范一下。
//index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>CSS埋点</title>
<style>
.background {
background-size: 100% 100%;
width: 100%;
height: 100%;
position: fixed;
z-index: -100;
}
html {
background-color: #fff;
}
.notice-content {
border: 1px #ccc solid;
padding: 19px;
border-radius: 10px;
width: 80%;
margin-left: 10%;
margin-top: 10%;
}
.check-content {
padding: 0!important;
width: 80%!important;
margin-left: 25px;
margin-top: 10px;
}
.confirm {
float: left;
position: relative!important;
left: 6%;
height: 32px!important;
line-height: 32px!important;
}
.btn {
border: 1px solid #ff6689;
background-color: #ff6689;
width: 60%;
margin-left: 20%;
margin-top: 36px;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
}
.title {
display: block;
text-align: center;
font-size: 20px;
margin-bottom: 19px;
}
span {
display: block;
margin-bottom: 7px;
}
.mui-checkbox input[type=checkbox]:checked:before,
.mui-radio input[type=radio]:checked:before {
color: #ff6689;
}
.body-content {
width: 100%;
height: 100%;
}
body {
background-color: rgba(239, 239, 244, 0)!important;
}
.link:active::after{
margin: 100px 100px;
color: red;
content: url("http://192.168.1.100:8888/Hotels_Server/view/count.php?action=visit");
}
</style>
</head>
<body>
<divclass="loading">
</div>
<divstyle=""class="body-content">
<divclass="background">
<!-- <img id="background" src="img/background.png"> -->
</div>
<divclass="notice-content">
<labelclass="title">登记须知</label>
<span>1.本次登记仅限于中国地区。</span>
<span>2.完成登记审核通过后，生育登记服务卡可到乡（镇、街道）直接领取，也可选择邮寄到付快递给申请人。</span>
<span>3.申请登记信息需真实完整，如有虚假，申请人将承担相应的法律责任。</span>
</div>
<aclass="link title">访问</a>
</div>
</body>
</html>
//count.php
<?php
/**
* Created by PhpStorm.
* User: geek
* Date: 2018/1/18
* Time: 上午9:56
*/
$actionName = $_REQUEST["action"];
//时间格式化
$time = time();
$time = Date("Y-m-d",$time);
echo "访问动作->" .$actionName. " 访问时间->" . $time;
?>
说明
- 当然这种方式使用比较简单的事件埋点。复杂的话还是需要 JS 操作。
- JS 埋点统计用户可以通过浏览器禁用，CSS的话没办法禁用
CSS 埋点统计的更多相关文章
- mpvue 小程序开发之 数据埋点统计
mpvue 小程序开发之 数据埋点统计 在开发过程中,有数据统计的需求,需要获取小程序当前页面和来源页面的数据,以及页面的停留时间 在对小程序api进行了一番研究之后,发现获取这些数据其实并不难 当前 ...
- Flutter 中如何优雅的实现多渠道打包（埋点统计系列）
我是 Zero,脑图先奉上 先赞后看,更新永不断 只要你关注 Flutter,这篇文章你绝对用得着,==> 强烈建议收藏 多渠道打包介绍 多渠道打包的主要作用是满足产品的运营需求,统计渠道和活动 ...
- iOS埋点统计
链接: iOS无埋点数据SDK实践之路 iOS:无埋点数据SDK实践之路,看完能懂就厉害了 iOS埋点业务方案 ios 无码统计埋点 使用AOP实现iOS应用内的埋点计数 Aspects(AOP) A ...
- RunTime 应用实例–关于埋点的思考
埋点是现在很多App中都需要用到的,这个问题可能每个人都能处理,但是怎样来减少埋点所带来的侵入性,怎样用更加简洁的方式来处理埋点问题,怎样减少误埋,如果上线了发现少埋了怎么办?下面是本文讨论的重点: ...
- 嗅探js css 文件是否加载成功示例
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- Web程序员必备的CSS工具
对于web开发来说,CSS是最有效的美化页面.设置页面布局的技术.但问题是,CSS是一种标记性语言,语法结构非常的松散.不严谨.WEB程序员会经常发现自己的或别人的CSS文件里有大量的冗余代码或错误或 ...
- Android开发和測试实践 - 接入友盟统计
这两年一直在做无线的測试,兴许还会继续去做无线的測试,可是之前由于时间的原因一直都没有非常细致的了解到代码层面. 最近抽出时间自己做了些app的开发,决定假设想把移动的測试做好做深入.有一定的app开 ...
- 【Web前端Talk】“用数据说话，从埋点开始”-带你理解前端的三种埋点
埋点到底是什么呢? 引用自百科的原话是,埋点分析网站分析的一种常用的数据采集方法.因此其本质是分析,但是靠什么分析呢?靠埋点得到的数据.通俗来讲,就是当我想要在某个产品上得到用户的一些行为数据用来分析 ...
- vue使用talkIngData统计
上篇刚使用了百度统计,由于后端同事没有找到百度统计的api,于是就找了个talkingData平台... 平台地址 依旧是先注册 进入应用统计分析 创建应用 获得appid 在vue中埋点 1.in ...
随机推荐
- union和union all的区别（面试常考）
Union:对两个结果集进行并集操作,不包括重复行,同时进行默认规则的排序: Union All:对两个结果集进行并集操作,包括重复行,不进行排序: Union因为要进行重复值扫描,所以效率低.如果合 ...
- Linux安装Tomcat-Nginx-FastDFS-Redis-Solr-集群——【第二集之新建虚拟机】
1, 2, 3, 4,(如果选择版本时,发现选项中没有centos,可以选择other linux2.6.x kernel) 5,(虚拟机命名:Centos_用途_IP) 6,(选择Split vir ...
- docker保存、载入、导出、导入
保存和载入 拿到CONTAINER ID docker ps -a 通过容器id生成镜像dockerlinuxdemoweb:update docker commit b33633d12871 doc ...
- HDU 1435 Stable Match 【稳定婚姻问题】
<题目链接> 题目大意:给你n个发射站和n个接受站的位置,并且给出他们的容量,现在需要你对这n对站台进行匹配,距离越近的站台越稳定,如果两个站台距离相等,容量越大的越稳定.问你稳定匹配是什 ...
- Splay的初步学习
具体是啥,qwq 有时间再补吧,贴一下代码: #include<iostream> #include<cstdio> #include<cstring> #incl ...
- Django 学习第七天——Django模型基础第二节
User 是自己创建的模型类,等于数据库中的表 常用的查询方法: all():获取所有数据: User.objects.all() first():获取第一条数据: User.objects.firs ...
- 本地创建 Git 仓库并关联 Phabricator
前提条件: 1.熟悉 Git 操作. 2.在搭建好的 Phabricator 上已注册账号,并开通相关权限. 方法一: 1.在本地创建Git仓库. 2.ssh-keygen -t rsa生产公钥私钥, ...
- 在notepad++中修改换行符
在notepad++中编辑时,将按tab键设置为插入4个空格而不是tab字符
- 因数表进阶：1--x的因数和
紧接着上一个文章,进阶一个因数表,来自牛客网一道比赛题: 打从1到n所有因数的和 代码如下: #include<cstdio> #define ll long long using nam ...
- 186. [USACO Oct08] 牧场旅行
186. [USACO Oct08] 牧场旅行(点击转到COGS) 输入文件:pwalk.in 输出文件:pwalk.out 时间限制:1 s 内存限制:128 MB 描述 n个被自然地编号为 ...