1. 自定义埋点版微信小程序 SDK 说明

  • 全埋点版本的微信小程序 SDK 是通过代理小程序的 App 和 Page 方法实现的自动采集,但是因为代理这两个方法存在风险,另外可能某些用户不需要自动采集,这时候就强烈建议使用自定义采集的方法;
  • 自定义埋点版微信小程序 SDK 提供了 quick() 方法来采集 $MPLaunch $MPShow $MPHide 三个预置事件,效果跟全埋点版本一致;
  • 自定义埋点版微信小程序 SDK 目前不能通过 quick() 方法来采集 $MPViewScreen $MPShare $MPClick 这三个预置事件;

2. 快速使用

2.1. 集成与使用

2.1.1. 下载文件

2.1.2. 引入 SDK 、配置参数并完成初始化

  • 把文件放在小程序项目中,然后在 app.js 中通过 require() 引入文件 ;
  • 调用 setPara() 方法设置初始化参数,必须在 require() 之后,立即调用 setPara() 方法设置
  • 调用 init() 方法标志已完成初始化;
  • 在 app.js 中设置一个全局变量,如:sensors,以便在其他页面逻辑 js 文件中通过该全局变量调用 SDK 接口;
    注意:init() 方法必须调用,否则不会发数据。

app.js

var sa= require('./utils/sensorsdata.custom.min.js');
sa.setPara({
	server_url: '数据接收地址'
});
App({
	onLaunch : function( options ){
		//设置全局变量
		this.sensors = sa;
	}
});
JS

2.1.3. 开启全埋点

  • 在小程序指定的生命周期回调中通过调用 quick() 接口开启全埋点,采集预置事件;

app.js

var sa = require('./utils/sensorsdata.custom.min.js');
sa.setPara({
	server_url: '数据接收地址'
});
sa.init();
App({
	onLaunch : function( options ){
		this.sensors = sa;
	 //通过调用 quick() 接口且设置第一个参数为 appLaunch,第二个参数为生命周期回调函数参数对象来采集预置事件 $MPLaunch,第三个参数是要为该事件设置的属性对象
        sa.quick('appLaunch', options,{
            ProductId: '123456'
        });
    },
    onShow : function( options ){
      //通过调用 quick() 接口且设置第一个参数为 appShow,第二个参数为生命周期回调函数参数对象来采集预置事件 $MPShow,第三个参数是要为该事件设置的属性对象
        sa.quick('appShow', options,{
            ProductCatalog: "Laptop Computer"
        });
    },
    onHide : function(){
     //通过调用 quick() 接口且设置第一个参数为 appHide,第二个参数是要为该事件设置的属性对象来采集预置事件 $MPHide
        sa.quick('appHide',{
            ProductName: "MacBook Pro"
        });
    }
});
JS

2.1.4. 自定义事件采集

  • 在其他页面逻辑 js 文件中通过 track() 方法来采集自定义事件数据;

index.js

// 获取小程序 App 实例
var app = getApp();
Page({
    onShow: function(){
        // 通过 2.1.2. 步骤中为小程序实例对象上挂载的 sensors 对象调用 track() 接口采集自定义事件
        app.sensors.track('pageView',{
            pagename: 'index'
        })
    }
});
JS

2.1.1. 下载文件

2.1.2. 引入 SDK 、配置参数并完成初始化

  • 把文件放在小程序项目中,然后在 main.js 中通过 import 引入文件 ;
  • 调用 setPara() 方法设置初始化参数;
  • 调用 init() 方法标志已完成初始化;
  • 在 main.js 中设置一个全局变量,如:sensors,以便其他 js 文件中通过该全局变量调用 SDK 接口;
    注意:init() 方法必须调用,否则不会发数据。

app.js

import Vue from 'vue'
import App from './App'
 
// 此处 sensorsdata.custom.min.js 文件路径需要根据项目实际情况设置
import sa from './sensorsdata.custom.min.js'
sa.setPara({
    server_url: '数据接收地址'
});
sa.init()
//其他全局变量方式可参考此官方文档 https://ask.dcloud.net.cn/article/35021
Vue.prototype.sensors = sa;

Vue.config.productionTip = false
 
App.mpType = 'app'
 
const app = new Vue({
    ...App
})
app.$mount()
JS

2.1.3. 开启全埋点

  • 在 App.vue 文件中的小程序指定的生命周期回调中通过调用 quick() 接口开启全埋点,采集预置事件;

App.vue

<script>
    export default { 
        onLaunch: function(option) {
			//通过调用 quick() 接口且设置第一个参数为 appLaunch,第二个参数为生命周期回调函数参数对象来采集预置事件 $MPLaunch,第三个参数是要为该事件设置的属性对象
                this.sensors.quick('appLaunch', option);         
        },
        onShow: function( option ) {
    		//通过调用 quick() 接口且设置第一个参数为 appShow,第二个参数为生命周期回调函数参数对象来采集预置事件 $MPShow,第三个参数是要为该事件设置的属性对象    
                this.sensors.quick('appShow', option)
        },
        onHide: function() {
    		//通过调用 quick() 接口且设置第一个参数为 appHide,第二个参数是要为该事件设置的属性对象来采集预置事件 $MPHide 
            	this.sensors.quick('appHide')
        },
        globalData: {
            test: ''
        }
    }
