angular1 和 vue2.0 接入ga

开发之路永无止境
732 阅读1分钟

官网developers.google.com/analytics/d…

一、angular1接入

1、设置全局代码段：

在app.js 文件中angular.module("app").controller   构造器里创建脚本：

// GA_TRACKING_ID 替换为接收您数据的 Google Analytics 媒体资源 ID
(function(i,s,o,g,r,a,m){
i['dataLayer']=i['dataLayer'] || [];i[r]=i[r]||function(){
i['dataLayer'].push(arguments)},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.googletagmanager.com/gtag/js?id=GA_TRACKING_ID','gtag');
gtag('js', new Date());
gtag('config', 'GA_TRACKING_ID');


2、在app.js 文件中angular.module("app").controller 构造器设置路由监听

// 监听路由成功时触发
$rootScope.$on('$stateChangeSuccess', function (toState) {
  if（typeof gtag !== 'undefined'）{
      // GA_TRACKING_ID 替换为接收您数据的 Google Analytics 媒体资源 ID
     //gtag 使用 config 命令发送网页浏览，字段和 ga 类似:
     gtag('config', 'GA_TRACKING_ID', {
       page_path: toState.name    // page_path 网址的路径部分。此值应以斜杠 (/) 字符开头
    });
  }
}）


二、vue2.0 接入ga

1、创建gtag.js脚本文件

import router from '@/router'
// GA_TRACKING_ID 替换为接收您数据的 Google Analytics 媒体资源 ID
const GA_TRACKING_ID = 'GA_TRACKING_ID'
const { NODE_ENV } = process.env // 获取当前环境

if (NODE_ENV === 'production') { // 当为正式环境才执行脚本
(function(i,s,o,g,r,a,m){
i['dataLayer']=i['dataLayer'] || [];i[r]=i[r]||function(){
i['dataLayer'].push(arguments)},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.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`,'gtag');
gtag('js', new Date());
gtag('config', GA_TRACKING_ID);
//在全局前置守卫执行
router.beforeEach((to) => {
//gtag 使用 config 命令发送网页浏览，字段和 ga 类似:
gtag('config', GA_TRACKING_ID, {
page_path: to.path // page_path 网址的路径部分。此值应以斜杠 (/) 字符开头
});
})
}

// 也可以用try catch 包裹

try {
gtag('config', GA_TRACKING_ID, {
page_path: to.path // page_path 网址的路径部分。此值应以斜杠 (/) 字符开头
});
} catch (e) {
console.log(e.toString())
}

2、在mian.js文件导入gtag.js文件，会自动执行

import  './gtag.js'


三、vue项目中设置ga埋点统计

1、封装成一个js文件

// 单独设置一个js文件
function gaSendEvent (event) {
const action = event.eventAction || '', // 在 Google Analytics（分析）事件报告中显示为事件操作的字符串。
cosnt gtag = window.gtag // 获取gtag脚本
if (gtag) { // 存在脚本才执行
gtag('event', action, {
'event_category': event.eventCategory || '', // 显示为事件类别的字符串
'event_label': event.eventLabel || '', // 显示为事件标签的字符串
});
}
}

const gtagClick = {
positionEvent (value) {
gaSendEvent ({
eventCategory: '', // 显示为事件类别的字符串,必须填写Google Analytics对应的字符串
eventLabel: value, // 显示为事件标签的字符串
eventAction: '' // 在 Google Analytics（分析）事件报告中显示为事件操作的字符串,必须填写Google Analytics对应的字符串
})
}
}
export default {
gtagClick
}


2、在需要埋点的事件中导入并调用函数

import gtagClick from '../gtagClick.js'

// 在需要埋点的事件中调用
titleClick(titleName) {
gtagClick.positionEvent(titleName) // 或者 gtagClick.positionEvent('事件标签的字符串')
}



avatar
文章
阅读
粉丝