当前位置： 首页 > news >正文

GrowingIO埋点（前端）

news 2026/5/18 11:04:09

GrowingIO埋点（前端）

一、CDN集成SDK

1、初始化

​ 当用户加载页面的时候，会异步加载 WebJS SDK，不会影响到用户的加载速度，所以一般建议把这段代码加入到 <head></head> 中的最下面，这样能最大限度的保证数据采集的完整性。如果有限制只能加入到 <body></body> 的最下面，也是可以的，但这样潜在可能会丢失掉那些一加载页面就立刻关闭的数据。

官方文档

<script type='text/javascript'>// 配置项 JSON对象const options = {host: 'your host', // 初始化时填写，否则初始化失败hashtag: true/false, // 单页面应用埋点appVer:'Android/ios/微信内嵌', // 设置H5页面所在运行环境compress: true/false, // 获取的数据是否压缩debug: true  // 打开debug调试能力
}!(function (e, n, t, s, c) {var o;e[s] =e[s] ||function () {(e[s].q = e[s].q || []).push(arguments);};(c = c || 'vds'),(e._gio_local_vds = c),(e[c] = null !== (o = e[c]) && void 0 !== o ? o : {}),(e[c].namespace = s);var d = n.createElement('script');var i = n.getElementsByTagName('script')[0];(d.async = !0), (d.src = t), i.parentNode.insertBefore(d, i);})(window, document, 'https://assets.giocdn.com/sdk/webjs/gdp-full.js', 'gio');gio('init', 'your projectId', 'your dataSourceId',options);gio('send');
</script>
<!-- 如果在内网环境下开发，建议将gio.js文件下载到本地，以相对路径方式引入 否则可能会初始化不成功 -->

**注意：**您创建Web应用所在项目的项目ID（在growingio平台建立相对应项目后生成并提供给前端埋点使用） 替换代码中的 your projectId （项目id）、your dataSourceId（数据源id）、your host（发数请求host）。

2、页面使用
gio('setUserId',userId)
// userId（字符串） 登录系统用户的ID 设置用户ID
gio('clearUserId')
// 退出登录时清除用户ID
gio('track',eventId,eventLevelVariables) // 此方法多数时在页面点击事件时进行调用，以用来统计用户点击次数
// evenId 事件标识符 （字符串）
/* eventLevelVariables 包含事件级变量的JSON对象 例如　{pageName：'登录页面'，// 按钮所在页面buttonName: '登录' // 用户点击的按钮名称}
*/

页面控制台出现下面情况，说明成功了。

在这里插入图片描述

二、npm集成SDK

1、初始化

官方文档

1.1、安装命令：
npm i gio-webjs-sdk --save
1.2、在入口文件初始化使用 SDK（例如：app.js、index.js）
import gio from 'gio-webjs-sdk/gdp-full'gio('init', 'your accountId', 'your dataSourceId', {// OP私有部署客户请填写serverUrl，Saas客户请忽略// https://www.com （和对应查看数据网址一致）serverUrl: 'your server url',...other settingsdebug: true
})window.gio = gio
2、页面使用

埋点事件(track)

gio('track', eventName: string, attributes?: Object, callback?: function);

详情

gio('track', 'chery_dealerportal_tabMainPageView', 	 {chery_dealerportal_menuFirstName_var: '工作台'chery_dealerportal_pageName_var: '工作台',chery_dealerportal_pageSubName_var: '无'})

成功后可在系统找到

在这里插入图片描述

相关文章：

GrowingIO埋点（前端）

GrowingIO埋点&#xff08;前端&#xff09; 一、CDN集成SDK 1、初始化 ​ 当用户加载页面的时候&#xff0c;会异步加载 WebJS SDK&#xff0c;不会影响到用户的加载速度&#xff0c;所以一般建议把这段代码加入到 <head></head> 中的最下面&#xff0c;这样能…...

编程日记 2024/10/22 15:27:16

MySQL-15.DQL-排序查询

一.DQL-排序查询 -- 排序查询 -- 1.根据入职时间&#xff0c;对员工进行升序排序 select * from tb_emp order by entrydate asc ;-- 2.根据入职时间&#xff0c;对员工进行降序排序 select * from tb_emp order by entrydate desc ;-- 3.根据 入职时间 对公司员工进行 升序排序…...

编程日记 2024/10/22 15:26:15

