62db2920b9
* website: Add analytics tracking for components and outbound links * website: Update component dependencies * website: Swap cta and documentation sections
102 lines
2.6 KiB
JavaScript
102 lines
2.6 KiB
JavaScript
import { each } from './utils'
|
|
|
|
/* Segment's analytics.js provides a ready() function that is called once tracking is up and running */
|
|
/* Some clients block analytics.js, so to prevent errors, we assign noop functions if window.analytics isn't present */
|
|
window.analytics.ready(() => {
|
|
const analytics = window.analytics || {
|
|
trackLink: () => {},
|
|
track: () => {},
|
|
mock: true
|
|
}
|
|
|
|
// Track all button clicks
|
|
track(
|
|
'[data-ga-button]',
|
|
el => {
|
|
return {
|
|
event: 'Click',
|
|
category: 'Button',
|
|
label: el.getAttribute('data-ga-button')
|
|
}
|
|
},
|
|
true
|
|
)
|
|
|
|
// Track product subnav link clicks
|
|
track(
|
|
'[data-ga-product-subnav]',
|
|
el => {
|
|
return {
|
|
event: 'Click',
|
|
category: 'Product Subnav Navigation',
|
|
label: el.getAttribute('data-ga-product-subnav')
|
|
}
|
|
},
|
|
true
|
|
)
|
|
|
|
// Track meganav link clicks
|
|
track(
|
|
'[data-ga-meganav]',
|
|
el => {
|
|
return {
|
|
event: 'Click',
|
|
category: 'Meganav Navigation',
|
|
label: el.getAttribute('data-ga-meganav')
|
|
}
|
|
},
|
|
true
|
|
)
|
|
|
|
// Track footer link clicks
|
|
track(
|
|
'[data-ga-footer]',
|
|
el => {
|
|
return {
|
|
event: 'Click',
|
|
category: 'Footer Navigation',
|
|
label: el.getAttribute('data-ga-footer')
|
|
}
|
|
},
|
|
true
|
|
)
|
|
|
|
// Track outbound links
|
|
track(
|
|
'a[href^="http"]:not([href^="http://vaultproject.io"]):not([href^="https://vaultproject.io"]):not([href^="http://www.vaultproject.io"]):not([href^="https://www.vaultproject.io"])',
|
|
el => {
|
|
return {
|
|
event: `Outbound Link | ${window.location.pathname}`,
|
|
category: 'Outbound link',
|
|
label: el.href
|
|
}
|
|
},
|
|
true
|
|
)
|
|
|
|
// Note: Downloads are tracked from within the Product Downloader component
|
|
|
|
/**
|
|
* Wrapper for segment's track function that will track multiple elements,
|
|
* normalize parameters, and easily switch between tracking links or events.
|
|
* @param {String} selector - query selector, multi element compatible
|
|
* @param {Function} cb - optional function that should return params, and will receive the element as a parameter
|
|
* @param {Boolean} [link=false] - if true, tracks a link click
|
|
*/
|
|
function track(selector, cb, link = false) {
|
|
each(document.querySelectorAll(selector), el => {
|
|
let params = cb
|
|
if (typeof cb === 'function') params = cb(el)
|
|
const event = params.event
|
|
delete params.event
|
|
if (link) {
|
|
analytics.trackLink(el, event, params)
|
|
} else {
|
|
el.addEventListener('click', () => {
|
|
analytics.track(event, params)
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|