帮助文档(2019)
进入GrowingIO平台
  • What's new
  • 文档使用指南
  • 产品简介
    • 产品概述
    • 数据模型
      • 用户模型
        • 访问用户
        • 登录用户
        • 用户属性
      • 事件模型
        • 什么是事件
        • 无埋点事件
          • 概述
          • 访问事件及变量
          • 页面事件及变量
          • 动作事件及变量
        • 埋点事件
      • 统计模型
        • 指标-事件的度量
        • 维度-事件的属性
        • 预定义指标
        • 预定义维度
    • 数据定义
      • 用户变量
        • 登录用户变量
        • 访问用户变量
      • 页面级变量
      • 埋点事件及变量
        • 埋点事件和事件级变量
        • 转化变量
    • 数据安全
    • 产品界面熟悉
    • 角色权限说明
  • 开发者文档
    • SDK集成
      • SDK简介
      • SDK使用流程
      • Web JS SDK
        • 概述
        • 集成最新SDK
        • Web JS SDK升级指导
        • Web JS SDK API
          • API 2.x
          • API 1.x
        • Web半自动采集浏览事件
        • 常见问题
          • 为什么我们的网站要允许iframe加载?
          • 为什么我的网站不能复写 window 对象?
          • 页面内部嵌入的 iframe 元素如何加载 SDK?
          • 同时集成了web sdk和hybrid sdk会怎么处理?
          • 同时集成了web sdk 1.x 和web sdk 2.x会怎么处理?
          • 元素没有元素浏览量怎么处理?
          • 对于 display:none 的元素,其子元素中的a/button只会采集一次浏览量,但是想每次曝光都采集一次浏览量怎么处理?
          • 设置了growing-ignore之后,其子元素也都不采集数据了怎么处理?
        • Web JS SDK更新日志
      • 原生Android SDK
        • 无埋点 SDK集成
        • 埋点 SDK 集成
        • Android SDK API
          • Gradle配置API
          • 初始化配置项API
          • 运行时API
          • 自定义数据上传API
        • Android半自动采集浏览事件
        • 1.x Android SDK 升级指导
        • 常见问题
          • 无埋点数据采集问题
          • 无埋点下埋点API使用问题
          • SDK性能问题
          • 圈选问题
          • Gradle 常见问题
          • App内嵌H5页面常见问题
        • 更新日志
      • 原生iOS SDK
        • 无埋点 SDK集成
        • 埋点 SDK集成
        • iOS SDK API
          • 初始化配置项API
          • 埋点SDK支持的其他接口
          • 动态添加属性说明
          • 自定义数据上传API
        • iOS半自动采集浏览事件
        • iOS SDK升级指导
        • 常见问题
        • 更新日志
      • 移动端第三方框架SDK
        • React Native无埋点SDK
        • React Native埋点SDK
        • Flutter埋点SDK
        • Cordova埋点SDK
        • Weex埋点SDK
        • API Cloud埋点SDK
        • AppCan埋点SDK
      • Hybrid JS SDK
      • 小程序、小游戏、内嵌页SDK
        • 更新日志
        • 微信小程序 SDK
        • 微信小游戏SDK
        • 支付宝小程序SDK
        • 百度小程序SDK
        • H5内嵌页SDK
        • QQ小程序SDK
        • 字节跳动小程序SDK
        • 快应用SDK
        • 自定义数据上传API
      • 服务端埋点SDK
        • Java埋点SDK
        • PHP埋点SDK
        • 常见问题
    • SDK调试
      • 概述
      • Web Debugger
      • Mobile Debugger
      • 小程序&内嵌页Debugger
      • 验证埋点事件
        • 概述
        • cstm(事件以及关联的事件级变量)事件
        • pvar(页面级变量)事件
        • evar(转化变量)事件
        • ppl(用户变量)事件
    • API参考
      • 公共请求参数
      • 原始数据导出API V2
        • 概述
        • 事件表字段说明
          • 事件表关联
          • 无埋点事件字段
          • 埋点事件与变量字段
          • 广告相关字段
        • 接口定义
          • 获取不同类型原始数据下载链接
          • 获取全部事件类型原始数据的下载链接
        • 升级说明
        • 导出数据处理建议
      • 原始数据导出API V1
        • 概述
        • 字段说明
          • 事件类型
          • 无埋点事件字段
          • 埋点事件与变量字段
          • 广告相关字段
        • 接口定义
          • 获取原始数据下载链接
          • 来源管理数据导出
        • 导出数据处理建议
      • 统计数据导出API V3
        • V3接口概述
        • 接口定义
          • 获取事件分析数据
          • 获取漏斗分析数据
          • 获取留存分析数据
          • 获取用户分群的下载链接
      • 统计数据导出API
        • 概述
        • 接口定义
          • 获取看板列表
          • 获取看板中的图表信息
          • 获取事件分析数据
          • 获取漏斗分析数据
          • 获取留存分析数据
          • 获取分群列表
          • 获取特定分群的用户列表
          • 获取圈选元素定义
      • 广告监测链接创建API
        • 概述
        • 接口定义
          • 查询应用ID
          • 新建推广活动
          • 查询推广活动ID
          • 新建推广渠道
          • 查询推广渠道ID
          • 新建监测链接(吸引用户直接打开App)
          • 查询监测链接(吸引用户直接打开App)
          • 新建监测链接(增加APP下载量-同时推广iOS和Android)
          • 查询监测链接(增加APP下载量-同时推广iOS和Android)
          • 新建监测链接(增加App下载量-推广iOS或Android单个平台)
          • 查询监测链接(增加App下载量-推广iOS或Android单个平台)
          • 新建监测链接(推广网页)
          • 查询监测链接(推广网页)
      • 微信小程序码&小程序监测链接创建服务API
      • 埋点数据上传API
      • 登录用户变量上传API
        • 登录用户变量上传
        • 维度分类上传
        • 既有登录用户ID上传
        • (旧)接口定义
          • 用户变量上传
          • 维度分类上传
      • 项目管理API
        • 概述
        • 从项目内移除成员
        • 获取埋点事件列表
        • 创建埋点事件
        • 获取事件级变量
        • 创建事件级变量
        • 获取页面级变量
        • 创建页面级变量
        • 获取登录用户变量
        • 创建登录用户变量
        • 获取埋点数量限额
      • 数据管理API(GDPR)
        • 数据保护
        • 删除原始数据
  • 产品使用文档
    • 看板
      • 看板简介
      • 看板管理
      • 自定义首页
      • 预置看板介绍
        • 概览看板
        • 实时监控看板
        • 小程序预置看板
        • 微信内嵌页预置看板
        • 业务场景预置看板
      • KPI看板(企业版)
    • 产品分析
      • 事件分析
        • 什么是事件分析
        • 创建事件分析
        • 视图介绍
      • 漏斗分析
        • 什么是漏斗分析
        • 创建漏斗分析
        • 漏斗分析结果解读
        • 案例解读
      • 留存分析
        • 什么是留存分析
        • 创建留存分析
        • 留存分析结果解读
        • 视图介绍
        • 应用场景
        • 常见问题
      • 分布分析
        • 什么是分布分析
        • 使用场景
        • 创建分布分析
      • 热图分析
        • 什么是热图分析
        • Web端热图
        • App热图
      • 分析实验室-留存魔法师
      • 分析实验室-智能路径
    • 用户分析
      • 用户分群
        • 什么是用户分群
        • 创建用户分群
        • 查看分群详情页
        • 分群的计算和使用
        • 常见问题
      • 用户细查
        • 什么是用户细查
        • 细查用户
        • 应用场景
        • 常见问题
      • 活跃用户分析
        • 什么是活跃用户分析
        • 分析活跃用户
      • 微信应用用户分析
    • 用户运营
    • 获客分析
      • 广告监测
        • 创建监测链接
          • 推广App
          • 推广网页
          • 推广小程序(微信)
          • 推广链接的投放和设置指南
        • 数据报表
          • 应用级数据
          • 深度数据分析
          • 数据指标说明
        • 推广管理
          • 监测链接管理
          • 广告活动管理
          • 推广渠道管理
        • 高级设置
          • 日志导出
          • 维度配置
          • 权限配置
          • 反作弊规则
          • 深度链接配置
        • 相关知识
          • UTM参数使用指南
          • 移动端转化归因
          • 默认的渠道来源跟踪
          • DeepLink启用新域名
        • 常见问题
        • 渠道配置指南
          • 腾讯社交广告
          • 今日头条
          • 百度原生信息流
          • 微博超级粉丝通
          • 爱奇艺
          • InMobi
          • 微信广告平台
          • 凤羽广告平台
          • bilibili(B站)
      • 活动分析
      • 落地页分析
      • 分享分析
      • 小程序码管理
    • 看数助手
    • 数据中心
      • 数据管理
        • 事件管理
          • 无埋点事件管理
          • 埋点事件管理
        • 变量管理
          • 事件变量
          • 用户变量
          • 转化变量
        • 自定义指标管理
          • 合并事件
          • 计算指标
        • 业务标签管理
      • 数据规划
      • 无埋点事件定义(圈选)
        • 概述
        • Web端数据定义(Web圈选)
        • App端数据定义(Web圈选)
        • App端数据定义(App圈选)
        • 小程序数据定义
        • 微信内嵌页数据定义
      • 数据校验
      • 微信公众号数据集成
    • 系统管理
      • 组织管理
        • 组织架构介绍
        • 组织概览
        • 组织下项目管理
        • 组织下成员管理
        • 计费方案
        • 成员使用看板
      • 项目管理
        • 项目概览
        • 项目下应用管理
        • 项目下成员管理
        • IP及域名数据过滤
        • 爬虫预防
        • UTM映射管理
        • API Token管理
        • 获取项目UID
      • 权限管理
        • 角色权限
        • 资源权限
        • 数据权限
        • 典型应用场景
      • 工单管理
        • 提交工单
        • 查看进度
        • 邀请技术支持
      • 个人中心
        • 学习中心
        • 个人信息
        • 安全设置
    • 常见问题
      • 基本问题
      • SDK集成
      • 圈选问题
      • 指标和维度
      • 数据安全
      • 产品使用
      • 数据统计差异
      • 无效指标清理说明
  • 术语解释
