vue项目中使用Google Analytics （谷歌统计）

vue项目中如何使用Google Analytics （谷歌统计）

首先，Google Analytics 可以为网站、Web 应用、移动应用和联网设备设置和自定义衡量机制。并提供各种 API,帮助使用者收集、配置和报告用户与应用的在线内容进行互动的数据！

在vue项目中使用Google Analytics

当你需要在vue项目中使用Google Analytics去收集记录一些用户的行为，方便对系统进行改进，可以按如下步骤：

Google Analytics准备 ；
（1）进入Google Analytics，注册/登录你的账号
点击左下角管理，进入管理页面后选择媒体资源设置，记录跟踪 ID(跟踪ID是只有设置了高级设置才会有的，具体参考官网没有跟踪id)；
在vue项目的index.html文件中引入，注意的是得再head结束标签前引入；

 (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-XXX', 'auto'); // 将`UA-XXX`换成自己的媒体资源idga('send', 'pageview');

在vue项目的main.js文件中引入；

router.afterEach((to, from) => {ga('set', 'page', to.path)ga('send', 'pageview')
})

要对用户某个操作进行记录，可以通过如下操作；
（1）定义公共方法


// 谷歌分析事件记录
export function behavior(action, label, value) {if (value === undefined) {window.ga && window.ga('send', 'event', 'category', action, label)} else {window.ga && window.ga('send', 'event', 'category', action, label, value)}}

（2）全局注册此方法

Vue.prototype.$behavior = behavior;

（3）用户操作时触发

this.$behavior('点击数', '记录', '+1')

点击数据流，选择网站，输入相应的数据并创建；

注意，Google Analytics有延时，不会立马有数据展示

vue项目中使用Google Analytics （谷歌统计）相关推荐

Vue项目和Tauri接入Google Analytics谷歌统计流程
Google Analytics官网:https://analytics.google.com/ vue-gtag官网:Get started - vue-gtag 先要在Google Analyti ...
Vue 自定义指令上报 Google Analytics 事件统计
发现问题一般前端开发离不开数据统计,我们经常需要接入统计服务以方便运营,例如现在需要统计一个按钮 <template><button @click="handleClic ...
前端监控--vue项目中使用友盟统计监控
在项目的使用过程中,不可避免的会出现各种奇奇怪怪的报错,有的可能会导致项目程序崩溃无法运行,但是我们作为开发人员是不会立刻知道这种突发情况的,所以我们需要搜集程序的报错信息,及时解决错误,提高项目的稳 ...
vue项目中加入百度统计
最近,在做本博客的改版,前台使用Vue,后台使用thinkphp6,做到前后分离.做百度统计的时候,遇到一系列问题,通过全方位查找资料,终于解决问题,本文主要记录一下解决Vue项目中,加入百度统计的具 ...
vue项目中，用iframe嵌套其他页面在IE浏览器打开空白而在谷歌打开正常的问题
问题在vue项目中,某个页面里面用iframe嵌套了另一个vue项目的一个页面,在谷歌浏览器中打开,iframe的内容正常显示:在ie浏览器中打开,iframe的内容是空白的,没有报错. 原因用的 ...
Vue项目中tinymce富文本的安装以及配置
Vue项目中tinymce富文本的安装以及配置对于目前网上存在的许多富文本插件中,个人还是觉得tinymce相对比较强大一些.在使用配置的过程中,可能会出现配置不完全,导致使用不了的情况,下面把我个 ...
vue项目中实现语音队列的依次播放
vue项目中实现语音队列的依次播放需求分析通过长链接接收后台返回的消息数据,并进行语音的依次播放完整.长链接和语音播放功能在以往的文章中都有介绍.再次我们主要着重介绍语音依次播放的功能. 那怎样实 ...
Vue项目中实现用户登录及token验证
一.什么是token token的意思是"令牌",是服务端生成的一串字符串,作为客户端进行请求的一个标识.当用户第一次登录后,服务器生成一个token并将此token返回给客户端, ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

vue项目中使用Google Analytics （谷歌统计）

vue项目中如何使用Google Analytics （谷歌统计）

在vue项目中使用Google Analytics

vue项目中使用Google Analytics （谷歌统计）相关推荐

最新文章

热门文章