Nuxt简单使用Google/Baidu Analyze
博客地址: https://www.seyana.life/post/17
具体账号注册方法和绑定方法可以去到官网下,都有相应的指南,
一般设置也比较简单,只需要把对应js代码添加到head中即可,
这里主要是在Vue中使用Nuxt plugin添加这些信息,并且在后台管理analyze id。
百度analyze,其中baidu_analyze是我的id
/* eslint-disable */
export default ({
app,
store
}) => {
/**
* 只在生产环境使用
*/
if (process.env.NODE_ENV === 'development') return
const options = store.state.option.data
//查看是否设置id
if (!options || !options.baidu_analyze || options.baidu_analyze === '')
return
const baidu_analyze = options.baidu_analyze
/*
** baidu 统计分析脚本
*/
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?" + baidu_analyze;
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
/*
** 每次路由变更时进行pv统计
*/
app.router.afterEach((to, from) => {
var _hmt = _hmt || [];
(function () {
document.getElementById('baidu_tj') && document.getElementById('baidu_tj').remove();
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?" + baidu_analyze;
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
})
}
google analyze在nuxt官网上有教程,这里只需要把UAxx改成自己的,或者从接口得到的id即可
/*
** 只在生产模式的客户端中使用
*/
if (process.client && process.env.NODE_ENV === 'production') {
/*
** Google 统计分析脚本
*/
(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-XXXXXXXX-X', 'auto')
}
export default ({ app: { router }, store }) => {
/*
** 每次路由变更时进行pv统计
*/
router.afterEach((to, from) => {
/*
** 告诉 GA 增加一个 PV
*/
ga('set', 'page', to.fullPath)
ga('send', 'pageview')
})
}
之后只需要Nuxt.config中添加plugin,用client模式可以使插件只在客户端运行
plugins: [
{ src: '~plugins/ga.js', mode: 'client' },
{ src: '~plugins/baidu.js', mode: 'client'},
]
谷歌在设置好analyze之后,还可以绑定Google search control,在绑定了analyze的情况下,直接验证即可。
Nuxt简单使用Google/Baidu Analyze的更多相关文章
- 我在阿里这仨月 前端开发流程 前端进阶的思考 延伸学习的方式很简单:google 一个关键词你能看到十几篇优秀的博文,再这些博文中寻找新的关键字,直到整个大知识点得到突破
我在阿里这仨月 Alibaba 试用期是三个月,转眼三个月过去了,也到了转正述职的时间.回想这三个月做过的事情,很多很杂,但还是有重点. 本文谈一谈工作中遇到的各种场景,需要用到的一些前端知识,以及我 ...
- [windows篇] 使用Hexo建立个人博客,自定义域名https加密,搜索引擎google,baidu,360收录
为了更好的阅读体验,欢迎阅读原文.原文链接在此. [windows篇] 使用Hexo建立个人博客,自定义域名https加密,搜索引擎google,baidu,360收录 Part 2: Using G ...
- 服务端渲染和nuxt简单介绍
概述 最近研究了一下服务端渲染,有一些心得,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: Vue SSR指南 nuxt.js官网 服务端渲染介绍 服务端渲染简单来说,就是分别对项目用we ...
- [ubuntu篇] 使用Hexo建立个人博客,自定义域名https加密,搜索引擎google,baidu,360收录
为了更好的阅读体验,欢迎阅读原文.原文链接在此. Part 1: Using Github Pages and Hexo to manage personal blogs. Series Part 1 ...
- 构建一个简单的 Google Dialogflow 聊天机器人【上】
概述 本教程将向您展示如何构建一个简单的Dialogflow聊天机器人,引导您完成Dialogflow的最重要功能.您将学习如何: 创建Dialogflow帐户和第一个Dialogflow聊天机器人, ...
- php+google/baidu翻译接口
<?php /** * @link http://www.joinf.com * @copyright Copyright (C) 2017 joinf.com. All rights rese ...
- 简单使用Google Analytics监控网站浏览行为
之前对网页做用户转化率调查这块,找到了谷歌GA事件,现在有时间对使用方法和遇到问题做个简单记录.官方文档其实也介绍的比较清楚,可以查看官方文档. 首先,在官网申请UA-id,然后在主页加入如下代码: ...
- Google和Baidu的站内搜索代码
<!-- SiteSearch Google --> <form method="get" action="http://www.google.com/ ...
- Fedora 18安装Google输入法和云拼音
由于sunpinyin的词库选词太不准,网友推荐在Fedora 18下使用谷歌拼音及云拼音,于是想要尝试下怎么样.由于fedora 源中谷歌拼音所以选择自行编译,做下记录以备份. #安装fcitx $ ...
随机推荐
- mysql时区问题解决方案
#url添加参数serverTimezone=UTC 1.jdbc:mysql://127.0.0.1:3306/mymusic?useUnicode=true&characterEncodi ...
- 2010提高组-C]关押罪犯(扩展域并查集
题:https://www.cometoj.com/problem/0073 #include<bits/stdc++.h> using namespace std; ; struct n ...
- 做成像的你不得不了解的真相2-灵敏度和QE
科研级相机的灵敏度由三个主要参数决定: 探测器的QE, 像元尺寸和相机噪声. 后两项我们以后再做专题讨论.这期先讲讲小编认为顶顶重要,看起来最容易理解,但是其实还有些奥妙的QE. QE-量子效率 QE ...
- Qt QLabel show 显示图像、填充、缩放
主要成员函数: 1.void setText(QString); //设置label框内的文本. 2.void hide(); //隐藏label框. 3.void setBuddy(QWidget* ...
- 方差分析|残差|MSA/MSE|Completely randomized design|Randomized block design|LSD|主效应|intercept|多重比较|
符合方差分析的三个条件: 残差=实际值-预测值(其实是均值). 在原假设下,MSA的期望会等于MSE的期望:在备选假设下,MSA的期望会大于MSE的期望,所以MSA/MSE的取值范围在(1,正无穷), ...
- in+sb's+基数词的复数形式|UFO|the minutes|
Hawking became world-famous in ________. A. his thirties in the 1970's B. the thirties in his 1970 ...
- Mysql分区,分库和分表
作者说的非常清楚了,感谢.地址为:http://haitian299.github.io/2016/05/26/mysql-partitioning/. 本人项目实践,使用sharding-jdbc进 ...
- deeplearning.ai 卷积神经网络 Week 1 卷积神经网络
1. 传统的边缘检测(比如Sobel)手工设计了3*3的filter(或者叫kernel)的9个权重,在深度学习中,这9个权重都是学习出来的参数,会比手工设计的filter更好,不但可以提取90度.0 ...
- java和javascript日期详解
** java,js日期转换:** <Excerpt in index | 首页摘要> java的各种日期转换 <The rest of contents | 余下全文> 日期 ...
- gitbook安装及初步使用
gitbook安装 https://www.jianshu.com/p/421cc442f06c https://blog.csdn.net/lu_embedded/article/details/8 ...