diff --git a/README.md b/README.md index a02d36b..be8a17c 100644 --- a/README.md +++ b/README.md @@ -105,6 +105,41 @@ export default { ``` +Or betterstill just hook into VueRouter afterEach Lifecycle, and negate the need to set the page on each component + + +```js +import Vue from 'vue' +import VueRouter from 'vue-router' + +import Dashboard from '@/Dashboard.vue'; +import About from '@/About.vue'; + +Vue.use(VueRouter) + +const router = new VueRouter({ + routes: [ + { + path: '/dashboard', + name: 'Dashboard', + component: Dashboard + }, + { + path: '/about', + name: 'about', + component: About + } + ] +}); + +router.afterEach((to) => { + //window.analytics.page(to.name) // if you prefer Name + window.analytics.page(to.fullPath) +}); + +export default router; +``` + ## 🔍 Step 3: Identify Users The `identify` method is how you tell Segment who the current user is. It includes a unique User ID and any optional traits you can pass on about them. You can read more about this in the [identify reference](https://segment.com/docs/sources/website/analytics.js/#identify?utm_source=github&utm_medium=click&utm_campaign=protos_vue). diff --git a/src/components/About.vue b/src/components/About.vue index cec60bc..b8141d1 100644 --- a/src/components/About.vue +++ b/src/components/About.vue @@ -9,10 +9,7 @@ diff --git a/src/components/Home.vue b/src/components/Home.vue index 4ccac0f..2101330 100644 --- a/src/components/Home.vue +++ b/src/components/Home.vue @@ -7,9 +7,6 @@ diff --git a/src/router/index.js b/src/router/index.js index afbd728..4359304 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -5,7 +5,7 @@ import About from '@/components/About' Vue.use(Router) -export default new Router({ +const router = new Router({ routes: [ { path: '/', @@ -19,3 +19,9 @@ export default new Router({ } ] }) + +router.afterEach((to) => { + window.analytics.page(to.fullPath) +}); + +export default router;