原文地址： 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 埋点统计的更多相关文章

  1. mpvue 小程序开发之 数据埋点统计

    mpvue 小程序开发之 数据埋点统计 在开发过程中,有数据统计的需求,需要获取小程序当前页面和来源页面的数据,以及页面的停留时间 在对小程序api进行了一番研究之后,发现获取这些数据其实并不难 当前 ...

  2. Flutter 中如何优雅的实现多渠道打包（埋点统计系列）

    我是 Zero,脑图先奉上 先赞后看,更新永不断 只要你关注 Flutter,这篇文章你绝对用得着,==> 强烈建议收藏 多渠道打包介绍 多渠道打包的主要作用是满足产品的运营需求,统计渠道和活动 ...

  3. iOS埋点统计

    链接: iOS无埋点数据SDK实践之路 iOS:无埋点数据SDK实践之路,看完能懂就厉害了 iOS埋点业务方案 ios 无码统计埋点 使用AOP实现iOS应用内的埋点计数 Aspects(AOP) A ...

  4. RunTime 应用实例–关于埋点的思考

    埋点是现在很多App中都需要用到的,这个问题可能每个人都能处理,但是怎样来减少埋点所带来的侵入性,怎样用更加简洁的方式来处理埋点问题,怎样减少误埋,如果上线了发现少埋了怎么办?下面是本文讨论的重点: ...

  5. 嗅探js css 文件是否加载成功示例

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  6. Web程序员必备的CSS工具

    对于web开发来说,CSS是最有效的美化页面.设置页面布局的技术.但问题是,CSS是一种标记性语言,语法结构非常的松散.不严谨.WEB程序员会经常发现自己的或别人的CSS文件里有大量的冗余代码或错误或 ...

  7. Android开发和測试实践 - 接入友盟统计

    这两年一直在做无线的測试,兴许还会继续去做无线的測试,可是之前由于时间的原因一直都没有非常细致的了解到代码层面. 最近抽出时间自己做了些app的开发,决定假设想把移动的測试做好做深入.有一定的app开 ...

  8. 【Web前端Talk】“用数据说话，从埋点开始”-带你理解前端的三种埋点

    埋点到底是什么呢? 引用自百科的原话是,埋点分析网站分析的一种常用的数据采集方法.因此其本质是分析,但是靠什么分析呢?靠埋点得到的数据.通俗来讲,就是当我想要在某个产品上得到用户的一些行为数据用来分析 ...

  9. vue使用talkIngData统计

    上篇刚使用了百度统计,由于后端同事没有找到百度统计的api,于是就找了个talkingData平台... 平台地址 依旧是先注册 进入应用统计分析  创建应用 获得appid 在vue中埋点 1.in ...

随机推荐

  1. 51Nod1863 Travel 主席树 最短路 Dijkstra 哈希

    原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1863.html 题目传送门 - 51Nod1863 题意 有 n 个城市,有 m 条双向路径连通它们 ...

  2. {}动态规划}记忆化dp

    先搞个模板 #include<stdio.h> #include<string.h> using namespace std; typedef long long ll; ]; ...

  3. 导入项目报错：Type Java compiler level does not match the version

    1,导入项目报错一般是因为缺少jar包或者是jar包冲突 2,导入的jar包版本问题 3,环境需要重新修改,比如build path 中重新add libararies 遇到这种compiler环境问 ...

  4. 数仓1.4 |业务数仓搭建| 拉链表| Presto

    电商业务及数据结构 SKU库存量,剩余多少SPU商品聚集的最小单位,,,这类商品的抽象,提取公共的内容 订单表:周期性状态变化(order_info) id 订单编号 total_amount 订单金 ...

  5. JavaSE| 流程控制

    程序流程控制 流程控制语句结构: .顺序结构 语句的关系是从上到下依次执行的顺序关系,中间没有任何判断和跳转: 它是最基本的结构,Java程序总体来说都是从main()依次执行 .分支结构: 根据条件 ...

  6. vue源码的构建

    一.vue构建的基本了解 1,开始学习vue的源码的学习,vue.js是基于rollup构建的 它的配置在 scripts下面 rollup是webpack的简小版针对于js进行压缩的,没有提供复杂的 ...

  7. startActivity进行Hook

    --摘自<android插件化开发指南> 1.Activity的startActivity和Context的startActivity都是在app进程中通知AMS要启动哪个Activity ...

  8. POJ 1328 安装雷达 (贪心)

    <题目链接> 题目大意: 以x轴为分界,y>0部分为海,y<0部分为陆地,给出一些岛屿坐标(在海中),再给出雷达可达到范围,雷达只可以安在陆地上,问最少多少雷达可以覆盖所以岛屿 ...

  9. Django 学习第八天——Django模型基础第三节

    一.表关系的实现: 一对一:OneToOne(外键+唯一键) xxx = models.OneToOneField('关联的表',on_delete=models.CASCADE) 外键和一对一关系的 ...

  10. linux6.8安装docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...