vue3添加百度统计的几种方式

小半 • 2024年3月2日下午6:02 • 前端开发 • 阅读 302

申请百度统计后，会得到一段JS代码，需要插入到每个网页中去，下面有几种方式。

把统计代码插入到index.html入口文件中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
    <script charset="UTF-8" id="LA------" src="//sdk.js"></script>
    <script>LA.init({id:"skdfguskfg",ck:"sdigufsigfsi"})</script>
  </body>
</html>

以上方式是有些弊端的，因为Vue.js项目是单页应用，每次用户浏览网站时，访问内页时页面是不会刷新的，也就意味着不会触发百度统计代码；所以最终在百度统计后台看到的效果就是只统计到了网页入口的流量，却无法统计到内页的访问流量。

调用vue-router的afterEach方法

在main.js文件中调用vue-router的afterEach方法,将统计代码加入到这个方法里面，这样每次router发生改变的时候都会执行一下统计代码，这样就达到了目的,代码如下:

router.afterEach( ( to, from, next ) => {
 setTimeout(()=>{
   var _hmt = _hmt || [];
   (function() {
    //每次执行前，先移除上次插入的代码
    document.getElementById('baidu_sdk') && document.getElementById('baidu_sdk').remove();
    var hm = document.createElement("script");
    hm.src = "https://sdk/hm.js?xxxx";
    hm.id = "baidu_sdk"
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
   })();
 },0);
} );

单页面单独引入

如果你想统计聊天页面和帖子页面，这需要不同的统计代码，那么可以直接在页面上写。

// App.vue

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  setup() {
    // 在setup函数中执行统计代码
    const scriptElement = document.createElement('script');
    scriptElement.src = '//js-sdk-pro.min.js';
    scriptElement.setAttribute('charset', 'UTF-8');
    scriptElement.setAttribute('id', 'LA_');
    document.head.appendChild(scriptElement);

    // 初始化统计代码
    const initScriptElement = document.createElement('script');
    initScriptElement.textContent = 'LA.init({id:"sdhjfsjfhf",ck:"sdfgsfkjg"})';
    document.head.appendChild(initScriptElement);
  }
}
</script>