SPButton Tracking

Extends ByltButton

import { SPButton } from '@bbc/front-end-kit/vue/showpad'

Extends ByltButton with Showpad tracking and data-sp-* attribute support for config-driven label and asset injection.

Getting started

<template>
    <SPButton
        data-sp="path.to.button-in-config"
        data-sp-description="Button description"
        data-sp-asset="multitype"
    >Button label</SPButton>
</template>

<script setup>
import { SPButton } from '@bbc/front-end-kit/vue/showpad'
</script>

Generated config

{
    "labels": {
        "path": {
            "to": {
                "button-in-config": {
                    "label": {
                        "value": "Button label",
                        "description": "Button description"
                    }
                }
            }
        }
    },
    
    "content": {
        "path": {
            "to": {
                "button-in-config": {
                    "asset": {
                        "asset": {
                            "type": "asset",
                            "value": null,
                            "description": "Button asset"
                        },
                        "page": {
                            "type": "page",
                            "value": null,
                            "description": "Button asset"
                        },
                        "url": {
                            "type": "url",
                            "value": null,
                            "description": "Button asset"
                        }
                    }
                }
            }
        }
    }
}

API

This component extends from ByltButton. All attributes will be passed on to that parent component unless documented here.

A single dataSp path is split internally into multiple data-sp-* attribute placements — one on the label wrapper, and optionally one on the root element for the asset. This means SPButton generates multiple config entries from one path.

The label field is always generated:

[path].label → data-sp on the label wrapper

When dataSpAsset="asset" is set, a simple asset field is added:

[path].asset → data-sp-asset="asset" on the root element

When dataSpAsset="multitype" is set, a multitype asset field is added (Bylt-specific extension):

[path].asset → data-sp-asset="multitype" on the root element, producing asset, page, and url sub-fields

See Config and ConfigGenerator for how these attributes are scanned and injected at runtime.

Warning

dataSp is also used as a data-sp-region internally. Path placeholder variables like {{ region }} will reflect this value.

Tracking

On click, fires a trackClickEvent via useSpTrackingStore using the resolved label and category. Tracking is on by default.

Properties

dataSp

The data-sp path used as the base for config-driven label and asset injection.

Values: String

Default: null

dataSpAsset

Controls whether and how an asset field is generated alongside the label field.

Values: null | 'asset' | 'multitype'

Default: null

dataSpDescription

Description prefix used for generated config field descriptions (e.g. "Button label", "Button asset").

Values: String

Default: 'Button'

dataSpRegion

Disabled

This prop is intentionally disabled — passing a value triggers a console warning and the value is ignored. Use dataSp instead.

Values: String

Default: null

dataSpRequire

Controls the data-sp-require attribute. When true, the require path is auto-resolved: points to the asset path if dataSpAsset is set, otherwise to the label path. When a string, it is used as-is.

Values: Boolean | String

Default: false