</script>
JS

2.1.4. 自定义事件采集

  • 其他页面中可以通过 track() 方法来采集自定义事件数据;

Label.vue

<script>
    export default {
        data() {
            return {};
        },
        methods: {
            radioChange: function(e) {
                var checked = e.target.value
				//采集自定义事件
                this.sensors.track('labelChange',{
                    currentValue: checked
                })
                console.log(checked)
            }
        }
    }
</script>
JS

2.1.1. 下载文件

2.1.2. 引入 SDK 、配置参数并完成初始化

  • 把文件放在小程序项目中,然后在 app.jsx 中通过 import 引入文件 ;
  • 调用 setPara() 方法设置初始化参数;
  • 调用 init() 方法标志已完成初始化;
  • 在 app.jsx 中设置一个全局变量,如:sensors,以便其他 jsx 文件中通过该全局变量调用 SDK 接口;
    注意:init() 方法必须调用,否则不会发数据。

app.jsx

import Taro, { Component } from '@tarojs/taro'
import Index from './pages/index'
// 此处 sensorsdata.custom.min.js 文件路径需要根据项目实际情况设置
import sa from './util/sensorsdata.custom.min.js'
sa.setPara({
  server_url: '数据接收地址'
});
sa.init();
class App extends Component {
	config = {
    	pages: [
      		'pages/index/index'
    	],
    	window: {
      		backgroundTextStyle: 'light',
      		navigationBarBackgroundColor: '#fff',
      		navigationBarTitleText: 'WeChat',
      		navigationBarTextStyle: 'black'
    	}
  	}
	constructor(){
		super();
		// 设置全局变量
		this.sensors = sa;
	}
}
JS

2.1.3. 开启全埋点

  • 在小程序指定的生命周期回调中通过调用 quick() 接口开启全埋点,采集预置事件;

app.jsx

import Taro, { Component } from '@tarojs/taro'
import Index from './pages/index'
// 此处 sensorsdata.custom.min.js 文件路径需要根据项目实际情况设置
import sa from './util/sensorsdata.custom.min.js'
sa.setPara({
  server_url: '数据接收地址'
});
sa.init();
class App extends Component {
	config = {
    	pages: [
      		'pages/index/index'
    	],
    	window: {
      		backgroundTextStyle: 'light',
      		navigationBarBackgroundColor: '#fff',
      		navigationBarTitleText: 'WeChat',
      		navigationBarTextStyle: 'black'
    	}
  	}
	constructor(){
		super();
		// 设置全局变量
		this.sensors = sa;
	}

  	componentDidMount () {
		//通过调用 quick() 接口且设置第一个参数为 appLaunch,第二个参数为生命周期回调函数参数对象来采集预置事件 $MPLaunch,第三个参数是要为该事件设置的属性对象
    	sa.quick('appLaunch', this.$router.params);
  	}

  	componentDidShow () {
		//通过调用 quick() 接口且设置第一个参数为 appShow,第二个参数为生命周期回调函数参数对象来采集预置事件 $MPShow,第三个参数是要为该事件设置的属性对象    
    	sa.quick('appShow', this.$router.params);
  	}

  	componentDidHide () {
		//通过调用 quick() 接口且设置第一个参数为 appHide,第二个参数是要为该事件设置的属性对象来采集预置事件 $MPHide
    	sa.quick('appHide');
  	}

  	render () {
    	return (
      		<Index />
    	)
  	}
}

Taro.render(<App />, document.getElementById('app'))
JS

2.1.4. 自定义事件采集

  • 其他 jsx 文件中可以通过 track() 方法来采集自定义事件数据;

index.jsx

import Taro, { Component } from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'
import './index.css'

export default class Index extends Component {

  config = {
    navigationBarTitleText: '首页'
  }

  componentWillMount () { }

  handleClick= ()=>{
    // 获取小程序 App 实例 采集自定义事件
    Taro.getApp().sensors.track('click',{
      name:'点击'
    })
  }
  render () {
    return (
      <View className='index'>
        <Text>Hello world!</Text>
        <Button onClick={this.handleClick}>点击</Button>
      </View>
    )
  }
}
JS

2.1.1. 下载文件

2.1.2. 引入 SDK 、配置参数并完成初始化

  • 把文件放在小程序项目中,然后在 main.js 中通过 import 引入文件 ;
  • 调用 setPara() 方法设置初始化参数;
  • 调用 init() 方法标志已完成初始化;
  • 设置一个全局变量,如:sensors,以便在其他页面中通过该全局变量调用 SDK 接口;
    注意:init() 方法必须调用,否则不会发数据。

main.js

import Vue from 'vue'
import App from './App'