SpringBoot中大量数据导出方案：使用EasyExcel并行导出多个excel文件并压缩zip后下载

文章目录 前言一、控制器层代码二、服务层代码三、代码亮点分析 前言 SpringBoot的同步excel导出方式中&#xff0c;服务会阻塞直到Excel文件生成完毕&#xff0c;如果导出数据很多时&#xff0c;效率低体验差。有效的方案是将导出数据拆分后利用CompletableFuture&#xff0c;…...

编程日记 2024/10/22 15:25:12

黑马软件测试第一篇_数据库

说明: 数据库是专门用来存储数据的软件 注意: 对于测试工作而言, 如果项目页面没有实现, 但是我们又想要校验数据,则可以直接通过查询数据库实现 关系: 具体存在的商品录入后 -> 产生对应的数据(存到数据库中) -> 最后会被加载到项目页面中 数据库的分类 分类: 1> 关…...

编程日记 2024/10/22 15:19:04

第十六届蓝桥杯嵌入式组准备

最近我看很多人都在准备蓝桥杯的比赛了&#xff0c;这里我给大家整理一下历届真题或模拟题的讲解与源码 蓝桥杯嵌入式第十二届省赛真题二 蓝桥杯嵌入式第十三届省赛真题一 蓝桥杯嵌入式第十三届省赛真题二 蓝桥杯嵌入式第十四届省赛真题 蓝桥杯嵌入式第十四届模拟考试一 蓝…...

编程日记 2024/10/22 15:18:03

城乡供水信息化系统如何建设？

城乡供水信息化建设是一个综合性的过程&#xff0c;旨在通过现代信息技术提升农村供水系统的管理效率和服务质量。这一过程包含以下关键内容&#xff1a; 一、信息化基础设施建设 感知层建设&#xff1a;在农村饮水工程的关键部位&#xff0c;如水源地、水厂、供水管网等&#…...

编程日记 2024/10/22 15:13:59

【Petri网导论学习笔记】Petri网导论入门学习（七） —— 1.5 并发与冲突

导航 1.5 并发与冲突1.5.1 并发定义 1.14定义 1.15 1.5.2 冲突定义 1.17 1.5.3 一般Petri网系统中的并发与冲突定义 1.18一般网系统中无冲撞概念阻塞&#xff08;有容量函数K的P/T系统&#xff0c;类似于冲撞&#xff09;一般Petri网中并发与冲突共存情况 1.5 并发与冲突 Petr…...

编程日记 2024/10/22 15:12:57

MongoDB常用语句

1.只统计记录总数&#xff1a; let result await CorrectionRecordModel.countDocuments(db);2.数组遍历&#xff0c;循环体中可以有调用异步函数&#xff1a; for(let item of result2){if(item && Tool.checkNotEmptString(item.auth_id) && (item.status …...

编程日记 2024/10/22 15:10:54

自动创作PPT 利用提示词和大模型自动创建ppt

背景 ppt创作可以分为3个步骤&#xff1a;1.大纲撰写&#xff1b;2.内容填充&#xff1b;3.ppt实现。我前几天用十分钟的时间做了一个ppt&#xff0c;主讲大模型测评。这里给大家分享一下我的创作过程。 关于步骤1和步骤2&#xff0c;最近发现一个非常好的提示词&#xff0c;…...

编程日记 2024/10/22 15:09:53

二分类评价指标AUROC和AUPR

文章目录 一、AUROC&#xff08;Area Under the Receiver Operating Characteristic Curve&#xff09;二、AUPR&#xff08;Area Under the Precision-Recall Curve&#xff09;三、区别3.1 案例3.2 如何选择&#xff1f; 在分类任务中&#xff0c; AUROC&#xff08;受试者工…...

编程日记 2024/10/22 15:07:50

雅迪控股营收、净利润和毛利下滑：销量大幅减少，屡屡抽查不合格

《港湾商业观察》廖紫雯 日前&#xff0c;雅迪集团控股有限公司&#xff08;以下简称&#xff1a;雅迪控股&#xff0c;01585.HK&#xff09;发布业绩报告&#xff0c;披露2024年上半年营收净利双下滑等情况&#xff0c;在业绩承压的情况下&#xff0c;雅迪控股遭多家券商下调…...

编程日记 2024/10/22 15:04:47

【网络安全】记一次漏洞挖掘