Powered by GitBook
On this page
  • 准备条件
  • 1. 添加跟踪代码
  • 2. 配置系统变量
  • 1. hashtag系统变量
  • 3. 高级设置
  • 1. 设置采集容器(data-growing-container)
  • 2. 设置采集文本信息(data-growing-title)
  • 3. 设置采集位置信息(data-growing-idx)
  • 4. 设置数据采集黑名单(data-growing-ignore)
  • 5. 开启输入文本框内容采集(data-growing-track)
  • 4. 自定义数据上传
  • 5. 创建应用
  • 6. 验证SDK是否正常采集数据

Was this helpful?

  1. 开发者文档
  2. SDK集成
  3. Web JS SDK

集成最新SDK

Previous概述NextWeb JS SDK升级指导

Last updated 4 years ago

Was this helpful?

准备条件

获取项目ID,获取方法请参考"项目管理 > 项目概览 > "。

1. 添加跟踪代码

请将以下的页面代码放置到需要分析的页面中的 <head> 和 </head> 标签之间,即可完成最新 Web JS SDK 页面代码的添加。

请注意使用 您创建Web应用所在项目的项目ID 替换代码中的 your projectId 。

<!-- GrowingIO Analytics code version 2.1 -->
<!-- Copyright 2015-2020 GrowingIO, Inc. More info available at http://www.growingio.com -->
<script type='text/javascript'>
!function(e,t,n,g,i){e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},n=t.createElement("script"),tag=t.getElementsByTagName("script")[0],n.async=1,n.src=('https:'==document.location.protocol?'https://':'http://')+g,tag.parentNode.insertBefore(n,tag)}(window,document,"script","assets.giocdn.com/2.1/gio.js","gio");
  gio('init', 'your projectId', {});
  ​
  //custom page code begin here