//集成神策小程序 SDK
import sa from  './sensorsdata.custom.es6.min'
sa.setPara({
    server_url: '数据接收地址'
});
sa.init();
//设置全局变量
Vue.prototype.sensors = sa;

Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue(App)
app.$mount()
JS

2.1.3. 开启全埋点

  • 在 App.vue 文件中的小程序指定的生命周期回调中通过调用 quick() 接口开启全埋点,采集预置事件;

App.vue

<script>
export default {
  onLaunch(option){
	//通过调用 quick() 接口且设置第一个参数为 appLaunch,第二个参数为生命周期回调函数参数对象来采集预置事件 $MPLaunch,第三个参数是要为该事件设置的属性对象
    this.sensors.quick('appLaunch', option)
  },
  onShow(option){
    //通过调用 quick() 接口且设置第一个参数为 appShow,第二个参数为生命周期回调函数参数对象来采集预置事件 $MPShow,第三个参数是要为该事件设置的属性对象
    this.sensors.quick('appShow', option);
  },
  onHide(){
    //通过调用 quick() 接口且设置第一个参数为 appHide,第二个参数是要为该事件设置的属性对象来采集预置事件 $MPHide
    this.sensors.quick('appHide')
  },
  created () {

  }
}
</script>
JS

2.1.4. 自定义事件采集

  • 其他页面中可以通过 track() 方法来采集自定义事件数据;

index.vue

<template>
  <div @click="clickHandle">
    <button>点击</button>
  </div>
</template>

<script>
export default {
  data () {
    
  },
  methods: {
    clickHandle (ev) {
      //通过 track() 接口采集自定义事件
      this.sensors.track('click',{
        name: '点击'
      });
    }
  },
  created () {
    
  }
}
</script>

JS

2.1.1. 下载文件

2.1.2. 引入 SDK 、配置参数并完成初始化

  • 把文件放在小程序项目中,然后在 app.wpy 中通过 import 引入文件 ;
  • 调用 setPara() 方法设置初始化参数;
  • 调用 init() 方法标志已完成初始化;
  • 在 app.wpy 中设置一个全局变量,如:sensors,以便在其他 wpy 文件中通过该全局变量调用 SDK 接口;
    注意:init() 方法必须调用,否则不会发数据。

app.wpy

<script>
import wepy from 'wepy';
import sa from './sensorsdata.custom.min.js'
sa.setPara({
  server_url:'数据接收地址'
});
sa.init();
export default class extends wepy.app {
	onLaunch(option) {
		//设置全局变量
    	this.sensors = sa;  
  	}
}
</script>
JS

2.1.3. 开启全埋点

  • 在 app.wpy 文件中的小程序指定的生命周期回调中通过调用 quick() 接口开启全埋点,采集预置事件;

app.wpy

<script>
import wepy from 'wepy';
import sa from './sensorsdata.js'
sa.setPara({
  server_url:'数据接收地址'
});
sa.init();
export default class extends wepy.app {
	onLaunch(options) {
		
    	this.sensors = sa;
		//通过调用 quick() 接口且设置第一个参数为 appLaunch,第二个参数为生命周期回调函数参数对象来采集预置事件 $MPLaunch,第三个参数是要为该事件设置的属性对象
        sa.quick('appLaunch', options,{
            ProductId: '123456'
        })  
  	}

	onShow( options ){
      	//通过调用 quick() 接口且设置第一个参数为 appShow,第二个参数为生命周期回调函数参数对象来采集预置事件 $MPShow,第三个参数是要为该事件设置的属性对象
        sa.quick('appShow', options,{
            ProductCatalog: "Laptop Computer"
        });
    }

    onHide(){
     	//通过调用 quick() 接口且设置第一个参数为 appHide,第二个参数是要为该事件设置的属性对象来采集预置事件 $MPHide
        sa.quick('appHide',{
            ProductName: "MacBook Pro"
        });
    }
}
</script>
JS

2.1.4. 自定义事件采集

  • 其他 wpy 文件中可以通过 track() 方法来采集自定义事件数据;

index.wpy

<script>
export default class Address extends wepy.page {
	methods = {
    	handleClick() {
			// 获取 App 实例, 采集自定义事件
      		this.$parent.sensors.track('click',{
        		name: 'click'
      		})     	
    	}
  	}
}
</script>
JS

2.2. 确认数据发送成功

注意:客户有测试项目的情况下,优先建议客户使用测试项目的数据接收地址向测试项目发数据。

  • 集成 SDK 初始化代码且使用 track() 方法进行埋点,微信开发者工具 console 会打印采集的数据,json 格式;

  • 微信开发者工具 network 中有 sa 的图片请求,且状态码为 200,验证数据接收地址;

  • 神策分析界面中,打开导入中的数据,点击开始刷新按钮。在微信开发者工具触发一些事件,分析后台的导入中数据可以看到数据进入;

  • 神策分析界面中,打开埋点管理查看,已入库 1 条,证明数据采集成功;
  • 神策分析界面中,事件分析查看数据;