1. 方案概述

小程序与 H5 的数据打通，是小程序将匿名 ID 通过 URL 方式传递给 H5 端，H5 端替换该匿名 ID，达到统一用户标识的目的。

2. 方案实现

2.1. 小程序端

// webview.js
import H5Linker from '/dist/wechat/plugin/h5-linker/index.esm';
sensors.usePlugin(H5Linker);

Page({
  data: {
    webUrl: ''
   },
  onLoad: function (options) {
    let URL = 'https://example/demo.html' 必填项
    let after_hash = true //选填项 默认 false
    this.setData({
      webUrl: H5Linker.addDistinctIdToUrl(URL ,after_hash)
    });
  }
});
// webview.wxml
<web-view src="{{ webUrl }}"></web-view>

CODE

2.2. H5 端

2.2.1. Web JS SDK 集成

H5 页面集成 Web JS SDK。

2.2.2. 开启多域名打通

参考配置如下：

sensors.use('SiteLinker',
  {linker: [
      {part_url: '', after_hash: false} 
  ]}
)

CODE

注意事项：因为涉及到多个域名页面，会产生多个匿名 ID，所以使用该多域名打通功能，建议开启多对一。

3. 其他小程序实现方案

3.1. 小程序端

小程序端一般使用 UUID 或 OpenID 作为匿名 ID ，这里以 OpenID 为例。

3.1.1. 初始化小程序 SDK

小程序端集成 SDK 后，调用 identify 将匿名 id 修改为 OpenID，并调用 init 初始化：

// 初始化 SDK
wx.request({
	url: '后端获取 OpenID 的请求',
	success: function(res){
		if(res.OpenID){
			sensors.identify(res.OpenID);	
		}
	},
	complete: function(){
		sensors.init();
	}
});

3.1.2. web-view 传递匿名 ID

在需要跳转 H5 的小程序 Page 中获取匿名 ID
将匿名 ID 拼接到 web-view 的 src 属性上，传递给 H5

// 页面的 wxml
<web-view src={{ url }}></web-view>

//页面的 js
Page({
    data: {        
      // 跳转的 h5 的地址
      url: ''
    },
    onLoad() {     
       // 获取匿名 ID 
       var distinctID = app.sensors.getAnonymousID();
       // 更新跳转 H5 的 url
       this.setData({ 
           url: 'https://example.com?distinctID=' + distinctID  
       })
    }
})

3.2. H5 端

3.2.1. Web JS SDK 集成

H5 页面集成 Web JS SDK。

3.2.2. 替换 H5 匿名 ID

判断当前页面环境，若处于小程序中，则解析页面地址中的参数，获取 distinctID 参数值
调用 Web JS SDK 提供的 identify(distinctID, true) 接口修改匿名 ID

// 小程序中的 H5 页面
<script>
    // sensors.init 初始化代码
    ...
    // 自行解析 url 中携带的 distinctID
    var distinctID = getQueryString('distinctID');
    // 修改 H5 上报数据的 distinctID 
    sensors.identify(distinctID, true)
    // 再执行全埋点 autoTrack 其他操作
    ...
</script>

4. 全域用户关联

4.1. 微信小程序端

4.2. 微信小程序多用户关联

微信小程序多用户 ID 关联时，请参阅全域用户关联。这里以 Unionid ID 为例。

4.2.1. web-view 传递 Unionid ID

将 Unionid ID 拼接到 web-view 的 src 属性上，传递给 H5

// 页面的 wxml
<web-view src={{ url }}></web-view>

//页面的 js
Page({
    data: {        
      // 跳转的 h5 的地址
      url: ''
    },
    onLoad() {     
       // 更新跳转 H5 的 url
       this.setData({ 
           url: 'https://example.com?unionidID=' + unionidID // unionidID 为微信用户的 Unionid 
       })
    }
})

4.3. H5 端

4.3.1. Web JS SDK 集成

H5 页面集成 Web JS SDK。

4.3.2. 替换 H5 匿名 ID

判断当前页面环境，若处于微信小程序中，则解析页面地址中的参数，获取 unionidID 参数值
调用 Web JS SDK 提供的 bind("$identity_mp_unionid", unionidID) 接口修改匿名 ID

// 小程序中的 H5 页面
<script>
    ...
    // 自行解析 url 中携带的 unionidID
    var unionidID = getQueryString('unionidID');
    // 多用户 ID 关联 unionidID
    sensors.bind("$identity_mp_unionid", unionidID)
    ...
</script>