Skip to main content

集成

准备工作​

1、在 GrowingIO 平台中新建数据源并获取accountId和dataSourceId。

2、在下列选项中选择对应的集成方式，并根据示例进行集成。

开始集成（Web 站点/H5）​

使用工具集成（推荐）​

使用 WebJS GioKit 的快速初始化功能，可视化填写必要字段并选择需要的功能，即可一键为您自动生成合适您业务需求的初始化代码。省去不必要的理解成本和开发时间。

使用 GioKit 参考文档

手动集成​

我们为您提供了 CDN 和 npm 两种不同的集成方式，请根据实际业务场景和需要选择集成方式。

从 CDN（内容分发网络）加载 Gio WebJS SDK，及时获取最新的更新。

全量引入集成，SDK 将包含 除性能监控之外 的其他所有插件，功能全覆盖，简单快速集成。

  • 优点：复杂度低，理解成本低，快速集成。
  • 缺点：SDK 较大，约 75-80KB ，可能会拖慢加载速度。

复制以下脚本，并将其粘贴到 <head></head> 标签的底部，并修改init方法中对应字段：

<!-- GrowingIO Analytics WebJS SDK version 3.8 -->
<!-- Copyright 2015-2022 GrowingIO, Inc. More info available at http://www.growingio.com -->
<script type="text/javascript">
  !(function (e, n, t, c, i) {
    (e[i] =
      e[i] ||
      function () {
        (e[i].q = e[i].q || []).push(arguments);
      }),
      (t = n.createElement('script'));
    s = n.getElementsByTagName('script')[0];
    (t.async = 1), (t.src = c), s.parentNode.insertBefore(t, s);
  })(
    window,
    document,
    'script',
    'https://assets.giocdn.com/sdk/webjs/cdp/gdp-full.js',
    'gdp'
  );

  gdp('init', 'your accountId', 'your dataSourceId', {
    host: 'your apiServerHost',
    version: 'your website version',
  });
</script>

其他​

1）init初始化方法其他配置项请见参考文档。

2）SDK 默认使用es6版本进行打包，若您的站点需要支持 IE11 等不兼容 es6 的旧版浏览器，请修改为gdp-es5.js或gdp-full-es5.js即可引用 es5 版本的 SDK。

3）SDK 默认使用umd格式进行打包，若您的站点需要使用es格式的 SDK，请修改为gdp.es.js或gdp-full.es.js即可引用 es 格式的 SDK。

4）如果您希望不受 CDN（内容分发网络）影响，请下载 SDK 至本地集成，并修改上述集成代码中的 SDK CDN 地址为您本地的相对地址。

WebJS SDK 下载：https://github.com/growingio/growingio-sdk-webjs-autotracker/releases

(如果您点击链接在浏览器中直接打开了文件并不是下载文件，请尝试右键点击链接，选择 链接存储为... 即可正常触发下载)

插件扩展​

全量集成 SDK 时，我们已经将 除性能监控之外 的其他所有插件内置打包，如您需要使用性能监控请集成并注册插件。

按需集成 SDK 时，SDK 仅内置埋点功能，如您需要扩展其他功能时，需要集成并注册对应插件方可激活对应功能使用。

各个插件的介绍和集成方式请见插件。

在 APP 内嵌页面中集成​

全量集成 SDK 时，参考 Web 站点集成即可，无需做额外操作，已内置 App 内嵌页打通功能。

按需集成 SDK 时，需在 Web 站点集成的基础之上，注册添加 App 内嵌页打通插件。参考文档

在小程序内嵌页面中集成​

全量集成 SDK 时，需在 Web 站点集成的基础之上，修改初始化配置即可，无需再次集成插件，已内置小程序内嵌页打通功能。参考文档

按需集成 SDK 时，需在 Web 站点集成的基础之上，注册添加小程序内嵌页打通插件并修改初始化配置。参考文档

在微信公众号 H5 中集成​

与 Web 站点集成方法一致。

其他集成说明​

默认情况下，WebJS SDK 不支持在本地协议中集成，若您期望在127.0.0.1、localhost、file中调试使用 SDK，或者在Electron项目中集成，请在初始化 init 语句前添加以下代码：

window._gr_ignore_local_rule = true;

数据校验​

使用 GioKit 校验事件（推荐）​

使用 WebJS GioKit 的事件调试和实时监控功能，清晰展示触发时机和上报的事件，通过查看事件内容快速检验和排查埋点问题。

独立模块避免在大量的控制台 Log 中大海捞针式地查找事件，节约时间提高效率。

自动适配移动端，摆脱H5页面无法使用浏览器控制台的问题。

使用 GioKit 参考文档

使用 debug 在 Log 中校验​

可以在初始化代码时，配置debug: true打开 SDK 日志，在浏览器控制台中查看 Log 日志进行校验。