Skip to content
This repository has been archived by the owner on Jun 12, 2024. It is now read-only.

Commit

Permalink
feat(page): add custom route pageviewTemplate
Browse files Browse the repository at this point in the history
add the possibility to create a custom pageview template directly in a single route

closes #65
  • Loading branch information
MatteoGabriele committed Nov 2, 2017
1 parent e770ad0 commit c2d5c12
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 12 deletions.
32 changes: 32 additions & 0 deletions docs/page-tracking.md
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,38 @@ Vue.use(VueAnalytics, {
})
```

It is also possible to add custom data structure for each route, using the meta object

```js
import Vue from 'vue'
import VueAnalytics from 'vue-analytics'
import VueRouter from 'vue-router'

const router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: {...},
meta: {
analytics: {
pageviewTemplate (route) {
return {
title: 'This is my custom title',
path: route.path,
location: 'www.mydomain.com'
}
}
}
}
}
]
})

```
important: the route pageviewTemplate has always priority over the global one.


## Avoid trasnforming route query object into querystring
It is possible to avoid route query to be sent as querystring using the `transformRouteParams` property

Expand Down
6 changes: 6 additions & 0 deletions src/helpers.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,3 +64,9 @@ export function getQueryString (queryMap) {
export function isRouteIgnored (name) {
return config.ignoreRoutes.indexOf(name) !== -1
}

export function isRoute (route) {
// just check some random properties that we know
// are inside the route object
return route.query && route.params
}
33 changes: 21 additions & 12 deletions src/lib/page.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,23 @@
import config from '../config'
import set from 'lib/set'
import query from 'lib/query'
import { noop, getQueryString, isRouteIgnored } from '../helpers'
import {
noop,
getQueryString,
isRouteIgnored,
getRouteAnalytics,
isRoute
} from '../helpers'

export default function page (...args) {
if (typeof args[0] !== 'string' && 'currentRoute' in args[0]) {
if (isRoute(args[0])) {
const { transformQueryString } = config.autoTracking
const route = args[0].currentRoute
const route = args[0]
const queryString = getQueryString(route.query)
const path = route.path + (transformQueryString ? queryString : '')

set('page', path)

query('send', 'pageview', {
page: path,
title: route.name,
Expand All @@ -24,14 +31,16 @@ export default function page (...args) {
query('send', 'pageview', ...args)
}

export function trackRoute (proxy, router) {
const { currentRoute } = router

if (isRouteIgnored(currentRoute.name)) {
export function trackRoute (route) {
if (isRouteIgnored(route)) {
return
}

page(proxy ? proxy(currentRoute) : router)

const { autoTracking } = config
const { meta: { analytics = {} } } = route
const proxy = analytics.pageviewTemplate || autoTracking.pageviewTemplate

page(proxy ? proxy(route) : route)
}

export function startAutoTracking () {
Expand All @@ -42,13 +51,13 @@ export function startAutoTracking () {
}

if (autoTracking.pageviewOnLoad) {
trackRoute(autoTracking.pageviewTemplate, router)
trackRoute(router.currentRoute)
}

config.router.afterEach(function () {
// https://github.com/MatteoGabriele/vue-analytics/issues/44
setTimeout(function () {
// https://github.com/MatteoGabriele/vue-analytics/issues/44
trackRoute(autoTracking.pageviewTemplate, router)
trackRoute(router.currentRoute)
}, 0)
})
}

0 comments on commit c2d5c12

Please sign in to comment.