GrowingIO埋点（前端）

MoXinXueWEB

已于 2024-10-22 19:11:46 修改

阅读量1.3k

点赞数 10

CC 4.0 BY-SA版权

分类专栏：功能文章标签：前端

于 2024-10-22 14:07:36 首次发布

本文链接：https://blog.csdn.net/MoXinXueWEB/article/details/143156607

功能专栏收录该内容

15 篇文章

订阅专栏

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 （采集host地址）
  serverUrl: 'your server url',
  ...other settings
  debug: 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: '无'
  })