微信小程序

对于微信小程序多样的开发方式,我们给出了主流开发方式的集成方法参考。如您使用了其他开发方式,请咨询我们。

如果您使用跨平台框架开发且有多端(特指小程序,快应用、App和Web除外)同时需要集成SDK的需求时,只需在框架代码中集成一次即可。例:

使用uni-app同时开发微信小程序和阿里(支付宝)小程序,只需集成一次即可。

准备条件

1、在 GrowingIO 平台中获取项目Id,获取方法请参考"项目管理 > 项目概览 > 查看项目基本信息"。

2、在您的小程序中获取appId

3、在下列选项中选择对应的开发框架,并下载对应的SDK文件存放在项目中或使用npm的方式集成。下文中以utils/gio目录作为下载集成的示例目录(目录和SDK文件可自定义重命名)。

在小程序中集成

参考示例在 app.js/main.js 小程序主文件中添加初始化代码。添加位置参考示例代码,注意不要随意修改初始化代码位置。SDK不支持在小程序中任意生命周期中进行初始化。

Native原生

1、加载SDK

微信原生SDK下载:https://assets.giocdn.com/sdk/minip/saas/3.8.18/gio-wechat.js

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

2、使用init方法进行初始化

注意init方法所处位置在App实例之前。

示例代码

// app.js
import gio from './utils/gio/gio-wechat.js';

gio('init', 'your GrowingIO 项目ID', 'your AppId', {
    version: 'your miniProgram version',
    ...other settings
});

App({ ... });

uni-app 框架

1、加载SDK

方式一:下载本地集成

uni-app框架SDK下载:https://assets.giocdn.com/sdk/minip/saas/3.8.18/gio-uniapp.js

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

方式二:npm集成

npm i gio-miniprogram-sdk-saas --save

2、使用init方法进行初始化

注意init方法所处位置(vue2和vue3中分别与app实例的相对位置不同)

示例代码

// main.js
import Vue from 'vue';
import App from './App.vue';
// 下载集成方式
import gio from './utils/gio/gio-uniapp.js';
// npm集成方式
import gio from 'gio-miniprogram-sdk-saas/gio-uniapp';

App.mpType = 'app';

gio('init', 'your GrowingIO 项目ID', 'your AppId', {
    version: 'your miniProgram version',
    uniVue: Vue,
    ...other settings
});

// 注意vue2中app实例在初始化之后
const app = new Vue(App);
app.$mount();

Taro 框架

1、加载SDK

方式一:下载本地集成

Taro框架SDK下载:https://assets.giocdn.com/sdk/minip/saas/3.8.18/gio-taro.js

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

方式二:npm集成

npm i gio-miniprogram-sdk-saas --save

2、使用init方法进行初始化

注意init方法所处位置(vue2和vue3中分别与app实例的相对位置不同)。使用vue开发时tarotaroVue都要传。

示例代码

// app.jsx
import Taro, { Component } from '@tarojs/taro';
// 下载集成方式
import gio from './utils/gio/gio-taro.js';
// npm集成方式
import gio from 'gio-miniprogram-sdk-saas/gio-taro';

gio('init', 'your GrowingIO 项目ID', 'your AppId', {
    version: 'your miniProgram version',
    taro: Taro,
    ...other settings
});

class App extends Component { ... }
Taro.render(<App />, document.getElementById('app'));
```

Chameleon 框架

****1、加载SDK

方式一:下载本地集成

Chameleon框架SDK下载:https://assets.giocdn.com/sdk/minip/saas/3.8.18/gio-chameleon.js

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

方式二:npm集成

npm i gio-miniprogram-sdk-saas --save

2、使用init方法进行初始化

注意init方法所处位置在App实例之前。

示例代码

// app.cml
import Cml from 'chameleon-runtime';
// 下载集成方式
import gio from './utils/gio/gio-chameleon.js';
// npm集成方式
import gio from 'gio-miniprogram-sdk-saas/gio-chameleon';

gio('init', 'your GrowingIO 项目ID', 'your AppId', {
    version: 'your miniProgram version',
    cml: Cml
    ...other settings
});

class App { ... }

export default new App();

WePY2 框架

1、加载SDK

方式一:下载本地集成

WePY2框架SDK下载:https://assets.giocdn.com/sdk/minip/saas/3.8.18/gio-wepy.js

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

方式二:npm集成

npm i gio-miniprogram-sdk-saas --save

2、使用init方法进行初始化

注意init方法所处位置在App实例之前。

示例代码

// app.wpy
import wepy from 'wepy';
// 下载集成方式
import gio from './utils/gio/gio-wepy.js';
// npm集成方式
import gio from 'gio-miniprogram-sdk-saas/gio-wepy';

gio('init', 'your GrowingIO 项目ID', 'your AppId', {
    version: 'your miniProgram version',
    wepy: wepy,
    ...other settings
});

wepy.app({ ... });

Remax 框架

1、加载SDK

方式一:下载本地集成

Remax框架SDK下载:https://assets.giocdn.com/sdk/minip/saas/3.8.18/gio-remax.js

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

方式二:npm集成

npm i gio-miniprogram-sdk-saas --save

2、使用init方法进行初始化

注意init方法所处位置在App实例之前。

示例代码

// app.js
import * as remax from 'remax';
// 下载集成方式
import gio from './utils/gio/gio-remax.js';
// npm集成方式
import gio from 'gio-miniprogram-sdk-saas/gio-remax';

gio('init', 'your GrowingIO 项目', 'your AppId', {
    version: 'your miniProgram version',
    remax: remax,
    ...other settings
});

const App = (props) => props.children;

export default App;

小程序插件中集成

小程序插件中集成SDK参考小程序集成,在插件入口文件 index.js 或指定的插件 Component 组件的 js 中集成即可。SDK 初始化时会自动切换为插件模式,将当前 Component 视为一个独立应用发送VISIT事件。

// 插件入口文件index.js
import gdp from './utils/gio/sdk.js';

gdp('init', 'your GrowingIO 项目ID', 'your AppId', {
    version: 'your miniProgram version',
    ...other settings
});

module.exports = { ... };
// myComponent.js
import gio from './utils/gio/sdk.js';

gio('init', 'your GrowingIO 项目ID', 'your AppId', {
    version: 'your miniProgram version',
    ...other settings
});

Component({ ... });

注意:由于小程序插件中无法获取到页面信息(即没有 path),因此在小程序插件中集成时,会自动关闭无埋点功能(不论是否开启 autotrack)即只能使用埋点。

添加白名单

要正常采集微信小程序的数据并发送给 GrowingIO,需要事先设置一个通讯域名,允许跟 GrowingIO API 服务器进行网络通信。具体步骤如下:

  1. 登陆微信小程序后台,进入开发。

  2. 打开开发设置,到服务器域名配置部分。

  3. request 合法域名中添加:https://wxapi.growingio.com

请注意:如果小程序通过第三方平台发布代码,在发布代码之前,需要调用接口在requestdomain中添加https://your serverHost,参考小程序官方第三方说明

数据校验

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

方式一:小程序&内嵌页Debugger(可能会受网络等因素影响,建议使用方式二)

方式二:在SDK中设置了Debug模式后,在开发者工具中查看数据采集日志。

最后更新于