谷歌统计 Google Analytics使用gtag.js 进行数据统计（VUE）
梁浩涆
版本
谷歌统计有两个版本：
早期版本 Google Analytics（分析）(Universal Analytics)，获取的是跟踪ID，以“UA-”开头；
新版本Google Analytics（分析）4，获得的是媒体资源的衡量ID，以“G-”开头；
今天使用的Google Analytics（分析）(Universal Analytics)；
用于实施衡量的库和 SDK有两个：
analytics.js
gtag.js
今天使用的是gtag.js
1.全局代码
UA-XXXXX-X是自己谷歌统计后台中获取（管理-媒体资源-跟踪信息-跟踪代码-跟踪ID）
将以下代码放在index.html的head标签中
<head>
...
...
...
<!--谷歌统计 全局网站代码 Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-X"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-XXXXX-X');
</script>
</head>
由于是单页面，在路由中监听路由变化
router.afterEach((to, from) => {
// 谷歌统计,路由监听
window.gtag('config', 'UA-XXXXX-X', {
page_title: to.name,//页面标题
page_path: to.path,//页面路径
// page_location: location
})
})
2.统计事件，向 Google Analytics（分析）发送数据
在自己的组件方法中设置跟踪代码
http.post('xxxx').then((res) => {
this.addGoogleAnalytics()//谷歌统计事件
})
//Google统计
addGoogleAnalytics() {
let eventCategory = '注册'//事件类别
let eventAction = 'PC端注册'//事件操作
let eventLabel = '注册人电话号码'//事件标签
let eventValue = 1//事件数量
window.gtag('event', eventAction, {
event_category: eventCategory,
event_label: eventLabel,
value: eventValue,
send_to: 'UA-XXXXX-X'//跟踪ID
})
}
3.追踪电子商务
将代码放在你要统计的方法中，传入你要统计的数据，
// 追踪电子商务
window.gtag('event', 'purchase', {
"transaction_id": 112233,//交易 ID（例如 1234）
"affiliation": '支付宝购买',//发生此交易的商店或联属机构（例如 Acme Clothing）。
"value": 1000,//与这笔交易关联的总收入或总计金额（例如 11.99）。 此值包含运费、税费或其 他要计入 revenue 的总收入调整值。
"tax": 0,//指定交易的税款总额（例如 1.29）
"shipping": 0,//指定交易的总运费（例如 5）
// "currency": "USD",//货币类型
"items": [
{
"id": 123456,//交易 ID。此 ID 将商品与其所属的交易关联在一起（例如 1234）。
"name": '粉色绒毛小兔',//商品名称（例如粉色绒毛小兔）。
"price": 100,//每件商品的单价（例如 11.99）。
"quantity": 1,//在交易中购买的商品数量。 如果传递到此字段的是非整数值（例如 1.5），将舍入为最接近的整数值。
// "list_name": "Search Results",
// sku:'',//指定 SKU 或商品代码（例如 SKU47）。
// "brand": "Google",
// "category": "Apparel/T-Shirts",//商品所属类别（例如聚会玩具）。
// "variant": "Black",
// "list_position": 1,
}
]
});
以上代码配置完成后，等待30分钟-1小时，有数据后即可在后台看到
参考链接：
Google Analytics（Google 统计）使用
类似资料：