​​
  //custom page code end here
​
  gio('send');
  
</script>
<!-- End GrowingIO Analytics code version: 2.1 -->

2. 配置系统变量

设置系统变量的代码请插入上述追踪代码的 custom page code 部分,在 init 和 send 中间。

1. hashtag系统变量

GrowingIO默认不会把 hashtag 识别成页面 URL 的一部分。对于使用 hashtag 进行页面跳转的单页面网站应用来说,可以启用 hashtag 作为标识页面的一部分:

gio('config', {'hashtag':true}); //放在init和send之间

以此监听 hashtag 的变化,并采集不同页面的数据。每次 hashtag 的改变都会触发一次PV,hashtag 的信息也会记录在页面URL中。

3. 高级设置

高级设置可以帮助你更自如地进行圈选操作,请将高级设置插入你Web应用的HTML代码中。

1. 设置采集容器(data-growing-container)

GrowingIO默认视button或a标签为可圈选容器。同时,默认可以圈选页面dom上所有叶子结点和叶子结点的上一级父节点。

当您想以button和a标签以外的标签作为容器进行圈选时您可以为期望圈选的容器标签添加data-growing-container 属性,圈选时即可圈到这个容器。容器内子标签的点击都会汇总到容器中。

代码示例:

div作为容器标签时,以id=1的div作为容器进行圈选的代码示例:

