docs

gihubyuan · Apr 25, 2023 · a58a11e · a58a11e
1 parent 500c06b
commit a58a11e
Show file tree

Hide file tree

Showing 3 changed files with 204 additions and 18 deletions.
diff --git a/README_SELF.md b/README_SELF.md
@@ -47,11 +47,12 @@ nr docs
 + 防止重复init sdk
 
 ### 二期未完成功能
++ 设置断网情况下不采集任何元素(我认为断网了不需要再去采集用户的操作了，除非是特别需要，所以加上次限制)
 + 支持错误信息去重（并自动转为区间事件）(注意原生和vue是否会重复，sdk这个范围要做好去重)(其次这里的场景应该是比如说下午到晚上都报错，那肯定不能一直捕捉错误，错误类型和时间范围应该是集合为一个事件就行)
 + 支持区间打点，区间采集(记录开始和结束，筛选统计开始和结束之间的事件行为,统计到一个分组中)
-+ 支持区域曝光度采集
 + 支持暴露更多sdk内部方法（例如使用者想要拿到此时的硬件数据,用户更改入参的方法,一些钩子也要加到这里，例如上传之前的的钩子，然后组成一个数组，为什么这里需要是因为用户想要在每个页面细致化控制是否上传，例如只想在用户打开某个页面才开始采集,不是这个页面则结束采集）
 + 关于用户信息的重构 - 【1.分为未登录与已登录的场景，登录后进行绑定，机器与用户id进行多对多绑定(更多方案还在确定中) 2.支持动态修改用户信息】
++ 支持区域曝光度采集(放在后面，因为要暴露一下方法来动态采集)
 + 支持数据临时存储本地的形式减少服务端压力(会设定存储的阈值大小，最大5M，先不支持跨域存储，否则内容太大上传慢或者不兼容导致此功能不稳定) - 这个先等sdk内部方法后面在做，因为这里需要暴露方法来供用户手动发送
 + ----------优先级分割线-------------
 + sourcemap 错误跟踪

