百度、Google 埋点统计（Vue篇）

秒速五厘米 2023-03-01 09:50 130阅读 0赞

参考资料[：资料][Link 1]

##### 一、Vue 使用百度统计 #####

在`Vue`单页面开发中接入百度统计代码时，如果直接按照官网的走会出现错误，就是`_hmt`找不到，这是因为在一个js文件里声明的变量在另一个js文件里是找不到的，所以需要把\_hmt挂载到`window`对象下,这样`_hmt`成为了全局变量，就可以在任何地方访问了。

###### 1、在`index.html`或者`main.js`下百度统计代码添加 ######

var _hmt = _hmt || [];
    window._hmt = _hmt; // 必须把_hmt挂载到window下，否则找不到
     (function () { 
           var hm = document.createElement("script");
           hm.src = "https://hm.baidu.com/hm.js?"+ 百度站点id;
           var s = document.getElementsByTagName("script")[0];
           s.parentNode.insertBefore(hm, s);
      })();

###### 2、创建`vuerouter`后，调用`beforeEach`方法，每个路由跳转时都将其跳转的路由推给百度。 ######

router.beforeEach((to, from, next) => { 
        if (_hmt) { 
            if (to.path) { 
                _hmt.push(['_trackPageview', '/#' + to.fullPath]);
            }
        }
        next();
    });

**注意事项**：

> 百度统计代码每次更新时间约5分钟，添加或修改后要等待。

###### 易出现的错误： ######

###### 1、百度统计：页面代码安装状态：代码未生效 ######

> 说明：一般安装完百度统计后20分钟左右就生效了，如果时间过长说明安装有问题
> 
> 页面代码安装状态:代码未生效
> 
> 检查一下页面代码中是否包含以下代码，需要去掉

//去除掉
    <meta name="referrer" content="no-referrer"/>

##     ##

#### 二、Vue 使用 Google 统计 ####

单页面应用切换时要手动发送页面统计，首先在 `index.html`或者 `main.js` 里引入谷歌统计代码：

[Link 1]: https://blog.csdn.net/mouday/article/details/106874288