1. 集成神策分析 SDK

1.1. 两种初始化方式

  • 建议使用 IDM 3.0 的方案。能保证立即 init, 数据不丢失,且能更好的让用户关联。
  • 如果您是老用户想要从 IDM - 2.0 修改成 IDM - 3.0 的初始化方式。请先找值班同学确认 SA 版本是否支持,另外微信小程序 SDK 版本 >= 1.17.6

app.js

import sensors from '/dist/wechat/sensorsdata.esm.js'
 
// 配置初始化参数
sensors.init({
    name: 'sensors',
    server_url: '您的数据接收地址',
    // 全埋点控制开关
    autoTrack:{
        appLaunch: true, // 默认为 true,false 则关闭 $MPLaunch 事件采集
        appShow: true, // 默认为 true,false 则关闭 $MPShow 事件采集
        appHide: true, // 默认为 true,false 则关闭 $MPHide 事件采集
        pageShow: true, // 默认为 true,false 则关闭 $MPViewScreen 事件采集
        pageShare: true, // 默认为 true,false 则关闭 $MPShare 事件采集
        mpClick: false, // 默认为 false,true 则开启 $MPClick 事件采集
        mpFavorite: true, // 默认为 true,false 则关闭 $MPAddFavorites 事件采集
		pageLeave: false // 默认为 false, true 则开启 $MPPageLeave事件采集
    },
    // 是否允许控制台打印查看埋点数据(建议开启查看)
    show_log: true
});

// 如果需要使用 Openid 作为匿名 ID
wx.request({
    url: '后端获取 OpenID 的请求',
    success: function(res){
        if(res.OpenID){             
		  sensors.bindOpenid(res.OpenID);
        }
    }
});
 
App({
    onLaunch : function( options ){},
    onShow : function( options ){},
    onHide : function(){}
});
JS
  • 如果您暂时不需要 IDM 3.0。建议使用这种方式。
  • 如果需要使用 Openid 作为匿名 ID, 建议使用 IDM 3.0 。否则如果 Openid 的获取是异步的,那么全埋点的启动等事件在 identify 之前会使用 SDK 生成的 UUID 发送。
  • 如果 init 是在等待一定时间后再执行(例如等待 Openid 获取后再执行),如果此时小程序立即关闭,会导致丢数据! 不推荐。

app.js

import sensors from '/dist/wechat/sensorsdata.esm.js'
 
// 配置初始化参数
sensors.setPara({
    name: 'sensors',
    server_url: '您的数据接收地址',
    // 全埋点控制开关
    autoTrack:{
        appLaunch: true, // 默认为 true,false 则关闭 $MPLaunch 事件采集
        appShow: true, // 默认为 true,false 则关闭 $MPShow 事件采集
        appHide: true, // 默认为 true,false 则关闭 $MPHide 事件采集
        pageShow: true, // 默认为 true,false 则关闭 $MPViewScreen 事件采集
        pageShare: true, // 默认为 true,false 则关闭 $MPShare 事件采集
        mpClick: false, // 默认为 false,true 则开启 $MPClick 事件采集
        mpFavorite: true, // 默认为 true,false 则关闭 $MPAddFavorites 事件采集
		pageLeave: false // 默认为 false, true 则开启 $MPPageLeave事件采集
    },
    // 是否允许控制台打印查看埋点数据(建议开启查看)
    show_log: true
});  
sensors.init();

App({
    onLaunch : function( options ){},
    onShow : function( options ){},
    onHide : function(){}
});
JS

1.2. 不同框架的引入方式

  •  GitHub 上获取微信小程序 SDK 源码 
  •  app.js 文件中通过 require() 引入 SDK

app.js

var sensors = require('/dist/wechat/sensorsdata.cjs.js');
 
// 这里举例使用的是全域用户关联 - IDM 3.0 初始化方式 ,也可以按实际需求换成上面 1.1 中的简易用户关联 - IDM 2.0 初始化方式 
sensors.init({
    name: 'sensors',
    server_url: '您的数据接收地址',
    show_log: true
});

App({
    onLaunch : function( options ){},
    onShow : function( options ){},
    onHide : function(){}
});
JS
  • 通过 npm i sa-sdk-miniprogram 安装 SDK
  •  main.js 中通过 import 引入 SDK

main.js

import Vue from 'vue';
import sensors from '/dist/wechat/sensorsdata.esm.js'    

// 这里举例使用的是全域用户关联 - IDM 3.0 初始化方式 ,也可以按实际需求换成上面 1.1 中的简易用户关联 - IDM 2.0 初始化方式 
sensors.init({
    name: 'sensors',
    server_url: '您的数据接收地址',
    show_log: true
});  
 
import App from './App';
Vue.config.productionTip = false;
  
App.mpType = 'app';
  
const app = new Vue({
    ...App
});
app.$mount();
JS
  • 通过 npm i sa-sdk-miniprogram 安装 SDK
  •  app.jsx 中通过 import 引入 SDK

app.jsx

import Taro, { Component } from '@tarojs/taro'
import Index from './pages/index'
import sensors from '/dist/wechat/sensorsdata.esm.js'    

