前言

众所周知，做电商都知道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 = 1a.src = gm.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-buttontype="danger"plain@click="addCar()"v-loading="isLoadingAddCar">Add to cart</el-button>
<script>export default {data(){return{isLoadingAddCar:false,}},methods:{addCar() {this.isLoadingAddCar = truelet 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 = falsethis.$refs['add-success'].dialogVisible = truethis.$refs['add-success'].carNum = res.datathis.form.quantity = 1this.$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,百度统计的功能

结束语

在写这个功能的时候由于对新框架不是很了解，所以折腾的时间比较久，而且也踩了很多坑，在加上文档没有看全面，有的方法自己不知道，所以记录下来，以后慢慢学习使用。

vue-nuxt-ssr 做谷歌，百度统计以及google,facebook埋点总结相关推荐

cookie 以及百度统计，google analytics对cookie的使用
1.cookie的定义,及与session的区别 cookie 注意是指某些网站为了辨别用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密),而session是存储在服务器端 ...
html加上百度统计,vue单页面应用加入百度统计
版权声明:本文为CSDN博主「钟文辉」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明. 原文链接:https://blog.csdn.net/qq_39753974/ ...
vue项目中加入百度统计
最近,在做本博客的改版,前台使用Vue,后台使用thinkphp6,做到前后分离.做百度统计的时候,遇到一系列问题,通过全方位查找资料,终于解决问题,本文主要记录一下解决Vue项目中,加入百度统计的具 ...
网站分析平台：百度统计、谷歌统计、网数星，统计平台怎样选择？
当你拥有个人博客或个人网站时,你一定需要一个平台来分析你的网站状况.之前我在法国只是使用 Google Analytics,后来回国发现这个平台在国内受限制了,于是我找到了百度统计,目前我同时使用这三 ...
Vue+百度统计实现网页的PV和UV统计
目录什么是PV和UV? 百度统计 VUE 验证安装查看统计拓展什么是PV和UV? 这里我懒得打字了,直接百度扒过来吧,这个了解知道是啥就行百度统计首先你要有个百度账号,自己测试的时候可以用 ...
django+vue+nginx+frp搭建漫画网站之接入谷歌统计和百度统计（三）
地址:http://www.iewoai.com/ 1.背景书接上文,打算监控网站的流量等访问情况,一开始打算用matomo,但是看了视频后发现直接接入谷歌统计和百度统计是一种更方便省事的手段.(那 ...
vue加百度统计代码（亲测有效）
申请百度统计后,会得到一段JS代码,需要插入到每个网页中去,在Vue.js项目首先想到的可能就是,把统计代码插入到index.html入口文件中,这样就全局插入,每个页面就都有了;这样做就涉及到一个问 ...
Nuxt配置百度统计，并公开统计解决
文章优先发布在个人博客,欢迎访问小站 https://www.xdx97.com/article?bamId=643100658550964224 1.Nuxt配置百度统计 1-1:配置插件 /** ...
vue项目添加百度统计
第一步:准备工作 1.使用百度账号登录百度统计平台(没有百度账号先注册一个) https://tongji.baidu.com/web/welcome/login 2.登录后进入管理 >账户管理 ...
【Vue】16.vue项目里引入百度统计
参考官网:百度统计开放平台百度统计最近往项目里面引入百度统计,也是在网上查了各种资料,把百度统计的官网api又好好的看了一下,顺着文档的步骤,一步一步走下来,其实还蛮简单的,首先先在百度统计注册一 ...

vue-nuxt-ssr 做谷歌，百度统计以及google,facebook埋点总结

前言

第一步：

第二步：

第三步：那么同理，`facebook`的统计脚本和埋点也是这么引入

第四步：百度统计也是如此引

第五步：最后在`nuxt.config.js`中的`plugins`下引入这几个统计的js文件

结束语

vue-nuxt-ssr 做谷歌，百度统计以及google,facebook埋点总结相关推荐

最新文章

热门文章

vue-nuxt-ssr 做谷歌，百度统计以及google,facebook埋点总结

前言

第一步：

第二步：

第三步：那么同理，facebook的统计脚本和埋点也是这么引入

第四步：百度统计也是如此引

第五步：最后在nuxt.config.js中的plugins下引入这几个统计的js文件

结束语

vue-nuxt-ssr 做谷歌，百度统计以及google,facebook埋点总结相关推荐

最新文章

热门文章

第三步：那么同理，`facebook`的统计脚本和埋点也是这么引入

第五步：最后在`nuxt.config.js`中的`plugins`下引入这几个统计的js文件