CSS 埋點統計的示例代碼

2024-07-11 08:58:54

字體：大中小

來源：轉載

供稿：網友

當一個網站或者 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;?>