At noon, the leader sent a code to add a few days ago online in a project, the code is as follows:

<script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1275628737'%3E%3C/span%3E%3Cscript src='https://s23.cnzz.com/z_stat.php%3Fid%3D1275628737' type='text/javascript'%3E%3C/script%3E")); </script>Copy the code

I just got the code was also confused, a closer look, the damn is not a script tag, easy to do, directly add to the HTML code, because it is a VUE project, there is only one HTML, that is the public index. HTML, I was about to add, the leader said, This only needs to be added to A certain page (here it is called A page), other pages do not need, because it is used to count the traffic data of that page.

I told my boss that once the code was added, all pages would be counted, because the VUE project was a single-page application with only one HTML page. The leader expresses helpless, I express ha ha, try, searched webmaster statistics then get to the Internet, CNZZ and so on. Finally, here’s what I found. (PS: mainly refer to the vUE single page to add CNZZ statistics and API technical documentation)

The main operation is done in app.vue, first defining a method to initialize CNZZ.

export default { data(){ return { src: 'https://s23.cnzz.com/z_stat.php?id=1275628737', id: 'cnzz_stat_icon_1275628737' } }, mounted(){ this.initCNZZ() }, methods: {initCNZZ() {// Add script const script = document.createElement('script') script.src = this.src script.id = this.id script.language = 'JavaScript' document.body.appendChild(script) } }, watch: { '$route': { handler(to, from) { console.log('to - - - ', to) console.log('from - - - ', from) setTimeout(() => { if (window._czc) { const location = window.location const contentUrl = location.pathname + location.hash const refererUrl = '/' console.log('location - - - ', location) console.log('contentUrl - - - ', contentUrl) window._czc.push(['_setAutoPageview', false]) window._czc.push(['_trackPageview', contentUrl, refererUrl]) } }, 300) }, immediate: true } } }Copy the code

Here window._czc.push([‘_setAutoPageview’, false]) is to turn off the automatic PV count for this page to prevent page traffic from doubling.

Window._czc. push([‘_trackPageview’, contentUrl, refererUrl])

If you look at the background of CNZZ, a record will appear, like this:

In fact, we can see that the blocked page URL also contains the routing address, so in app.vue, we do not need to set up traffic monitoring for individual routes, just need to filter in the background. Oh, by the way, the code sent to me by the leader above is coded. I use unescape to decode and then separate SRC and ID for initialization. The specific project depends on the specific situation. Play CNZZ for the first time there must be imperfect place, for master to give advice, modestly learning, thank 🙏