Showpad tracking

Most of our Showpad Experiences have tracking requirements. Some Showpad Vue components have tracking build in.

Components with tracking will have a Tracking tag in the documentation next to the name.

All components with tracking will follow the same API to avoid confusion. Tracking descriptions will have a default value related to the type of component so they don't always need to be provided when used in projects.

Getting started

Most components will provide default values for the tracking propeties, so they don't need to be provided every time they are used in projects. But all tracking properties can be overridden if necessary.

Example of a generic vue component with tracking

<template>
    <comp
        :track="true"
        :trackLabel="Custom tracking label"
        :trackCategory="Custom tracking category"
    />
</template>

Add tracking to custom component

Custom components may require tracking too. To do so, they need to import useSpTrackingStore and try to follow the same structure as the other components in the kit and the project.

Guidelines

Every trackable component must provide the three tracking properties so the values can be overridden when needed without having to refactor the component's codebase
Every tracking property must follows the same naming convention as the kit.
Default values may be provided by the component but they must be editable using the properties if the developer using that component deems so necessary.

API of Kit components

Properties

track

Flag to toggle tracking. If set to false, no tracking will be triggered when the user interacts with that component

Values: Boolean

Default: true (most of the time)

trackCategory

Category in which the tracking needs to be logged. Necessary for the readouts of the tracking to know which type of component or scenario the action belongs to.

Most trackable components have this value predefined based on the type of component they are.

Values: String

Default: 'button' (most components)

trackLabel

The label/title the action needs to be tracked under.

Some components will have this prefilled automatically if no value is provided — for example, SPButton falls back to the button's rendered text.

Values: String

Default: null (component specific)

Tracking defaults per component

Component	`track` default	`trackCategory` default	`trackLabel` default
Logo	`true`	`'button'`	`'Logo'`
SPButton	`true`	`'button'`	rendered label text
SPTrackedRouterLink	`true`	`'button'`	`null`
Popup	`true`	—	—
Modal	`false`	—	—
Prompt	`false`	—	—
BackButton	`true` (via SPTrackedRouterLink)	`'button'`	`null`

init() must be called before tracking fires

All tracking calls are silently blocked if useSpTrackingStore has not been initialized. Call trackingStore.init() once after useSpStore.init() has resolved — user and device info must be available before the session can be created. Events fired before this point produce a console warning and are dropped.

Wiring tracking in your app

The typical setup initializes tracking after the Showpad store is ready and registers a router guard for pageview events:

import { useSpStore, useSpTrackingStore } from '@bbc/front-end-kit/vue/showpad'

const spStore = useSpStore()
const trackingStore = useSpTrackingStore()

trackingStore.experienceType = 'product-catalog'
trackingStore.clientName = 'Acme Corp'
trackingStore.appName = 'Sales App'

await spStore.init()
trackingStore.init()

router.afterEach((to, from) => {
    trackingStore.trackPageviewEvent({ from, to })
})