vue项目添加百度统计

太过爱你忘了你带给我的痛 2022-11-17 03:57 208阅读 0赞

## 第一步：准备工作 ##

1.使用百度账号登录百度统计平台(没有百度账号先注册一个)  
[https://tongji.baidu.com/web/welcome/login][https_tongji.baidu.com_web_welcome_login]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70]  
2.登录后进入管理 >账户管理 > 网站列表 > 新增网站  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70 1]  
3.录入网站信息后保存  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70 2]  
4.代码管理 > 代码获取 > 复制代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70 3]  
5.在代码管理 > 单页应用设置 > 启用 > 保存，启用单页应用数据统计模式

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70 4]

## 第二步：vue项目配置 ##

1.打开public/index.html，把复制的代码粘贴到`</body>`前面，然后包裹一层环境判断代码，再在`</head>`前面加上一段script代码，同时也包裹一层环境判断代码

注：环境判断代码的作用是开发环境不注入统计代码，打包线上环境时才注入统计代码，如果想在开发环境测试统计可以先不加环境判断代码

index.html

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width,initial-scale=1.0" />
            <meta name="keywords" content="" />
            <meta name="description" content="" />
            <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
            <title><%= htmlWebpackPlugin.options.title %></title>
            
            <% if (process.env.NODE_ENV === 'production' ) { %>
            <script> var _hmt = _hmt || []; </script>
            <% } %>
        </head>
        <body>
            <noscript>
                <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
            </noscript>
            <div id="app"></div>
            
           	
           	<% if (process.env.NODE_ENV === 'production' ) { %>
            <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxxxxxxxx"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>
    		<% } %>
        </body>
    </html>

> **如果在百度管理平台没有启用单页面模式，需要配置路由切换时手动埋点，埋点方式如下：**  
>   
> 
> 
> 打开路由文件router/index.js，在路由守卫beforeEach中设置如下代码
> 
>     router.beforeEach(async (to, from, next) => { 
>         if (to.path) { 
>            if (window._hmt) { 
>                 window._hmt.push(['_trackPageview', '/#' + to.fullPath]);
>             }
>         }
>         next(); 
>     });

2.代码添加完成后执行打包，并部署到服务器上

npm run build

## 第三步：代码安装检查 ##

回到百度统计平台 > 管理 > 代码管理 > 代码安装检查 > 开始检查，检查结果显示“代码安装正确”表示成功了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70 5]

## 第四步：查看统计 ##

1.先在浏览器输入域名访问自己的网站逛个几分钟，然后回到百度统计平台 > 基础报告 > 网站概况，就能看到一些统计数据了

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70 6]  
2.进入流量分析 > 实时访客还能看到一些细节数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70 7]

[https_tongji.baidu.com_web_welcome_login]: https://tongji.baidu.com/web/welcome/login
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70]: /images/20221022/0c8e04003f164fafb91fe6585cbe3a64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70 1]: /images/20221022/b30e564cb1934a9b98d43e783926bc35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70 2]: /images/20221022/f26c4bcf4c1d411e8e30a84fb935bc89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70 3]: /images/20221022/002d1b0ecd0343b2bb8930b2877ecdbf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70 4]: /images/20221022/cad19a10602a4c5c8ec9c71e676f6fd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70 5]: /images/20221022/9f480fe8d70f4cd9849bedd5b9e7c6dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70 6]: /images/20221022/1cba20d8cf0447c5a6c344e35e282eb8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70 7]: /images/20221022/a3f117f4ac77428493967610ccfcaf8a.png