草庐IT

vue 项目添加百度统计及常见问题

zZ_d205 2023-03-28 原文

参考网址：
https://tongji.baidu.com/holmes/Analytics/%E4%BA%A7%E5%93%81%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97/%E4%BD%BF%E7%94%A8%E8%AE%BE%E7%BD%AE/%E4%BB%A3%E7%A0%81%E7%AE%A1%E7%90%86/%E4%BB%A3%E7%A0%81%E8%8E%B7%E5%8F%96/%E4%BB%A3%E7%A0%81%E8%B7%9F%E8%B8%AA/%E5%A6%82%E4%BD%95%E8%8E%B7%E5%8F%96%E7%BB%9F%E8%AE%A1%E4%BB%A3%E7%A0%81

https://blog.csdn.net/lihefei_coder/article/details/115516096
https://www.jianshu.com/p/cf54bd78b7e5
https://www.bigtspace.com/7236.html

第一步：准备工作
1.使用百度账号登录百度统计平台(没有百度账号先注册一个)
https://tongji.baidu.com/web/welcome/login

image.png

2.登录后进入管理 >账户管理 > 网站列表 > 新增网站


image.png

3.录入网站信息后保存


image.png

4.代码管理 > 代码获取 > 复制代码


image.png

5.在代码管理 > 单页应用设置 > 启用 > 保存，启用单页应用数据统计模式


image.png

第二步：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>
        <!-- built files will be auto injected -->
        
        <% if (process.env.NODE_ENV === 'production' ) { %>
        <script>
            var _hmt = _hmt || [];
                        // window._hmt = _hmt; // 修改为window 全局变量
            (function() {
              var hm = document.createElement("script");
              hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxxxxxxxx";//此处请替换你的站点id
              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

打包发布一下，然后就可以看到每一个路由跳转都可以统计到了！


image.png

1
第三步：代码安装检查
回到百度统计平台 > 管理 > 代码管理 > 代码安装检查 > 开始检查，检查结果显示“代码安装正确”表示成功了


image.png

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

image.png

2.进入流量分析 > 实时访客还能看到一些细节数据


image.png

百度统计的代码一直显示未生效

image.png

但是在其他网页中直接输入，就提示安装成功


image.png

这个估计是百度统计的小bug，过个两个小时再来检测，就变成已生效了。

vue项目section25https

有关vue 项目添加百度统计及常见问题的更多相关文章

  1. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

    当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

  2. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  3. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

    如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  4. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  5. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  6. ruby - 续集在添加关联时访问many_to_many连接表 - 2

    我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以

  7. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  8. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  9. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

  10. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题，我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

随机推荐