<div id="1" data-growing-container>
  <div id="2">
    <h1 id="3">商品名称</h1>
  </div>
  <div id="4">
    <div id="5">商品图片</div>
  </div>
  <div id="6">
    <div id="7">商品描述</div>
  </div>
</div>

2. 设置采集文本信息(data-growing-title)

对于一些图片或者区块,可以通过设置title或者data-growing-title属性来设置采集点文本,其中title的优先级高于data-growing-title。

代码示例:

<li data-growing-title="上一页" class="ant-pagination-disabled ant-pagination-prev">
  <a></a>
</li>

这时,采集到的li节点的内容就是“上一页”。

3. 设置采集位置信息(data-growing-idx)

除了内容以外,元素在列表里所在位置在某些场景下也是非常重要的信息,比如对于推荐广告位而言,我们是希望知道哪个位置的点击率最高。GrowingIO SDK 会自动识别列表元素,并附带上元素在列表里的位置。

LI 标签、TR 标签、DL 标签,会被自动识别为列表元素,列表内所有元素结点都会附带上位置信息。其他标签默认并不会带有位置信息,比如一些用 DIV 标签做的平铺容器。对于这种情况,可以使用 data-growing-idx。当在容器 DOM 结点上设置 data-growing-idx 属性,容器内的所有 DOM 元素同样,都会继承该属性值。

代码示例:

<div data-growing-idx="1">
  <div class="left-container">
    <img src="" alt="图片1"/>
  </div>
  <div class="right-container">
    <h3 class="title">
      文章一标题
    </h3>
  </div>
</div>

data-growing-idx属性需要赋值,建议传不为0的纯数字。

由于index必须是数字类型,Web JS SDK 在采集数据时,只会截取 data-growing-idx 中的数字部分(不包括单值为0时),自动忽略其他字符串,所以建议您传不为0的纯数字。

举例:<div data-growing-idx="123abc">test</div>// SDK 采集的index是 123

4. 设置数据采集黑名单(data-growing-ignore)

如果你希望过滤一些内容,可以在网站 DOM 结点上设置 growing-ignore 属性,这样这个容器里所有的元素的浏览量和点击量都不会被采集。

代码示例:

<div data-growing-ignore='true'>
 …
</div>

5. 开启输入文本框内容采集(data-growing-track)

由于输入文本框可能涉及一些隐私信息,比如账号、密码等,GrowingIO在采集数据的时候默认不采集输入文本框的数据。如果你希望采集某些文本框输入内容,比如搜索词,可以在input标签中设置growing-track属性,这样该文本框中的输入内容就会被采集到。如果input类型是password,即使开启内容采集,也不会采集该文本框的输入内容。

<input type='text' data-growing-track='true' />

4. 自定义数据上传

您的网页在集成了 GrowingIO 的 SDK 之后,它将会自动地为你采集一系列用户行为数据,并在 GrowingIO 分析后台供你制成数据分析报表。

5. 创建应用

6. 验证SDK是否正常采集数据

GrowingIO为您提供多种验证SDK是否正常采集数据的方式:

更多容器信息规则,请参考第三节:。

更多的文本信息规则,请参考和。

更多的位置信息规则,请参考。

除上述的用户行为数据(无埋点数据)之外,GrowingIO 还提供了多种 API 接口,供您上传一些自定义的数据指标及维度,请参考 。90% 以上的用户都会上传登录用户 ID,以便分析登录用户的数据情况。

在GrowingIO平台的创建相应的Web应用。创建应用请参考查看。

了解GrowingIO平台数据类型请参考。

完成Web页面代码集成部署后,使用 工具校验您的网站是否在正常向GrowingIO平台发送数据。

容器规则
第4节:What(内容)
第1节:内容规则
第2节:位置规则
API 2.x
数据模型
Web Debugger
查看项目基本信息
创建应用