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

GrowingIO埋点（前端）

news 2025/7/21 4:20:57

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: '无'})