Beacon API All In One
Beacon API All In One
Beacon API
https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API
https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon
navigator.sendBeacon(url, data);
window.addEventListener("unload", function logData() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "/log", false); // third parameter of `false` means synchronous
xhr.send(analyticsData);
});
window.addEventListener("unload", function logData() {
navigator.sendBeacon("/log", analyticsData);
});
window.onsubmit = function send_analytics() {
var data = JSON.stringify({
location: location.href,
time: Date()
});
navigator.sendBeacon('/analytics', data);
};
window.onload = window.onunload = function analytics(event) {
if (!navigator.sendBeacon) return;
var url = "https://example.com/analytics";
// Create the data to send
var data = "state=" + event.type + "&location=" + location.href;
// Send the beacon
var status = navigator.sendBeacon(url, data);
// Log the data and result
console.log("sendBeacon: URL = ", url, "; data = ", data, "; status = ", status);
};
demo
https://developer.aliyun.com/article/752954
refs
Beacon
W3C Candidate Recommendation 13 April 2017
https://w3c.github.io/beacon/#sendbeacon-method
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
Beacon API All In One的更多相关文章
- 使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包
使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包 前端监控,埋点,数据收集,性能监控 Beacon API https://caniuse.com/beacon 优点,请 ...
- Beacon API
Beacon API User Tracking https://caniuse.com/#feat=beacon Question & Solution Beacon API 不会延缓网页卸 ...
- html5统计数据上报API:SendBeacon
公司为了精准的了解自己产品的用户使用情况,通常会对用户数据进行统计分析,获取pv.uv.页面留存率.访问设备等信息.与之相关的就是客户端的数据采集,然后上报的服务端.为了保证数据的准确性,就需要保证数 ...
- Web Performance API
Web Performance API 性能监测/性能优化 https://developer.mozilla.org/en-US/docs/Web/API/Performance https://d ...
- Sentry(v20.12.1) K8S 云原生架构探索,SENTRY FOR JAVASCRIPT SDK 配置详解
系列 Sentry-Go SDK 中文实践指南 一起来刷 Sentry For Go 官方文档之 Enriching Events Snuba:Sentry 新的搜索基础设施(基于 ClickHous ...
- pagehide event & sendBeacon
pagehide event & sendBeacon 通过 API 测试 pagehide 是否触发了 pagehide 不支持正常的 fetch 请求发送 pagehide 仅支持 sen ...
- infinite scroll blogs
infinite scroll blogs 无限滚动 blogs beacon api https://www.sitepoint.com/introduction-beacon-api/ Histo ...
- 前端监控平台 & 架构
前端监控平台 & 架构 1px 透明的 gif 字节小, 43 bytes 支持跨域, 兼容场景多,零配置 https://en.wikipedia.org/wiki/GIF demo htt ...
- SDK & 埋点 & user behavior tracker
SDK & 埋点 & user behavior tracker 同一个 SDK ,根据不同的应用市场, 分别进行统计分析 ? https://www.umeng.com/ user ...
随机推荐
- TCP 延迟
https://mp.weixin.qq.com/s/fKWJrDNSAZjLsyobolIQKw 直击案发现场!TCP 10倍延迟的真相是? 原创 蛰剑 阿里技术 2019-11-01
- get uuid
https://wx2.qq.com/?&lang=zh_CN /** * 启动二维码登录 */ function doQrcodeLogin() { loginFactory.getUUID ...
- (009)每日SQL学习:Oracle各个键说明(转)
原文地址:http://www.agiledata.org/essays/keys.html 本文概述关系数据库中为表指定主键的策略.主要关注于何时使用自然键或者代理键的问题.有些人会告诉你应该总是使 ...
- python3 安装 #zlib zlibmodule.c -I$(prefix)/include -L$(exec_prefix)/lib -lz RHEL 8 install Python 3 or Python 2 using yum 编译安装 python3.7.4 . OpenSSL 1.0.2 or 1.1. Consequently, OpenSSL 0.9.8 and 1.0
#zlib zlibmodule.c -I$(prefix)/include -L$(exec_prefix)/lib -lz Modules/Setup.dist https://askubuntu ...
- 数据湖-Apache Hudi
Hudi特性 数据湖处理非结构化数据.日志数据.结构化数据 支持较快upsert/delete, 可插入索引 Table Schema 小文件管理Compaction ACID语义保证,多版本保证 并 ...
- tcpdump抓包及tshark解包方法介绍
tshark是wireshark的命令行工具,通过shell命令抓取.解析报文.tcpdump是Linux系统下的抓包工具.wireshark和tcpdump都共同使用 libpcap作为其底层抓包的 ...
- 利用ELK构建一个小型的日志收集平台
利用ELK构建一个小型日志收集平台 伴随着应用以及集群的扩展,查看日志的方式总是不方便,我们希望可以有一个便于我们查询及提醒功能的平台:那么首先需要剖析有几步呢? 格式定义 --> 日志收集 - ...
- GLIBC升级
GLIBC升级 1.安装 1.1 说明 目前大部分架构都已经是GLIBC2.14了,难免会有一些老的机器会是GLIBC2.12,所以下面是我升级GLIBC的过程及步骤. GLIBC是系统核心服务,升级 ...
- Java排序算法(一)冒泡排序
一.测试类SortTest import java.util.Arrays; public class SortTest { private static final int L = 20; pub ...
- mitmproxy使用详解
mitmproxy 相比Charles.fiddler的优点在于,它可以命令行方式或脚本的方式进行mock mitmproxy不仅可以像Charles那样抓包,还可以对请求数据进行二次开发,进入高度二 ...