// 这里举例使用的是全域用户关联 - IDM 3.0 初始化方式 ,也可以按实际需求换成上面 1.1 中的简易用户关联 - IDM 2.0 初始化方式 
sensors.init({
    name: 'sensors',
    server_url: '您的数据接收地址',
   show_log: true
});
 
class App extends Component {
    config = {
        pages: [
            'pages/index/index'
        ],
        window: {
            backgroundTextStyle: 'light',
            navigationBarBackgroundColor: '#fff',
            navigationBarTitleText: 'WeChat',
            navigationBarTextStyle: 'black'
        }
    }
    constructor(){
        super();
    }
}
JS

taro 对 SDK(文件引入方式 或者 npm 引入方式) 进行二次编译可能无法正常运行,需要对 taro编译 > 编译配置详情 > mini(专属小程序的配置),配置小程序编译过程中排除不需要经过 Taro 编译的文件,具体使用请参考 taro 官方文档。

  • 通过 npm i sa-sdk-miniprogram 安装 SDK
  •  main.js 中通过 import 引入 SDK,注意需要在 vue 之前引入

main.js

import sensors from '/dist/wechat/sensorsdata.esm.js'
import Vue from 'vue';
import App from './App';  
  
// 这里举例使用的是全域用户关联 - IDM 3.0 初始化方式 ,也可以按实际需求换成上面 1.1 中的简易用户关联 - IDM 2.0 初始化方式   
sensors.init({
    name: 'sensors',
    server_url: '您的数据接收地址',
    show_log: true
});

Vue.config.productionTip = false;

App.mpType = 'app';
 
const app = new Vue(App);
app.$mount();
JS
  • 通过 npm i sa-sdk-miniprogram 安装 SDK
  •  app.wpy 中通过 import 引入 SDK

app.wpy

import sensors from '/dist/wechat/sensorsdata.esm.js'
import wepy from 'wepy';    

// 这里举例使用的是全域用户关联 - IDM 3.0 初始化方式 ,也可以按实际需求换成上面 1.1 中的简易用户关联 - IDM 2.0 初始化方式  
sensors.init({
    name: 'sensors',
    server_url: '您的数据接收地址',
    show_log: true
});
 
export default class extends wepy.app {
    onLaunch(option) {}
}
JS
  • 详细的的初始化配置参数可参考微信小程序 SDK API 文档
  • 建议通过 require 或 import 引入 SDK 后,立即调用 setPara() 来配置初始化参数,防止延迟配置导致元素点击事件处理函数无法被代理,预置元素点击事件无法采集;
  • 在调用 init() 接口之前,采集的数据被缓存在内存中;调用 init() 接口后,会将缓存的数据通过网络发送出去。

2. SDK 基本配置

2.1. 配置项目数据接收地址

如下图所示获取数据接收地址:

2.2. 设置事件公共属性

对于所有事件都需要添加的属性,可在初始化 SDK 前,调用 registerApp() 将属性注册为公共属性:

getApp().sensors.registerApp({
	userLever: 'VIP3',
	userSex: '男'
});
JS

需要在 App 实例化之前调用 registerApp() 方法完成公共属性的注册,否则会导致部分数据采集不到注册的公共属性

2.3. 用户关联

用户关联是为了对用户进行唯一标识,提高用户行为分析的准确性。目前神策提供了简易用户关联和全域用户关联分为用于支撑不同的业务场景。

2.4. 代码埋点追踪事件

SDK 初始化后,可通过 track() 方法追踪用户行为事件,并为事件添加自定义属性:

sensors.track(event_name[properties]);
JS

配置参数:

参数必填描述
event_name事件名称
properties为用户行为事件添加自定义属性,类型:Object。

示例:

// 为 click 事件添加自定义属性 name 值为点击。
getApp().sensors.track('click',{
	name: '点击'
});
JS

事件名和事件属性的格式规范,请参考数据格式

3. 调试查看事件信息

3.1. 事件的触发日志

setPara() 配置初始化参数时,通过 show_log: true 打开 Log 功能且 SDK 完成初始化后(即 init() 方法调用后),微信开发者工具 console 会打印采集的数据信息:


3.2. 事件的发送情况

事件数据发送成功时,可以在微信开发者工具的 Network 模块中,可以看到 sa 的请求:

4. SDK 可选配置

4.1. 设置用户属性

setProfile( properties ): 可以设定用户属性,同一个 key 多次设置时,value 值会进行覆盖替换:

getApp().sensors.setProfile({
	email:'xxx@xx',
	favoriteFruits: ['苹果', '油桃'],
	subscribers: 7277
});
JS

4.2. 渠道追踪

用户通过含有 utm 相关参数的路径访问小程序时,预置事件 $MPLaunch、$MPShow、$MPViewScreen 会解析启动路径中的 utm 相关参数作为自身的属性与属性值,并会设置 $latest_utm 相关属性到所有事件中,该特性在小程序的生命周期内有效。

5. SDK API

更多小程序 API,可参考SDK API (小程序)