88 lines
4.8 KiB
Markdown
88 lines
4.8 KiB
Markdown
## ADDED Requirements
|
|
|
|
### Requirement: Reusable CTA component
|
|
The site MUST implement CTAs as a reusable component that can render at least the following actions:
|
|
- YouTube subscribe action (linking to the channel)
|
|
- Instagram follow action (linking to the profile)
|
|
- Podcast listen action (linking to a designated destination)
|
|
|
|
Each CTA MUST be configurable with:
|
|
- `platform` (`youtube`, `instagram`, `podcast`)
|
|
- `placement` (e.g., `hero`, `module_header`, `footer`)
|
|
- destination `url`
|
|
|
|
#### Scenario: Rendering a YouTube subscribe CTA
|
|
- **WHEN** the homepage includes a CTA with `platform: youtube`
|
|
- **THEN** the site renders a visible action that links to the configured YouTube channel destination URL
|
|
|
|
### Requirement: Trackable outbound links
|
|
CTA outbound links MUST support appending UTM parameters so traffic can be attributed in downstream analytics.
|
|
|
|
#### Scenario: UTM parameters applied
|
|
- **WHEN** a CTA is configured with UTM parameters
|
|
- **THEN** the rendered outbound link includes the UTM query parameters in its URL
|
|
|
|
### Requirement: CTA click event emission
|
|
CTA clicks MUST emit an analytics event with at least:
|
|
- event name `cta_click`
|
|
- `platform`
|
|
- `placement`
|
|
- `target` (destination URL or a stable identifier)
|
|
|
|
In addition, CTA clicks MUST conform to the site click tracking taxonomy and MUST include a stable, unique identifier (`target_id`) for the CTA instance (so multiple CTAs with the same destination can be measured independently).
|
|
|
|
#### Scenario: User clicks CTA
|
|
- **WHEN** a user clicks an Instagram follow CTA in the hero placement
|
|
- **THEN** the system emits a `cta_click` event with `platform=instagram` and `placement=hero`
|
|
|
|
#### Scenario: Two CTAs to the same destination
|
|
- **WHEN** two CTAs link to the same destination but appear in different placements
|
|
- **THEN** their emitted events contain different `target_id` values
|
|
|
|
### Requirement: Modal CTAs for YouTube and Spotify
|
|
The media modal MUST render two CTA actions:
|
|
- "Subscribe on YouTube" / "Follow on Spotify" — links to the channel/podcast profile page
|
|
- "View on YouTube" / "Listen on Spotify" — links to the specific content item URL
|
|
|
|
The CTA label and destination MUST be determined by the content source:
|
|
- For `youtube` source: "Subscribe on YouTube" links to the YouTube channel URL, "View on YouTube" links to the video URL
|
|
- For `podcast` source: "Follow on Spotify" links to the podcast profile URL, "Listen on Spotify" links to the episode URL
|
|
|
|
Each CTA MUST be rendered using the existing `CtaLink` component conventions (or equivalent markup) with UTM parameters appended.
|
|
|
|
#### Scenario: YouTube video modal shows YouTube CTAs
|
|
- **WHEN** the media modal is displaying a YouTube video
|
|
- **THEN** the modal renders "Subscribe on YouTube" (linking to the channel) and "View on YouTube" (linking to the video URL) as CTA actions
|
|
|
|
#### Scenario: Podcast episode modal shows Spotify CTAs
|
|
- **WHEN** the media modal is displaying a podcast episode
|
|
- **THEN** the modal renders "Follow on Spotify" (linking to the podcast profile) and "Listen on Spotify" (linking to the episode URL) as CTA actions
|
|
|
|
### Requirement: Modal CTA tracking
|
|
Each CTA rendered inside the media modal MUST emit a `cta_click` event conforming to the existing CTA tracking requirements.
|
|
|
|
The modal CTAs MUST use:
|
|
- `placement=media_modal`
|
|
- `target_id` following the `modal.cta.{action}.{platform}` namespace
|
|
- `platform` set to `youtube` or `spotify` (mapped from content source)
|
|
|
|
#### Scenario: Modal CTA emits cta_click event
|
|
- **WHEN** a user clicks the "Subscribe on YouTube" CTA inside the media modal
|
|
- **THEN** the system emits a `cta_click` event with `target_id=modal.cta.subscribe.youtube`, `placement=media_modal`, `platform=youtube`, and `target_url` set to the YouTube channel URL
|
|
|
|
#### Scenario: Modal CTA emits cta_click event (secondary)
|
|
- **WHEN** a user clicks the "View on YouTube" CTA inside the media modal
|
|
- **THEN** the system emits a `cta_click` event with `target_id=modal.cta.view.youtube`, `placement=media_modal`, `platform=youtube`, and `target_url` set to the video URL
|
|
|
|
#### Scenario: Modal CTA emits cta_click event (podcast)
|
|
- **WHEN** a user clicks the "Follow on Spotify" CTA inside the media modal
|
|
- **THEN** the system emits a `cta_click` event with `target_id=modal.cta.follow.spotify`, `placement=media_modal`, `platform=spotify`, and `target_url` set to the podcast profile URL
|
|
|
|
#### Scenario: Modal CTA emits cta_click event (podcast secondary)
|
|
- **WHEN** a user clicks the "Listen on Spotify" CTA inside the media modal
|
|
- **THEN** the system emits a `cta_click` event with `target_id=modal.cta.listen.spotify`, `placement=media_modal`, `platform=spotify`, and `target_url` set to the episode URL
|
|
|
|
#### Scenario: Modal CTA includes UTM parameters
|
|
- **WHEN** a modal CTA is rendered
|
|
- **THEN** the CTA link URL includes UTM parameters for attribution (utm_source, utm_medium, utm_campaign, utm_content)
|