Spring Cloud Data Flow 热点漏洞详细分析 环境搭建 2.10.0 - 2.11.2版本都可以&#xff0c;这里下的2.11.2 源码下载https://github.com/spring-cloud/spring-cloud-dataflow/tree/v2.11.2 在src/docker-compose里面是有docker文件的&#xff0c;使用docker即可 最近是爆出…...

编程日记 2024/10/22 15:00:44

Redis遇到Hash冲突怎么办？

这是小伙伴之前遇到的一个面试题&#xff0c;感觉也是一个经典八股&#xff0c;和大伙分享下。 一 什么是 Hash 冲突 Hash 冲突&#xff0c;也称为 Hash 碰撞&#xff0c;是指不同的关键字通过 Hash 函数计算得到了相同的 Hash 地址。 Hash 冲突在 Hash 表中是不可避免的&am…...

编程日记 2024/10/22 14:59:42

React综合指南(四)

61、描述React事件处理。 为了解决跨浏览器兼容性问题&#xff0c;React中的事件处理程序将传递SyntheticEvent实例&#xff0c;该实例是React跨浏览器本机事件的跨浏览器包装器。这些综合事件具有与您惯用的本机事件相同的界面&#xff0c;除了它们在所有浏览器中的工作方式相…...

编程日记 2024/10/22 14:57:38

Spring集成Redisson及存取几种基本类型数据

目录 一.什么是Redisson 二.为什么要使用Redisson 三.Spring集成Redisson 1.添加依赖 2.添加配置信息 3.添加redisson配置类 四.Redisson存取各种类型数据 1.字符串(String类型) 存储 获取 2.object对象类型 1.实体类信息 2.存储 3.获取 3.List集合类型 第一种…...

编程日记 2024/10/22 14:56:37

Maplibre-gl\Mapbox-gl改造支持对矢量瓦片加密

Maplibre-gl是Mapbox-gl剔除自带地图服务之后的一个分支，代码很相似。Maplibre-gl\Mapbox-gl使用的pbf格式的矢量瓦片，数据量小，渲染效果好。但也存在着信息泄露的风险。但如果想使用这个开发框架的前端渲染效果，还必须要使用这个格式。最近研究了一下如何对矢量瓦片进行加…...

编程日记 2024/10/22 14:55:35

【功能安全】技术安全概念TSC

目录 01 TSC定义 02 TSC注意事项 03 TSC案例 📖 推荐阅读 01 TSC定义 所处位置 TSC：Technical safety concept技术安全概念 TSR：Technical safety requirement技术安全需求 在系统开发阶段属于安全活动4-6 系统层产品开发示例 TSC目的...

编程日记 2024/10/22 14:54:34

Spark数据源的读取与写入、自定义函数

1. 数据源的读取与写入 1.1 数据读取 读文件 read.jsonread.csv csv文件由两个部分组成&#xff1a;头部数据&#xff08;也就是字段数据&#xff09;、行数据。 read.orc 读数据库 read.jdbc(jdbc连接地址,table‘表名’,properties{‘user’用户名,‘password’密码,‘driv…...

编程日记 2024/10/22 14:53:33

LeetCode 每日一题 2024/10/14-2024/10/20

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 10/14 887. 鸡蛋掉落10/15 3200. 三角形的最大高度10/16 3194. 最小元素和最大元素的最小平均值10/17 3193. 统计逆序对的数目10/18 3191. 使二进制数组全部等于 1 的最少操…...

编程日记 2024/10/22 14:49:28

接口测试（六）jmeter——参数化（配置元件 --＞ 用户定义的变量）

一、jmeter——参数化&#xff08;配置元件 --> 用户定义的变量&#xff09; 注&#xff1a;示例仅供参考 1. 参数化格式&#xff1a;${变量名} 2. 配置元件&#xff1a;用户定义的变量 3. 添加【用户定义的变量】&#xff0c;【线程组】–>【添加】–>【配置元件】–…...

编程日记 2024/10/22 14:47:25

CentOS8实战：ZeroTier构建安全异地虚拟局域网

1. 为什么选择ZeroTier替代传统内网穿透方案 最近在帮朋友搭建远程办公环境时&#xff0c;遇到了一个典型问题&#xff1a;分布在三个不同物理位置的服务器需要像在同一个办公室内网那样互相访问。最初考虑使用FRP方案&#xff0c;但实测下来发现几个痛点&#xff1a;首先是带宽…...

