Brief description:
The front end of my project uses vue as H5 page. There are many pages, such as list page, detail page, other pages, etc. to be exact, these pages are actually modules, because vue is a single page application as a whole after page packaging

Official Development Manual address

Add buried point

Buried points are divided into two blocks: stability monitoring and flow analysis

Stability monitoring

Just follow the cases in the document directly (change the parameters to your own)
As mentioned earlier, vue is a single page application, so just add this code once. After the page is loaded, execute the following and it is basically OK.

<script
src='https://wpk-gate.zjzwfw.gov.cn/static/wpk-jssdk.1.0.2/wpkReporter.js'
crossorigin='true'></script>
<script>
try{
constconfig={
bid:'************',
signkey:'1234567890abcdef',
gateway:'https://wpk-gate.zjzwfw.gov.cn'
};
constwpk=newwpkReporter(config);
wpk.installAll();
window._wpk=wpk;
}catch(err){
console.error('WpkReporterinitfail',err);
}
</script>

Flow analysis

The flow analysis module is divided into three parts:

• General module
• Foundation buried point
• User information embedding point

General module

Common module code:

<script>
  (function(w, d, s, q, i) {
    w[q] = w[q] || [];
    var f = d.getElementsByTagName(s)[0],j = d.createElement(s);
    j.async = true;
    j.id = 'beacon-aplus';
    j.src = 'https://alidt.alicdn.com/alilog/mlog/aplus_cloud.js';
    f.parentNode.insertBefore(j, f);
  })(window, document, 'script', 'aplus_queue');

  aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-rhost-v', 'alog.zjzwfw.gov.cn']
  });
  aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-rhost-g', 'alog.zjzwfw.gov.cn']
  });

      var u = navigator.userAgent
      var isAndroid = u.indexOf('Android') > -1
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

      aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['appId', isAndroid ? '28302650' : isIOS ? '28328447' : '47130293']
      });
</script>

This content actually dynamically loads a collected js plug-in. The principle is: dynamically create a script tag in the page, set a src path (js plug-in path), and then you can use aplus_ The queue object has a push function, which can be understood as the post function of jquery. This function takes an object as a parameter.
Object parameter attribute description:
action: requested interface
arguments: parameters of the interface

The logic of this code is: after loading a js plug-in, you can use aplus_queue object. First set two addresses, and then send whether the client is IOS or Android

Because vue is a single page application, you only need to write this paragraph once. After the page is loaded, just execute this code again.
Then, aplus can be used in the whole application_ The queue object. Whether it's in the list or in the details.

Foundation buried point

Look at the code first:

// Single page application or "single page" needs to supplement PV log parameters asynchronously, and the following embedding points are also required:
aplus_queue.push({
  action: 'aplus.setMetaInfo',
  arguments: ['aplus-waiting', 'MAN']
});
// Execute sendPV after routing switching of single page application or after asynchronously obtaining the parameters required by pv log:
aplus_queue.push({
  'action':'aplus.sendPV',
  'arguments':[{
		is_auto: false
  }, {
		sapp_id:'*****',
		sapp_name:'*********',
		//Custom PV parameter key value pair
		//Only this kind of tiled json can be used, and multi-layer nesting is not allowed. Similar objects have sub objects and sub objects
		page_id: 'page ID，And page Parameters are used together to ensure uniqueness',
		page_name: 'Page Chinese name',
		page_url: 'page URL'
  }]
})

This code means which pages or modules are submitted. Just change the parameters to your own
Key points: page_ id, page_ name, page_ The three parameters of URL must be set according to the requirements in the document.

User information embedding point

Just look at the code first:

// If collecting user information is asynchronous, you need to execute the BLOCK embedding point first
aplus_queue.push({
  action: 'aplus.setMetaInfo',
  arguments: ['_hold', 'BLOCK']
});
// Set the user ID, and the user device ID may not be reported. If reported, the UUID can be obtained using the open platform JSAPI
//The user ID needs to embed the real information of the user. The user ID must be accountId, which can be obtained through the "get user details" interface of the open platform.
aplus_queue.push({
  action: "aplus.setMetaInfo",
  arguments: ["_user_id", "Current user ID"]
});
aplus_queue.push({
  action: "aplus.setMetaInfo",
  arguments: ["_dev_id", "Current user equipment ID"]
});

// If collecting user information is asynchronous, you need to set the user information before executing the START embedding point
// At this time, the logs block ed will be sent out one by one with user information
aplus_queue.push({
  action: 'aplus.setMetaInfo',
  arguments: ['_hold', 'START']
});

After analyzing this code, I personally feel that basically, the buried point reporting is asynchronous, so directly START with a BLOCK, then put the data you want to bury, such as user id, device id, etc., and finally START.

According to the document description, the device id does not need to be reported, so there are only 3 pieces of content in my project.
First BLOCK: BLOCK
Second block:_ user_id
Block 3: START

Here's the explanation_ user_id, user id needs to embed the real information of the user, and accountId must be used. How to obtain the real accountId of the political nail user? In fact, there are returned in the authorized login interface. Just take it out.

What you may not find (highlight)

I don't know if you found it. Under these four code fragments, the instructions in the first and second paragraphs say: this code only needs to be executed once. However, the third and fourth paragraphs do not say, but explain here (highlight):
Different page (module) jump should execute the third and fourth code, because the requirement is that each page should be embedded

For example: after authorized login, enter the list on the home page. After the page is loaded, the four sections of code are executed in turn. Enter the details page (module) from the list. After loading, the third and fourth sections of code are executed. The first and second sections do not need to be executed, because those two sections only need to be executed once. Then, if the parameters in the code are set correctly, there is basically no problem.
wish you success!!