关键词:
前言
众所周知,做电商都知道seo的重要吗,最近在用vue+nuxt.js
做跨境电商时就有一个需求是要做谷歌的统计和埋点以及facebook的统计和埋点。因为对这个框架不是很熟悉,所以好多文档也不是很清楚,这样就导致做的过程中很费劲。以下就记录一下是如何做埋点和统计的。
第一步:
-
1,首先,在官方文当中有介绍到如何集成google统计分析服务,这里就不详细介绍了,这里主要介绍一下如何使用google做网站的埋点。
-
2,做谷歌埋点我是参考的谷歌的埋点的官方文档,再加上其他的一些文档,这里把官方文档的链接贴出来。
Google Analytics.js 谷歌分析,统计,埋点网址 -
3, 如果是在没有做
ssr - seo - nuxt
的项目中直接在index.html
中引入analytics.js
就好了。如下图官网中所说的一样。
-
4,但是在
nuxt.js
就不能这么做了,就要用官网中介绍的方法,在第二步中详细介绍
第二步:
- 1,首先要在
plugins
文件夹下新建一个ga.js
(这里的ga.js是自己命名的哦)文件,这个js 主要是以nuxt的方式引入Analytics.js
- 2,这样引进来只适合用户统计分析,这里边的全局函数
ga
在项目中是找不到的,只能在当前文件使用。
//这句是只有生产环境才会统计,为了方便测试一开始从测试环境也要使用
// if (process.client && process.env.NODE_ENV === 'production')
if (process.client)
/*
** 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', 'UR-1323268912-1', 'auto') //这里要填写你自己的google代码 code
export default (
app:
router
,
store,
) =>
/*
** 每次路由变更时进行pv统计
*/
// if (process.client && process.env.NODE_ENV === 'production')
if (process.client)
router.afterEach((to, from) =>
/*
** 告诉 GA 增加一个 PV
*/
ga('set', 'page', to.fullPath)
ga('send', 'pageview')
ga('require', 'ec');
)
- 3,要是在项目中再加入
google埋点
的功能就需要使用到nuxt.js
的另一个方法inject
方法了。
这里没用过inject
方法的应该是一脸懵逼,先把官方文档nuxt-inject方法贴出来,
官方说的很详细了,直接用这个方法在之前新建的ga.js
中注入全局的函数,然后在项目中使用,方法如下
上边的引入Analytics.js跟上边一样,只不过在这里在注入一个全局的函数,看下边的inject就是了。
export default (
app:
router
,
store,
, inject) =>
/*
** 每次路由变更时进行pv统计
*/
// if (process.client && process.env.NODE_ENV === 'production')
if (process.client)
inject('hello', msg => console.log(`Hello $msg!`))
// googlePoint 注入的函数名字,argume 传入的参数
inject('googlePoint', argume =>
console.log(argume);
//在当前这个js内是可以拿到ga这个google默认分发出来的全局函数的
ga('ec:addProduct',
'id': argume.productId, // Product ID (string).
'name': argume.productName, // Product name (string).
'price': argume.price,
);
ga('set', 'currencyCode', argume.currencyCode);
ga("ec:setAction", "add");
)
router.afterEach((to, from) =>
/*
** 告诉 GA 增加一个 PV
*/
ga('set', 'page', to.fullPath)
ga('send', 'pageview')
ga('require', 'ec');
)
- 4,接下来就是在项目中使用了,这里就举一个添加购物车埋点的例子
<template>
<el-button
type="danger"
plain
@click="addCar()"
v-loading="isLoadingAddCar"
>Add to cart</el-button
>
<script>
export default
data()
return
isLoadingAddCar:false,
,
methods:
addCar()
this.isLoadingAddCar = true
let google_price = "";
//这里是判断是否为折扣价的,就是为了传给谷歌埋点的参数
if (this.skuSalesVal)
google_price = (this.skuSalesVal.price / 100).toFixed(2);
else
google_price = (this.productBasicVo.minPrice / 100).toFixed(2);
let national_google_currency = JSON.parse(localStorage.getItem('national_currency'));
let google_facebook_params =
productId:this.form.productId,
productName:this.productBasicVo.name,
price:google_price,
currencyCode:national_google_currency.name,
this.$hello('这里是测试inject'); //这里也是对应ga.js里边的inject注入的hello方法
//这就是在调用在ga.js中全局注入的googlePoint,方法
this.$googlePoint(google_facebook_params);
//这就是在调用在facebook.js中全局注入的googlePoint,方法
this.$faceBook_point(google_facebook_params);
this.$axios
.post('/web/api/product/add-cart', this.form)
.then((res) =>
this.isLoadingAddCar = false
this.$refs['add-success'].dialogVisible = true
this.$refs['add-success'].carNum = res.data
this.form.quantity = 1
this.$store.dispatch('shopCar/getCarList')
)
.catch(() =>
this.isLoadingAddCar = false
)
,
</script>
</template>
这里是一次更新,最近发现谷歌的埋点不管用了,经过排查才发现是谷歌的收录和接受埋点的js更改了。
接下来会介绍更新后的埋点怎么做。
- 1,首先安装
vue-gtag
执行命令npm install vue-gtag --save
- 2,在
plugins
文件夹下创建gtag.js
,内容如下:
import Vue from 'vue'
import VueGtag from 'vue-gtag'
Vue.use(VueGtag,
config:
id: 'G-WCNCFN42QT'
)
export default (
app:
router
,
store,
, inject) =>
if (process.client)
//当用户进行登录
inject('googleLogin', params =>
gtag('event', 'login', params);
);
//当用户进行注册
inject('googleRegister', params =>
gtag('event', 'register', params);
);
//当用户查看商品时触发
inject('googleViewPromotion', params =>
gtag('event', 'view_promotion', params);
);
//当用户开始结帐时触发
inject('googleBeginCheckout', params =>
gtag('event', 'begin_checkout', params);
);
- 3,其他的跟老的ga.js收录方法一致,也是用inject方法分发出来,在项目中使用。
第三步:那么同理,facebook
的统计脚本和埋点也是这么引入
在plugins下边新建facebook.js
if (process.client)
/*
** facebook 埋点
*/
!function (f, b, e, v, n, t, s)
if (f.fbq) return; n = f.fbq = function ()
n.callMethod ?
n.callMethod.apply(n, arguments) : n.queue.push(arguments)
;
if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0';
n.queue = []; t = b.createElement(e); t.async = !0;
t.src = v; s = b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t, s)
(window, document, 'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '44688333333333'); //这里要填写你自己的facebook代码
export default (
app:
router
,
store,
, inject) =>
/*
** 每次路由变更时进行pv统计
*/
if (process.client)
inject('faceBook_point', argume =>
console.log(argume);
fbq('track', 'AddToCart',
content_type: 'product',
content_ids: argume.productId,
content_name: argume.productName,
currency: argume.currencyCode,
value: argume.price,
);
)
router.afterEach((to, from) =>
/*
** 告诉 GA 增加一个 PV
*/
fbq('track', 'PageView');
)
第四步:百度统计也是如此引
在plugins下新建
baidu.js
文件
if (process.client)
/*
** 百度统计
*/
var _hmt = _hmt || [];
(function ()
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?888888888888888"; //这里填写你自己的百度代码
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
)();
export default (
app:
router
,
store,
) =>
/*
** 每次路由变更时进行pv统计
*/
if (process.client)
router.afterEach((to, from) =>
var _hmt = _hmt || [];
(function ()
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?455234523523523543";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
)();
)
第五步:最后在nuxt.config.js
中的plugins
下引入这几个统计的js文件
export default
plugins: [
src: '@/plugins/ga.js',
mode: 'client' //只在客户端生效
,
src: '@/plugins/facebook.js',
mode: 'client'
,
'@/plugins/jumpBaseUrl',
],
这样就实现了谷歌,facebook,百度统计的功能
结束语
在写这个功能的时候由于对新框架不是很了解,所以折腾的时间比较久,而且也踩了很多坑,在加上文档没有看全面,有的方法自己不知道,所以记录下来,以后慢慢学习使用。
jquery做谷歌地图!
//http://code.google.com/p/jmaps/ 查看详情
javascriptjquery做谷歌地图!(代码片段)
怎么做谷歌的“结构化数据”?
为什么想着写谷歌结构化数据呢,因为遇到了,公司要求,网站必须做amp+结构化数据,没办法,只能研究这是谷歌结构化数据官网的地址,但需要FQ才能访问,https://developers.google.com/search/docs/advanced/structured-data/articl 查看详情
.Net Control 做谷歌浏览器对接
】.NetControl做谷歌浏览器对接【英文标题】:.NetControltodoGoogleChromeDocking【发布时间】:2010-10-0820:19:14【问题描述】:我喜欢GoogleChrome允许您从窗口中抓取标签以创建其他窗口的方式。有谁知道是否有办法在我的.Net应用程序中进... 查看详情
国际化产品的百度统计与谷歌统计
...里面的事件分析根据国内/国外进行统计,海外版的使用谷歌统计,国内版的采用百度统计。采用的是同一套工程代码,所以只需要写一个方法,里面根据配置文件的平台属性来做区分是百度统计还是谷歌统计,代码总结如下:;(... 查看详情
搜索引擎优化和谷歌付费广告
经常看到有人在讨论到底做谷歌关键字广告GoogleAdwords和搜索引擎优化SEO的问题。首先,这二者都是是当前最重要的营销推广手段。您所知道的几乎所有财富500强或者身边的中小型公司都已经把公司营销推广转到搜索引擎上。我... 查看详情
谷歌amp和百度mip是什么鬼?
首先我们来看定义:谷歌AMP(AcceleratedMobilePages,加速移动页面)是Google推出的一种为静态内容构建web页面,提供可靠和快速的渲染,加快页面加载的时间,特别是在移动Web端查看内容的时间。百度MIP(MobileInstantPages-移动网页加... 查看详情
百度和谷歌的收录
百度的收录比谷歌慢,当然可以理解为百度在收录上较为谨慎。 但是我发现一个问题,就在昨天,我用站长工具查各大搜索引擎对得闲佬设计的收录情况,发现百度只收录了2个页面,而谷歌收录了22个页面。如果作为站... 查看详情
百度地图定位记录
...度地图是我们做开发要经经常使用到的,在天朝。我们望谷歌而兴叹!!!首先我们须要从百度地图API下载相应的API JAR 以及SO文件,防止百度官网抽风,俺机智的把里面的东西先所有下载出来给出下载链接例如以下:百... 查看详情
openlayer3-加载第三方地图,百度,谷歌等
OpenLayers3之加载地图摘要在浏览器中加载一幅地图,而且是可交互(包含缩放、平移、查询和分析等高级功能)的,该怎么做呢?我们当然知道要想网页中的内容是动态的,可交互的,要使用JavaScript,地图应用也不例外,不过要... 查看详情
高德地图腾讯地图谷歌中国区地图与百度地图坐标系
...可能并不是在同一个坐标系下。高德地图、腾讯地图以及谷歌中国区地图使用的是GCJ-02坐标系百度地图使用的 查看详情
百度统计代码安装问题php网站
如题由于网站整体都是PHP,没有html格式的文档并且首页有几个调用的文件(调用的文件也是PHP)所以不存在</body>就算将代码安装进去放在页尾,DW会提示语法错误。问题很严重!跪求解决方案!20大洋奉上参考技术A1、收购... 查看详情
百度统计站长统计
这是什么? 查看详情
如何为网站添加百度统计功能
1获取百度统计代码首先登录tongji.baidu.com,在百度统计中申请账号,申请登录后,在管理中加入需要统计的网站地址,添加完成后百度会生成统计代码,不同的网站百度生成的代码是不一样的。在百度统计的管理界面,在需要统... 查看详情
记一次百度面试题
一面:如何获取radio值 手写ajax实现,以及同步异步控制 Vue生命周期 es6promise(给出三道题,让说结果) Todolist(手写) 二面: cmd(手写代码实现核心代码,对,你没听错)amd router(手写代码... 查看详情
百度统计代码
//百度统计 var_hmt=_hmt||[]; (function(){ varhm=document.createElement("script"); hm.src="https://hm.baidu.com/hm.js?xxxxxxxxxxxxx"; vars=document.getElementsByTagName("script")[0]; s.parentNode 查看详情
互联网产品怎么做数据埋点
...词,在电脑网站出来之后就有统计工具,站长们很熟悉的谷歌、百度统计等工具,通过在HTML页面中嵌入它们提供的js代码实现数据采集。多说几句,无论谷歌、百度还是其它的Web页 查看详情
百度下载给的termux是个坑
...有两个版本,0.32以及0.64。百度提供0.32的下载,太坑爹。谷歌则是0.64的下载。32版uname-m识别为armv8l,绝对影响你进行其它linux的部署。通过atilo脚本会部署armfhp分支的linux。执行容器直接报错“prootinfo:vpid1:terminatedwithsignal11”。原... 查看详情