Popup Tracking

Extends Popup

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

Extends Popup with Showpad tracking and data-sp-region support.

Open and close events are tracked as pageviews via useSpTrackingStore.

When config-building mode is active, the popup is automatically forced open so data-sp-* content inside it can be scanned.

Getting started

<template>
    <button @click="showPopup = true">Open popup</button>

    <Popup v-model:visible="showPopup" name="my-popup" data-sp-region="my-region">
        <h1>Custom popup</h1>
        <p>Popup content here.</p>
    </Popup>
</template>

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

const showPopup = ref(false);
</script>

API

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

Tracking

Open and close are tracked as pageviews via trackPageviewEvent on useSpTrackingStore. When the popup is inside a .view element, the current route name is prepended to the popup name to form the tracked page name.

Properties

name

The popup name used for tracking. When the popup is inside a .view, the route name is prepended automatically.

Values: String

Default: 'popup'

track

Whether to fire tracking events on open and close.

Values: Boolean

Default: true

dataSpRegion

The data-sp-region value applied to the root popup element. All data-sp-* content inside the popup should fall under this region name.

Values: String

Default: 'general'

Models

visible

Controls popup visibility.

Values: Boolean

Default: false

Slots

No additional slots next to Popup.