Vue-Analgtics 使用者文件翻譯（部分）
本部落格旨在個人筆記記錄。
一.1.開始 安裝 npm install vue-analytics --save 2.開始使用你的Vue應用程式,在main.js中加入以下程式碼 import Vue from 'vue' import VueAnalytics from 'vue-analytics'
Vue.use(VueAnalytics, { id: 'UA-XXX-X' //你的跟蹤id }) 3.可以通過兩種不同的方式使用api：
3.1.在元件範圍內 export default { name: 'MyComponent', methods: { track () { this.$ga.page('/') } } } 3.2.單獨匯入方法 import { page } from 'vue-analytics' export default { name: 'MyComponent', methods: { track () { page('/') } } } 4.跟蹤多個賬戶 傳遞多個跟蹤系統的字串陣列。 每次點選都會被觸發兩次：每次都有不同的跟蹤器名稱 import Vue from 'vue' import VueAnalytics from 'vue-analytics'
Vue.use(VueAnalytics, { id: ['UA-XXX-A', 'UA-XXX-B'] //你的跟蹤id }) 二.1.如何載入Google Analytics指令碼 （預設情況下，不需要任何東西：外掛為您完成所有操作！） 但是，在某些情況下，您可能希望避免自動載入analytics.js指令碼，因為： 1.也許你正在使用的框架已經為你做了 2.你真的無法從你的專案中刪除它 3.我無法想出的其他問題 因此，對於所有這些情況，可以讓外掛檢測是否已在您的html中添加了分析指令碼(checkDuplicatedScript) import Vue from 'vue' import VueAnalytics from 'vue-analytics' Vue.use(VueAnalytics, { id: 'UA-XXX-X', checkDuplicatedScript: true }) 或者只是禁用指令碼載入器（disableScriptLoader） import Vue from 'vue' import VueAnalytics from 'vue-analytics' Vue.use(VueAnalytics, { id: 'UA-XXX-X', disableScriptLoader: true }) 三.除錯 實現Google Analytics除錯庫。 請記住它僅用於除錯。 analytics_debug.js的檔案大小比analytics.js大。 Example: Vue.use(VueAnalytics, { id: 'UA-XXX-X', debug: { enabled: false, // default value trace: false, // default value sendHitTask: true // default value } }) 四.網頁跟蹤 網頁跟蹤是Google Analytics最重要的功能，您可以通過不同方式實現這一目標. 1.啟用頁面自動跟蹤: 跟蹤應用程式最簡單的方法是將VueRouter例項傳遞給外掛，讓它為您處理所有事情,如下: import Vue from 'vue' import VueRouter from 'vue-router' import VueAnalytics from 'vue-analytics' const router = new VueRouter({ router: // your routes }) Vue.use(VueAnalytics, { id: 'UA-XXX-X', //跟蹤id router })
2.手動頁面跟蹤: 標準方法是傳遞當前頁面路徑: this.$ga.page('/') 也可以作為物件文字傳遞： this.$ga.page({ page: '/', title: 'Home page', location: window.location.href }) 3.使用螢幕檢視進行自動跟蹤 通過將true傳遞給autoTracking物件中的screeview屬性，也可以使用自動跟蹤和螢幕跟蹤 Vue.use(VueAnalytics, { id: 'UA-XXX-X', autoTracking: { screenview: true } }) 4.禁用頁面載入時的網頁瀏覽量 頁面自動跟蹤在頁面載入時傳送網頁瀏覽事件，但可以禁用它 import Vue from 'vue' import VueRouter from 'vue-router' import VueAnalytics from 'vue-analytics' const router = new VueRouter({ router: // your routes }) Vue.use(VueAnalytics, { id: 'UA-XXX-X', router, autoTracking: { pageviewOnLoad: false } }) 5.禁用頁面自動跟蹤 要禁用自動跟蹤，我們只需刪除VueRouter例項，但如果您只需要在特定環境或情況下進行跟蹤，也可以禁用頁面自動跟蹤，如此: Vue.use(VueAnalytics, { id: 'UA-XXX-X', router, autoTracking: { page: false } }) 6.忽略頁面自動跟蹤上的路線 要禁用特定路由的自動跟蹤，您需要將一個字串陣列傳遞給外掛選項。 字串必須是路由名稱或路由路徑。 Vue.use(VueAnalytics, { router, ignoreRoutes: ['home', '/contacts'] }) 7.自動跟蹤自定義資料 當自動跟蹤可以傳遞具有自定義物件形狀的功能以用作跟蹤器時。pageViewTemplate將當前路由作為引數傳遞 Vue.use(VueAnalytics, { id: 'UA-XXX-X', router, autoTracking: { pageviewTemplate (route) { return { page: route.path, title: document.title, location: window.location.href } } } }) 還可以使用元物件為每個路徑新增自定義資料結構.(路由pageviewTemplate始終優先於全域性路由)。 const router = new VueRouter({ routes: [ { name: 'home', path: '/', component: {...}, meta: { analytics: { pageviewTemplate (route) { return { title: 'This is my custom title', page: route.path, location: 'www.mydomain.com' } } } } } ] }) 其他的請參考官網
五.事件跟蹤(具體使用請參考官網https://developers.google.com) 可以按照Google規範以不同方式實現事件跟蹤,以這個確切的順序傳遞引數,如下: this.$ga.event('category', 'action', 'label', 123) 另外物件文字也是可能的: this.$ga.event({ eventCategory: 'category', eventAction: 'action', eventLabel: 'label', eventValue: 123 })
六.1.螢幕跟蹤 可以使用screenview方法傳送螢幕匹配。 通過傳遞一個字串，它將通過傳送一個screenview事件並將字串作為screenName屬性來跟蹤頁面。 export default { name: 'MyComponent',
methods: { track () { this.$ga.screenview('home') } } } 2.螢幕自動跟蹤 通過將true傳遞給autoTracking物件中的screeview屬性，也可以使用自動跟蹤和螢幕跟蹤 Vue.use(VueAnalytics, { id: 'UA-XXX-X', autoTracking: { screenview: true } }) 七.跨域跟蹤 要啟用跨域跟蹤，您需要在配置物件的連結器陣列中新增連結。 Vue.use(VueAnalytics, { id: 'UA-XXX-X', linkers: ['example1.com', 'example2.com'] }) 八.異常跟蹤 1.異常跟蹤允許您測量應用程式中發生的崩潰或錯誤的數量和型別 可以使用try catch跟蹤單個異常 try { // some code that might crash } catch (error) { // handle your error here
// track the error with analytics // depending on the error you might want to check // if a `message` property exists or not const exception = error.message || error this.$ga.exception(exception) } 2.啟用異常自動跟蹤 也可以只啟用外掛異常自動跟蹤，外掛將為您完成所有操作 Vue.use(VueAnalytics, { id: 'UA-XXX-X', autoTracking: { exception: true } }) 3.錯誤日誌 當自動跟蹤錯誤日誌自動記錄在控制檯中時，如果要禁用它們，可以將此屬性新增到配置中 Vue.use(VueAnalytics, { id: 'UA-XXX-X', autoTracking: { exception: true, exceptionLogs: false } })