1. Solution Overview

WeChat Mini Program and H5 data integration is achieved by passing the anonymous ID from the Mini Program to the H5 side through URL. The H5 side replaces the anonymous ID to achieve unified user identification.

2. Solution Implementation

2.1. Mini Program Side

Refer to the h5-linker WeChat Mini Program and H5 User Association plugin.

// 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 Side

2.2.1. Web JS SDK Integration

Integrate Web JS SDK on H5 pages.

2.2.2. Enable Cross-Domain Integration

Refer to the following configuration:

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

Attention: Because multiple domain pages are involved, multiple anonymous IDs will be generated. Therefore, when using this cross-domain integration feature, it is recommended to enable many-to-one mapping.

3. Other Mini Program Implementation Solutions

3.1. Mini Program Side

UUID or OpenID is generally used as the anonymous ID on the Mini Program side. OpenID is used as an example here.

3.1.1. Initialize the Mini Program SDK

After integrating the SDK on the Mini Program side, call identify to modify the anonymous ID to OpenID, and call init to initialize:

// Initialize SDK wx.request({ 	url: 'Backend request to get OpenID', 	success: function(res){ 		if(res.OpenID){ 			sensors.identify(res.OpenID);	 		} 	}, 	complete: function(){ 		sensors.init(); 	} });

3.1.2. Pass Anonymous ID in web-view

  • Obtain the anonymous ID in the Mini Program page that needs to jump to H5.
  • Append the anonymous ID to the src attribute of the web-view and pass it to H5
// wxml of the page &lt;web-view src={{ url }}&gt;&lt;/web-view&gt; // js of the page Page({     data: {        // URL of the H5 page to navigate to     url: ''     },     onLoad() {        // Get the anonymous ID         var distinctID = app.sensors.getAnonymousID(); // Update the URL to the H5 page with distinctID        this.setData({        url: 'https://example.com?distinctID=' + distinctID         })     } })

3.2. H5 side

3.2.1. Web JS SDK integration

Integration of Web JS SDK in H5 pages

3.2.2. Replace the anonymous ID in H5

  • Determine the current page environment. If it is in a mini-program, parse the parameters in the page URL to obtain the distinctID parameter value
  • Call the identify(distinctID, true) interface provided by Web JS SDK to modify the anonymous ID
// H5 page within mini-program &lt;script&gt; // sensors.init initialization code ... // Parsing the distinctID carried in the URL by yourself var distinctID = getQueryString('distinctID'); // Modify the distinctID of the reported data in H5 sensors.identify(distinctID, true) // Then perform other operations like autoTrack ... &lt;/script&gt;

4. Global user association

4.1. WeChat Mini-Program side

4.2. Association of multiple users in WeChat Mini-Programs

WeChat Mini-Programs When associating multiple user IDs, please refer to Global user association. Here, Unionid ID is used as an example.

4.2.1. Pass the Unionid ID via web-view

  • Append the Unionid ID to the src attribute of the web-view and pass it to H5
// wxml of the page &lt;web-view src={{ url }}&gt;&lt;/web-view&gt; // js of the page Page({     data: {        // URL of the H5 page to navigate to     url: ''     },     onLoad() {      // Update the URL to the H5 page with unionidID (Unionid ID of the WeChat user)        this.setData({        url: 'https://example.com?unionidID=' + unionidID // unionidID is the Unionid of the WeChat user       })     } })

4.3. H5 side

4.3.1. Web JS SDK integration

H5 pageintegrate Web JS SDK.

4.3.2. replace H5 anonymity ID

  • Check the current page environment. If it is in a WeChat mini program, parse the parameters in the page URL to obtain the value of the unionidID parameter.
  • Call the bind("$identity_mp_unionid", unionidID) interface provided by the Web JS SDK to modify the anonymous ID.
// H5 page in the mini program &lt;script&gt; ... // Parse the unionidID carried in the URL    var unionidID = getQueryString('unionidID'); // Associate the unionidID with multiple user IDs    sensors.bind("$identity_mp_unionid", unionidID) ... &lt;/script&gt;