diff --git a/examples/vanilla/demo.html b/examples/vanilla/demo.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>轮播图自动曝光埋点demo</title>
+ <style type="text/css">
+ ul {
+ padding: 0;
+ }
+ .clear {
+ clear: both;
+ zoom: 1;
+ }
+ *,
+ :after,
+ :before {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ }
+ .clearfix:after {
+ clear: both;
+ }
+ .clearfix:after,
+ .clearfix:before {
+ display: table;
+ content: "";
+ }
+ .promo-bd {
+ margin: 0 auto;
+ overflow: hidden;
+ width: 520px;
+ }
+ .promo-bd .items-container {
+ list-style: none;
+ overflow: hidden;
+ width: 2280px;
+ left: 0px;
+ opacity: 1;
+ height: 280px;
+ }
+ .promo-bd .items-container .item {
+ display: list-item;
+ float: left;
+ overflow: hidden;
+ display: block;
+ visibility: visible;
+ height: 100%;
+ }
+ .promo-bd .items-container .item a {
+ display: inline-block;
+ height: 100%;
+ }
+ .sld-ft-nav {
+ text-align: center;
+ }
+ .sld-ft-nav li {
+ display: inline-block;
+ margin-left: 8px;
+ border-radius: 10px;
+ width: 20px;
+ height: 20px;
+ line-height: 20px;
+ background-color: #ccc;
+ color: #fff;
+ font-size: 12px;
+ cursor: pointer;
+ }
+ .sld-ft-nav li:first-child {
+ margin-left: 0px;
+ }
+ .sld-ft-nav li.selector {
+ background-color: #ff7300;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="container">
+ <div class="promo-bd">
+ <div class="items-container clear">
+ <div class="item" data-id="111">
+ <a href="#">
+ <img
+ src="https://img.alicdn.com/tfs/TB1fEOLCrr1gK0jSZFDXXb9yVXa-520-280.jpg"
+ />
+ </a>
+ </div>
+ <div class="item" data-id="112">
+ <a href="#">
+ <img
+ src="https://img.alicdn.com/tfs/TB1BrwUFuL2gK0jSZPhXXahvXXa-520-280.jpg_q90_.webp"
+ />
+ </a>
+ </div>
+ <div class="item" data-id="113">
+ <a href="#">
+ <img
+ border="0"
+ src="https://aecpm.alicdn.com/simba/img/TB183NQapLM8KJjSZFBSutJHVXa.jpg"
+ />
+ </a>
+ </div>
+ <div class="item" data-id="114">
+ <a href="#">
+ <img
+ border="0"
+ src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"
+ />
+ </a>
+ </div>
+ </div>
+
+ <ul class="promo-nav sld-ft-nav">
+ <li class="dot selector" onclick="handlerClick(0)">1</li>
+ <li class="dot" onclick="handlerClick(1)">2</li>
+ <li class="dot" onclick="handlerClick(2)">3</li>
+ <li class="dot" onclick="handlerClick(3)">4</li>
+ </ul>
+ </div>
+ </div>
+ <script type="text/javascript">
+ let handlerLoop;
+ let width = 520;
+
+ function transform(num) {
+ document.querySelector(".items-container").setAttribute(
+ "style",
+ `
+ transition-duration: 0.3s;
+ transform: translate3d(-${width * num}px, 0px, 0px);
+ backface-visibility: hidden;
+ left: 0px;
+ opacity: 1;
+ `
+ );
+ document.querySelectorAll("li.dot").forEach(function (ele, i) {
+ ele.setAttribute("class", "dot");
+ if (i === num) {
+ ele.setAttribute("class", "dot selector");
+ }
+ });
+ }
+
+ function loop(n) {
+ let num = n;
+ handlerLoop = setInterval(function () {
+ if (num === 3) {
+ num = 0;
+ } else {
+ num++;
+ }
+ transform(num);
+ }, 1500);
+ }
+ loop(0);
+
+ function handlerClick(index) {
+ clearInterval(handlerLoop);
+ transform(index);
+ loop(index);
+ }
+ </script>
+ </body>
+</html>
diff --git a/examples/vanilla/index.html b/examples/vanilla/index.html
@@ -6,7 +6,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>example-vanilla</title>
  </head>
- <body>
+ <body style="height: 2000px">
  <script type="module" src="/main.ts"></script>
  <div id="app"></div>
 
@@ -46,9 +46,6 @@
  <button id="promiseError" onclick="promiseError()">promiseError</button>
  <button id="consoleErr" onclick="consoleErr()">手动输出错误</button>
  </div>
- <br />
-
- <!-- Error 捕捉 -->
  <script>
  // ---------------- Error 捕捉 ----------------
  function codeError() {
@@ -71,6 +68,8 @@
  }
  </script>
 
+ <br />
+
  <!-- Http 事件捕捉 -->
  <div>
  <div>Http 事件捕捉</div>
@@ -83,9 +82,6 @@
  Fetch异常请求
  </button>
  </div>
- <br />
-
- <!-- Http 事件捕捉 -->
  <script>
  // ---------------- Http 事件捕捉 ----------------
  function onClickXhrNormal() {
@@ -146,6 +142,8 @@
  }
  </script>
 
+ <br />
+
  <!-- Pv 事件捕捉 -->
  <div>
  <div>Pv 事件捕捉</div>
@@ -160,9 +158,6 @@
  <!-- 这种无法捕捉 -->
  <a href="http://www.baidu.com" target="_blank">跳到百度</a>
  </div>
- <br />
-
- <!-- Pv 事件捕捉 -->
  <script>
  // ---------------- Pv 事件捕捉 ----------------
  function hashChange() {
@@ -187,14 +182,16 @@
  }
  </script>
 
+ <br />
+
  <!-- 延迟加载sdk -->
  <div>
  <div>延迟加载sdk</div>
  <button onclick="delayInit()">延迟加载sdk</button>
  </div>
  <script type="module">
  import { init } from "@web-tracing/core";
- window.delayInit = function() {
+ window.delayInit = function () {
  init({
  // dsn: 'https://cdn.staticaly.com/gh/M-cheng-web/image-provider@main/blog/Annapurna-Ranges-2560x1440.5r9m9t5vg1g0.webp',
  dsn: "http://1.15.224.10:22/trackweb/tra",
@@ -226,16 +223,42 @@
  // console.log('afterSendData-data', data)
  },
  });
- }
+ };
  </script>
 
+ <br />
+
+ <!-- 曝光采集 -->
+ <div>
+ <div>曝光采集</div>
+ <div id="target">
+ <img
+ src="https://aecpm.alicdn.com/simba/img/TB183NQapLM8KJjSZFBSutJHVXa.jpg"
+ />
+ </div>
+ </div>
  <script>
- window.addEventListener("offline", () => {
- console.log("已断网");
- });
- window.addEventListener("online", () => {
- console.log("网络已连接");
+ const target = document.querySelector("#target");
+ const io = new IntersectionObserver((entries) => {
+ entries.forEach((entry) => {
+ // 如果该元素是可见，就执行某些操作
+ if (entry.isIntersecting) {
+ console.log("目标元素已经曝光");
+ }
+ });
  });
+
+ // 开始观察目标元素
+ io.observe(target);
+ </script>
+
+ <script>
+ // window.addEventListener("offline", () => {
+ // console.log("已断网");
+ // });
+ // window.addEventListener("online", () => {
+ // console.log("网络已连接");
+ // });
  </script>
  </body>
 </html>