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>         <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的话没办法禁用

本文发表于2018年01月18日 16:32
(c)注:本文转载自https://my.oschina.net/u/1778933/blog/1608904,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 1761 讨论 0 喜欢 0

抢先体验

扫码体验
趣味小程序
文字表情生成器

闪念胶囊

你要过得好哇,这样我才能恨你啊,你要是过得不好,我都不知道该恨你还是拥抱你啊。

直抵黄龙府,与诸君痛饮尔。

那时陪伴我的人啊,你们如今在何方。

不出意外的话,我们再也不会见了,祝你前程似锦。

这世界真好,吃野东西也要留出这条命来看看

快捷链接
网站地图
提交友链
Copyright © 2016 - 2021 Cion.
All Rights Reserved.
京ICP备2021004668号-1