Google埋点

Question

参考资料：资料

一、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 里引入谷歌统计代码：

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-yourID', 'auto')
ga('send', 'pageview') // 是否要统计着陆页面访问，取决于你的需求，这个不一定需要，会和`router`统计有重复


// main.js 里，如果你使用了 vue-router
router.afterEach(function (to) {
  if (window.ga) {
    window.ga('set', 'page', to.fullPath) // 你可能想根据请求参数添加其他参数，可以修改这里的 to.fullPath
    window.ga('send', 'pageview')
  }
})

本文分享自作者个人站点/博客：https://blog.csdn.net/qq_16559905复制

如有侵权，请联系删除。

当一个行业中有一家企业开始开发手机应用，就会带动一批企业跟风。就像上汽开始做车享家，带动了长城的哈弗商城、东风的车巴巴等一批自营平台。自四大国有银行做手机App了，各种城商行、农商行、股份银行都开始开发移动端应用。

效果究竟好不好呢，其实大家看看豌豆荚的下载量基本就心里有数了，这是统计用户量的好方法，那如何统计活跃用户量呢，服务端会有每日的会话数，再进阶的，例如对于每一个页面的停留时间、用户跳转习惯等就需要通过埋点技术了。千万不要小看这些数据，它们直接决定了不同页面的广告定价以及用户的特征聚类。

以谷歌的埋点分析框架为例，在Firebase平台有一些预定义常用的事件及数据模型。在通过应用集成推送到前端各设备之后将收集到的事件回传个Firebase，再通过谷歌的Tag manager做事件归类并打标签，后续可以调用谷歌自己的分析工具Google Analytics做客群或页面分析，或将归类后的事件直接输出给Google Ads，使其对某一类特定标签（比如中产家庭的家庭主妇）进行定向广告输出。

最近有幸参加了阿里的一次分享会，了解到淘宝网的页面上有无数个埋点帮助后台做客群分析。

相对而言，阿里的技术总是先从自身平台出发，最终能走向市场化的产品并不多。谷歌就不一样，从社区扶持一些已经相当有用户基础的技术，然后根据业务场景做成客制化产品。Firebase有以下几大特点：

用户体验好：Firebase有良好的界面，完善的文档体系，谷歌的人员也会竭力倾听开发者的诉求；
价格优势：Firebase的基础版是免费的，后续根据用户的增长，可选择付费计划，线性有计划地增加数据库的投入。小编着实讨厌那种不知会用户，当用户达到一定数据量的时候，自动开始收费的无良厂家。

部署和维护省时省力，下面小编会简单就这点进行实践论述。

部署Firebase需要在本地安装通用的开发工具，例如VS Code或Node JS，然后就可以进入Firebase的网页控制台，创建一个Firebase的项目了。

由于是搭建在谷歌云平台上，因此服务的扩展也非常简单，通过按键操作就可以实现与Cloud Vision和谷歌的集成。

通过firebase init hosting命令就可以在本地创建出Firebase的物理框架。首先，firebase.json文件定义了项目的文件结构。

firebaserc文件是定义该项目的脚本文件；public文件夹下就是整个应用程序了，跟传统开发类似，需要先定义加载的模块以及SDK

通过以下脚本就可以实现与谷歌的集成身份验证：

function googleLogin() {

const provider = new firebase.auth.GoogleAuthProvider();

firebase.auth().sighInWithPopup(provider)

    .then(result => {

        const user = result.user;

        document.write('Hello ${user.displayName}');

        console.log(user)

    })

    .catch(console.log)

}

用户登录完成后，查看后台数据就可以看到用户的登录信息及在线状态。

在服务端管理界面可以通过各种方式与用户进行互动了。

在数据库界面就可以定义输入的标签，这里每个标签都可以在随后的tagmanager中用来做统计用。

Firebase的发布就更加简单了，通过firebase serve和firebase deploy就可以完成现有数据模型的公网发布。

Tag Manager可以对Firebase定义的标签进行实时统计汇总，并定义后续工作流。例如当某样商品的数量超过某一数值，就将其店主列入网红店主名单。

根据企业体量的不同，Tag Manager也提供了不同的标签解决方案，这里小编简单罗列下供读者朋友参考。