开发者社区> 孤剑> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

CSS 埋点统计

简介: CSS 埋点统计 当一个网站或者 App 的规模达到一定程度,需要分析用户在 App 或者网站的相应操作,则需要埋点统计用户行为,这个不用多说,具体实现有 JS 脚本写好埋点事件并调接口,今天 get 到一种新的埋点统计方式保证耳目一新。
+关注继续查看

转载地址: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>
        <div class="loading">
            </div>
        <div style="" class="body-content">
            <div class="background">
                <!-- <img id="background" src="img/background.png"> -->
            </div>

            <div class="notice-content">
                <label class="title">登记须知</label>
                <span>1.本次登记仅限于中国地区。</span>
                <span>2.完成登记审核通过后,生育登记服务卡可到乡(镇、街道)直接领取,也可选择邮寄到付快递给申请人。</span>
                <span>3.申请登记信息需真实完整,如有虚假,申请人将承担相应的法律责任。</span>
            </div>
            <a class="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;
?>

css点击统计

php代码统计

说明

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
统计分析-图表显示(前端) | 学习笔记
快速学习 统计分析-图表显示(前端)
21 0
百度统计分析埋点最佳实战篇
百度统计分析埋点最佳实战篇
692 0
前端入门教程(七)CSS属性设置
宽和高 width属性可以为元素设置宽度。 height属性可以为元素设置高度。 块级标签才能设置宽度,内联标签的宽度由内容来决定。 字体属性 文字字体 font-family可以把多个字体名称作为一个“回退”系统来保存。
1114 0
有效产出会计的本质和分析
有效产出会计的本质和分析 内容提要:有效产出会计包含有效产出T,投资I和运营费用OE这3个资金参数,而这三个资金参数可以组合成净利NP=T-OE,和投资报酬率ROI=(T-OE)/I现金流=T-OE-I这三个财务指标。
885 0
日志系列--前端访问日志的统计分析
简介 很多个人站长在搭建网站时使用nginx作为服务器,为了了解网站的访问情况,一般有两种手段: 使用CNZZ之类的方式,在前端页面插入js,用户访问的时候触发js,记录访问请求。 分析nginx的access log,从日志中挖掘有用信息。
4471 0
数字统计
来源:NOIP2010 普及组 第一题 总时间限制: 1000ms  内存限制: 65536kB 描述 请统计某个给定范围[L, R]的所有整数中,数字2出现的次数。 比如给定范围[2, 22],数字2在数2中出现了1次,在数12中出现1次,在数20中出现1次,在数21中出现1次,在数22中出现2次,所以数字2在该范围内一共出现了6次。
711 0
行为科学统计第一章知识点总结
1、什么是总体?什么是样本?总体是一个研究的所有研究对象的个体的集合。样本是被选择出来的参与研究的特定的个体集合。样本被期望能够代表总体。 2、描述总体的特性的,如总体的平均数,被称为 参数。 3、总体和参数之间的关系与样本和 统计量 之间的关系是一样的。
746 0
+关注
孤剑
http://blog.w3pc.com/ 宝剑锋从磨砺出,梅花香自苦寒来。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载