编程新知 2026/5/17 10:50:59

3分钟掌握：163MusicLyrics终极免费歌词解决方案全攻略

3分钟掌握&#xff1a;163MusicLyrics终极免费歌词解决方案全攻略 【免费下载链接】163MusicLyrics 云音乐歌词获取处理工具【网易云、QQ音乐】 项目地址: https://gitcode.com/GitHub_Trending/16/163MusicLyrics 想要快速获取网易云音乐和QQ音乐的歌词吗&#xff1f;1…...

编程新知 2026/5/18 10:40:04

多模态AI应用开发实战：GPT与图像生成的集成架构与优化

1. 项目概述与核心价值最近在折腾AI图像生成和智能对话的整合应用时&#xff0c;发现了一个挺有意思的仓库&#xff1a;bubblesslayyer-cmd/Awesome-GPT-Image-2-OpenAi。这个项目名字乍一看有点长&#xff0c;但拆解一下就能明白它的核心——“Awesome”系列通常代表精选资源集…...

编程新知 2026/5/17 10:35:00

mnestra：基于ESBuild的极简前端构建工具，速度与体验的完美平衡

1. 项目概述&#xff1a;一个被低估的现代前端构建工具如果你在前端开发领域摸爬滚打超过五年&#xff0c;大概率经历过从 Grunt、Gulp 到 Webpack 的构建工具变迁史。每次工具的迭代&#xff0c;都伴随着配置文件的日益复杂和构建速度的微妙下降。当 Vite 携 ES Module 原生支…...

编程新知 2026/5/17 9:51:06

快速免费解锁网易云音乐NCM格式：ncmdumpGUI完整使用指南

快速免费解锁网易云音乐NCM格式&#xff1a;ncmdumpGUI完整使用指南 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换&#xff0c;Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 你是否曾在网易云音乐下载了心爱的歌曲&am…...

编程新知 2026/5/18 10:48:40

LangGraph 并发执行不是开 Goroutine 那么简单：状态竞争与事务处理

LangGraph 并发执行不是开 Goroutine 那么简单：状态竞争与事务处理深度解析 元数据 关键词：LangGraph, 大语言模型工作流, 有状态并发, 状态一致性, 事务处理, 多Agent系统, 分布式状态管理 摘要：很多开发者初次接触LangGraph的并发特性时，会下意识将其等同于传统协程/线程…...

编程新知 2026/5/17 9:16:36

Linuxbonding链路稳定性治理方法

Linuxbonding链路稳定性治理方法这是一篇面向中级 Linux 使用者的技术文章&#xff0c;主题聚焦在bonding链路&#xff0c;重点讨论链路聚合、冗余切换和接口状态。在真实生产环境中&#xff0c;bonding链路相关问题往往不会以单一错误形式出现&#xff0c;而是混杂在日志、权限…...

编程新知 2026/5/18 10:56:35

Qdrant客户端库实战：从向量数据库连接到生产级应用开发

1. 项目概述&#xff1a;从向量数据库到应用落地的桥梁如果你最近在折腾大模型应用&#xff0c;或者想给自己的产品加上一个“智能大脑”&#xff0c;那你大概率绕不开一个词&#xff1a;向量数据库。简单来说&#xff0c;它就像一个能理解“意思”的超级搜索引擎&#xff0c;不…...

编程新知 2026/5/18 9:45:49

别再只盯着CSI-2了！用示波器实测MIPI D-PHY波形，手把手教你排查Camera不通的硬件问题

别再只盯着CSI-2了&#xff01;用示波器实测MIPI D-PHY波形&#xff0c;手把手教你排查Camera不通的硬件问题 调试Camera模块时&#xff0c;MIPI信号问题往往是硬件工程师最头疼的挑战之一。当系统出现图像异常、花屏或无法识别时&#xff0c;大多数工程师的第一反应是检查CSI-…...

编程新知 2026/5/17 7:33:52

KMS智能激活终极指南：如何一键永久激活Windows和Office

KMS智能激活终极指南&#xff1a;如何一键永久激活Windows和Office 【免费下载链接】KMS_VL_ALL_AIO Smart Activation Script 项目地址: https://gitcode.com/gh_mirrors/km/KMS_VL_ALL_AIO 还在为Windows系统激活烦恼吗&#xff1f;每次重装系统后都要重新激活Office&…...

编程新知 2026/5/17 4:58:15