前言

如果你想知道你的访问者来自哪里，他们在网站上看到了什么，哪些页面很受欢迎，哪些流量得到了更好的转换效果，自己操作的话，你可能会花费大量的时间和费用在错误的关键词优化和错误的广告上以及错误的受众。自此，谷歌分析（Google Analytics）绝对可以帮助你！

什么是Google Analytics？

Google Analytics（简称GA）是google提供的网站数据分析工具，可以对目标网站进行访问数据统计和分析，也可以用来做交互埋点和业务层面的数据统计和分析，例如一个网站的uv、pv、页面停留市场、页面打开速度、某一个按钮的点击次数，访问页面用户的设备类型、浏览器类型等多种数据均可获取。是目前做网站数据统计分析较好的工具之一；

接GA需要什么条件，应该怎样接？

因为GA是一个在前端进行上报埋点的工具，所以主要条件是：

1.具有用户访问的前端网页应用，客户端可以使用Fabric或者日志手动埋点来解决

2.有条件联通外网环境，可以上报数据

4.在ga建立对应的媒体与视图

5.配置对应视图的过滤器

6.在前端应用中插入包含跟踪ID的跟踪代码

7.通过实时菜单验证跟踪代码插入成功

那我们该怎么接入呢？

1.vue

vue官方文档：https://matteo-gabriele.gitbook.io/vue-gtag/

gtagjs: https://developers.google.com/analytics/devguides/collection/gtagjs/pages

vue ga 快速接入

npm i vue-gtag

import Vue from 'vue'

import VueRouter from 'vue-router'

import VueGtag from 'vue-gtag'

const Home = { template: 'home' }

Vue.use(VueRouter)

const router = VueRouter({ mode: 'history', routes: [ { path: '/', component: Home } ]})

Vue.use(VueGtag, {

    config: { id: 'xxxxx' },

    appName: 'name', // 应用名

    pageTrackerScreenviewEnabled: true,

    onAfterTrack (to, from) { // 配置路由切换上报数据

            Vue.$gtag.config({

                page_title: to.name || to.path, // 网页的标题

                page_path: to.fullPath // 网页的路径

       })

    } // ... 其他配置

}, router)

// app specific code

new Vue({

    router,

    ender: h => h(App)

}).$mount('#app')

2.react

自主学习

学习可以分成3个阶段：0基础水平（毛都不会）、略懂皮毛（能监测到转化率）、中级水平（会制作你自己的自定义报告）

Google Analytics（分析）学院（https://analytics.google.com/analytics/academy）提供免费的在线课程，包括“入门知识”、“高级课程”和“360系列入门使用”。“入门知识”包括一些数据分析的基本理论，GA系统基本操作指导以及数据报告分析等。“高级课程”讲解定制话的数据收集和分析方法，以及再营销工具的简介。“360系列入门使用”则是GA“VIP用户”的“VIP课程”。

每门课程按单元和课拆分，每一节课则会以视频或DEMO引导操作的方式讲解，同时也会有问答选择或操作的联系。每个单元结束会有一个十道题的小测试，完成并通过所有单元的测试，便可以获得该门课程的结业证书。在完成“入门知识”和“高级课程”，还可以参加Academy for Ads的Google Analytics（分析）个人资格认证考试。