前端埋点解决方案

news/2024/4/29 9:56:35/文章来源:https://blog.csdn.net/zhu_zhu_xia/article/details/137014339

一、前言:基于神策数据的前端埋点解决方案  JavaScript 快速使用 · 神策分析使用手册[预览版]

二、sdk gitlab下载地址

https://github.com/sensorsdata/sa-sdk-javascript/releases

或者npm 安装

npm i sa-sdk-javascript

三、入门

3.1 接入sdk 以及配置 (version 1.17.2),入口文件接入sdk 以及添加配置

<script>
(function(para) {var p = para.sdk_url, n = para.name, w = window, d = document, s = 'script',x = null,y = null;w['sensorsDataAnalytic201505'] = n;w[n] = w[n] || function(a) {return function() {(w[n]._q = w[n]._q || []).push([a, arguments]);}};var ifs = ['track','quick','register','registerPage','registerOnce','clearAllRegister','trackSignup', 'trackAbtest', 'setProfile','setOnceProfile','appendProfile', 'incrementProfile', 'deleteProfile', 'unsetProfile', 'identify','login','logout','trackLink','clearAllRegister'];for (var i = 0; i < ifs.length; i++) {w[n][ifs[i]] = w[n].call(null, ifs[i]);}if (!w[n]._t) {x = d.createElement(s), y = d.getElementsByTagName(s)[0];x.async = 1;x.src = p;y.parentNode.insertBefore(x, y);w[n].para = para;}
})({sdk_url: 'sensorsdata.min.js',name: 'sensors',//数据接收地址server_url: 'https://report.woodpeckerlog.com/sa?project=production',//控制台是否显示日志show_log: false,send_type: 'beacon',app_js_bridge: true,//url改变触发is_track_single_page: true,heatmap: {//是否开启点击图,默认 default 表示开启,自动采集 $WebClick 事件,可以设置 'not_collect' 表示关闭clickmap:'default',//是否开启触达注意力图,默认 default 表示开启,自动采集 $WebStay 事件,可以设置 'not_collect' 表示关闭scroll_notice_map:'not_collect'}//配置打通 App 与 H5 的参数use_app_track: true,use_client_time: true,});  // 首次触发页面加载事件sensors.quick('autoTrack'); //神策系统必须是1.4最新版及以上
</script>

3.2 npm 使用方式

import sensors from'sa-sdk-javascript';
sensors.init({server_url: '...',heatmap: {//是否开启点击图,默认 default 表示开启,自动采集 $WebClick 事件,可以设置 'not_collect' 表示关闭//需要 JSSDK 版本号大于 1.7clickmap:'default',//是否开启触达注意力图,默认 default 表示开启,自动采集 $WebStay 事件,可以设置 'not_collect' 表示关闭//需要 JSSDK 版本号大于 1.9.1scroll_notice_map:'not_collect'}.......
});
sensors.login(user_id);
sensors.quick('autoTrack');

四、常用api

4.1 公共属性注册

sensors.registerPage({isLogin:xxxxxx
})

4.2 自定义事件使用

sensors.track('自定义事件名称', {params1: xxx,params2: xxx,
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1028088.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

后端常问面经之计算机网络

一台机器理论上能创建多少条TCP连接&#xff1f; Linux每维护一条TCP连接都要花费内存资源的&#xff0c;每一条静止状态&#xff08;不发送数据和不接收数据&#xff09;的 TCP 连接大约需要吃 3.44K 的内存&#xff0c;那么 8 GB 物理内存的服务器&#xff0c;最大能支持的 …

微服务day07 -- 搜索引擎 ( 数据聚合 + 自动补全 + 数据同步 + ES集群 )

1.数据聚合 聚合&#xff08;aggregations&#xff09;可以让我们极其方便的实现对数据的统计、分析、运算。例如&#xff1a; 什么品牌的手机最受欢迎&#xff1f; 这些手机的平均价格、最高价格、最低价格&#xff1f; 这些手机每月的销售情况如何&#xff1f; 实现这些…

R语言基础入门

1.保存或加载工作空间 改变工作目录——进行文件读写&#xff0c;默认去指定文件进行操作。&#xff08;使用R时&#xff0c;最好先设定工作目录&#xff08;setwd(),getwd()&#xff09;&#xff09; setwd(“工作文件路径”)&#xff1a;建立工作目录 getwd&#xff08;&…

OpenGL 实现“人像背景虚化“效果

手机上的人像模式,也被人们称作“背景虚化”或 ”双摄虚化“ 模式,也称为 Bokeh 模式,能够在保持画面中指定的人或物体清晰的同时,将其他的背景模糊掉。突出画面的主体部分,主观上美感更强烈。 人像模式的一般实现原理是,利用双摄系统获取景深信息,并通过深度传感器和图…

C语言与sqlite3入门

c语言与sqlite3入门 1 sqlite3数据类型2 sqlite3指令3 sqlite3的sql语法3.1 创建表create3.2 删除表drop3.3 插入数据insert into3.4 查询select from3.5 where子句3.6 修改数据update3.7 删除数据delete3.8 排序Order By3.9 分组GROUP BY3.10 约束 4 c语言执行sqlite34.1 下载…

计算机毕业设计Hadoop+Spark+Hive租房推荐系统 贝壳租房数据分析 租房爬虫 租房可视化 租房大数据 大数据毕业设计 大数据毕设 机器学习

毕业技术方向调查表 姓名&#xff1a; 李昌福 课题方向 房无忧房屋租赁平台 开发语言&#xff1a; Java 前端框架&#xff1a; VUE 数据库&#xff1a; MySQL 服务器端 框架&#xff1a; SpringCloud 其他技术&#xff1a; Hadoop、HDFS 方向…

HTML网站的概念

目录 前言&#xff1a; 1.什么是网页&#xff1a; 2.什么是网站&#xff1a; 示例&#xff1a; 3.服务器&#xff1a; 总结&#xff1a; 前言&#xff1a; HTML也称Hyper Text Markup Language&#xff0c;意思是超文本标记语言&#xff0c;同时HTML也是前端的基础&…

二叉树初阶数据结构C

文章目录 一、树的概念及结构&#xff1f;1.树的概念2.树的相关概念3.树的表示4.树在实际生活的应用&#xff08;表示文件系统的目录树结构&#xff09; 二、二叉树的概念及结构1.概念2.特殊的二叉树3.二叉树的性质4.二叉树的存储结构 三、二叉树链式结构的实现(顺序结构之前讲…

maven 依赖机制

安全工程师为啥关注maven依赖 log 4j事件之后&#xff0c;大家开始更加关注开源组件安全漏洞这个事。纷纷引入SCA 软件成分分析工具来识别项目中存在的开源组件和漏洞。 在sca工具扫描之后&#xff0c;会报出一大堆组件&#xff0c;review这个事就是安全团队投入时间来研判了…

解锁未知领域:探索Web3技术的无限可能性

随着数字化时代的持续发展&#xff0c;Web3技术作为下一代互联网的重要组成部分&#xff0c;正呈现出无限的创新可能性。本文将深入探索Web3技术所带来的无限可能性&#xff0c;揭示其在各个领域的应用前景和潜力。 1. 区块链技术的革命性 Web3的核心是区块链技术&#xff0c;…

C++商品库存管理系统

第一章 需求分析 1.1程序设计任务 1.1.1总体要求 运用面向对象程序设计知识&#xff0c;利用C语言设计和实现一个“库存管理系统设计”&#xff0c;主要完成对商品的销售、统计和简单管理。在实现过程中&#xff0c;需利用面向对象程序设计理论的基础知识&#xff0c;充分体现…

Webpack常见插件和模式

目录 目录 目录认识 PluginCleanWebpackPluginHtmlWebpackPlugin自定义模版 DefinePlugin的介绍 ( 持续更新 )Mode 配置 认识 Plugin Loader是用于特定的模块类型进行转换&#xff1b; Plugin可以用于执行更加广泛的任务&#xff0c;比如打包优化、资源管理、环境变量注入等 …

【zlm】问题记录:chrome更新引起的拉不出webrtc; 证书校验引起的放几秒中断

目录 chrome更新引起的拉不出webrtc 证书校验引起的放几秒中断 chrome更新引起的拉不出webrtc 【zlm】最新的chrome版本中的报错&#xff1a; 我有个问题event.js:8 [RTCPusherPlayer] DOMException: Failed to execute setRemoteDescription on RTCPeerConnection: Failed …

Java前端控制器模式

文章目录 以下是Java前端控制器模式的主要组成部分和工作原理&#xff1a;组件与角色&#xff1a;工作流程&#xff1a;应用场景与优势&#xff1a; Java Web应用程序示例 Java前端控制器模式是一种软件设计模式&#xff0c;它在构建基于Java的Web应用程序时特别有用&#xff0…

如何使用 ArcGIS Pro 制作三维建筑

三维地图已经逐渐成为未来地图的趋势&#xff0c;对于大范围应用&#xff0c;只需要普通的建筑体块就行&#xff0c;如果有高程数据&#xff0c;还可以结合地形进行显示&#xff0c;这里为大家介绍一下 ArcGIS Pro 制作三维建筑的方法&#xff0c;希望能对你有所帮助。 数据来…

使用seldom编写http接口用例

在编写接口用例的过程中&#xff0c;针对一个接口&#xff0c;往往只是参数不同&#xff0c;那么参数化就非常有必要了。 seldom 中参数化的用法非常灵活&#xff0c;这里仅介绍file_data() 的N种玩法。 二维列表 当参数比较简单时可以试试下面的方式。 参数化数据 {"…

老阳推荐的视频号项目是真的吗?能赚钱吗?

在当下数字化、信息化的社会背景下&#xff0c;视频号项目如雨后春笋般涌现&#xff0c;成为许多人关注的焦点。特别是在一些知名人士&#xff0c;如老阳的推荐下&#xff0c;这些项目更是受到了广泛的关注和讨论。那么&#xff0c;老阳推荐的视频号项目是否真实存在?它能否真…

uni-app(使用阿里图标)

1.注册阿里矢量图标库 注册阿里图标库账号并登录&#xff0c;https://www.iconfont.cn/ 2.加入购物车 搜索适合自己的图标&#xff0c;加入购物车&#xff0c;如下图&#xff1a; 3.加入项目 我的->资源管理->我的项目->创建项目&#xff0c;然后返回购物车&#…

cesium vue 绘制标记实体(撒点),监听鼠标左击事件

添加实体 const viewer new Cesium.Viewer(cesiumContainer, {})viewer.entities.add()查看实体 const viewer new Cesium.Viewer(cesiumContainer, {}) const billboard viewer.entities.add({...})viewer.zoomTo(billboard)删除实体 根据实体删除 if (billboard.value…

快速上手Spring Cloud 六:容器化与微服务化

快速上手Spring Cloud 一&#xff1a;Spring Cloud 简介 快速上手Spring Cloud 二&#xff1a;核心组件解析 快速上手Spring Cloud 三&#xff1a;API网关深入探索与实战应用 快速上手Spring Cloud 四&#xff1a;微服务治理与安全 快速上手Spring Cloud 五&#xff1a;Spring …