@playpilot/tpi 5.6.0 → 5.7.0-beta.display-2

package/events.md

@@ -66,3 +66,9 @@ Event | Action | Info | Payload
 --- | --- | --- | ---
 `ali_split_test_view` | _Should be fired for any active split test_ | | `key`, `variant` (a whole number starting at 0)
 `ali_split_test_action` | _Should be fired for any assertion in split tests_ | | `key` (matches the key of `ali_split_test_view`), `variant` (a whole number starting at 0), `action`
+
+### Ads
+Event | Action | Info | Payload
+--- | --- | --- | ---
+`ali_top_scroll_click` | _Fired any time the top scroll ad is called_ | | `campaign_name`
+`ali_display_ad_click` | _Fired any time the top scroll ad is clicked_ | | `campaign_name`

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "5.6.0",
+	"version": "5.7.0-beta.display-2",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/ads.ts

@@ -0,0 +1,38 @@
+import { getApiToken } from "./api"
+import { apiBaseUrl } from "./constants"
+import type { Campaign, CampaignFormat } from "./types/campaign"
+import type { PlaylinkData } from "./types/playlink"
+
+export async function fetchAds() {
+  const headers = new Headers({ 'Content-Type': 'application/json' })
+  const apiToken = getApiToken()
+
+  if (!apiToken) throw new Error('No token was provided')
+
+  const response = await fetch(apiBaseUrl + `/ads/browse/?region=nl&api-token=${apiToken}`, { headers })
+
+  if (!response.ok) throw response
+
+  const parsed = await response.json()
+
+  return parsed
+}
+
+export function getFirstAdOfType(format: CampaignFormat): Campaign | null {
+  return (window.PlayPilotLinkInjections?.ads || []).find(i => i.campaign_format === format) || null
+}
+
+export function campaignToPlaylink(campaign: Campaign): PlaylinkData {
+  return {
+    sid: '',
+    name: campaign.content.header || '',
+    url: campaign.cta.url || '',
+    logo_url: campaign.cta.image || '',
+    highlighted: true,
+    cta_text: campaign.content.subheader,
+    action_text: campaign.cta.header,
+    extra_info: {
+      category: 'SVOD'
+    }
+  }
+}

package/src/lib/constants.ts

@@ -1,4 +1,5 @@
 export const playPilotBaseUrl = 'https://www.playpilot.com'
-export const apiBaseUrl = 'https://partner-api.playpilot.tech/1.0.0'
+export const apiBaseUrl = 'https://partner-api-staging.playpilot.tech/1.0.0'
+export const imageBaseUrl = 'https://img-staging.playpilot.tech'
 
 export const imagePlaceholderDataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAB+CAMAAACNgsajAAAAb1BMVEU1Q2fI1N5YZoNVYoFndI9qd5JBT3FFU3S8yNS3xNC4xNFBTnDG0t2lscJJV3e9ytaptcWToLOOm6/BzdiZprh3hJ1aaIWJlatte5VPXHx7iJ9zgZlfbYk3RWmNmq5jcY1XZIO2wtCjsMB+i6I9S25IprTeAAABqUlEQVRo3u3W2ZKCMBCF4T5ExRmRVXBfZnn/Z5wKiU5pz1AJ7ZXV/x03HxVCB0jTNE3TNE3TNO0l2rbPNxcFdk8334AINTUD5eSaWbPoQs0qw0CVN98BzNNgE4NVv+ZHsJliuNVt7UgotATAafp/5mZiG4waAB0N5k0kUeg0wMykKDfLvRTl5pxyCFFupjQVo9ykiRTlphzl5nNQNu8C9Hv2lylDT0W2NMyUoeXdLC68KUNLuM7O9HskQ0uLLAEUR2aOQjfORE5LzHP2PMehxpl2k6otM8eh2aQGkBlieyRBYbs3y5Rk6IPZn8mT65XJR6LcROGErwaoxqLm4XvkiTVsy1FoYe5n06zcjazp1Wk0umHz3k9BT6+bXjXR6PnRtKpr755PfRjx4WPz7tXW/26gGYnOvOmrM7xtiK4qYtDOrpGZtnR7JFcSi+Z1XZt7k5d4NCZmcrWxqMzkbRgqN+nAULHpx1RiylFvftJwlxjUz2bWdpPB7NnSxZih5RFrD20Vai4izGOgeenPukMSUE6hte5denI7NMyU1xrSNE3TNE3TNE17hX4ADHsS0j0OCOoAAAAASUVORK5CYII='

package/src/lib/enums/ImageDimensions.ts

@@ -0,0 +1,7 @@
+// Image dimensions to be used to generate images from the supplied image UUIDs.
+// The number given is a multiplier of the base 32 pixels.
+// https://docs.google.com/spreadsheets/d/1Nx73ux1fgGKJfuaUeQRwSXUJdSQonPG5DxjW2zxnyz0
+export const ImageDimensions = {
+  TopScrollBackground: 'topscrollBackgroundMobile', // 600x140
+  TopScrollContent: '8by1x23',
+} as const

package/src/lib/enums/SplitTest.ts

@@ -6,5 +6,18 @@ export const SplitTest = {
   MultipleVariants: {
     key: 'multiple_variants',
     numberOfVariants: 4,
-  }
+  },
+  TopScrollFormat: {
+    key: 'top_scroll_format',
+    numberOfVariants: 2,
+    // Variant 0 is separate bubble
+    // Variant 1 is inline bubble
+  },
+  DisplayAdPosition: {
+    key: 'display_ad_position',
+    numberOfVariants: 3,
+    // Variant 0 is display ad in playlinks
+    // Variant 1 is display ad above card with highlighted playlink
+    // Variant 2 is display ad above card without highlighted playlink
+  },
 } as const

package/src/lib/enums/TrackingEvent.ts

@@ -26,6 +26,9 @@ export const TrackingEvent = Object.freeze({
   EditorError: 'ali_editor_error',
   InjectionError: 'ali_injection_error',
 
+  TopScrollClick: 'ali_top_scroll_click',
+  DisplayAdClick: 'ali_display_ad_click',
+
   SplitTestView: 'ali_split_test_view',
   SplitTestAction: 'ali_split_test_action'
 })

package/src/lib/image.ts

@@ -1,3 +1,6 @@
+import { imageBaseUrl } from "./constants"
+import type { ImageDimensions } from "./enums/ImageDimensions"
+
 /**
  * NOTE: This is a temporary measure. Images url from the API use a previous format which is to be replaced,
  * but that isn't live yet and requires some extra work. In the meantime we remove part of the URL ourselves.
@@ -6,3 +9,12 @@ export function removeImageUrlPrefix(url: string | null): string | null {
   if (!url) return null
   return url.replace('/src/img', '')
 }
+
+/**
+ * Creates a CDN image URL from a UUID.
+ */
+export function imageFromUUID(uuid: string | null, dimensions: (typeof ImageDimensions)[keyof typeof ImageDimensions] | null = null): string {
+  if (!uuid?.length) return ''
+
+  return `${imageBaseUrl}/${uuid}?${dimensions ? `class=${dimensions}&` : ''}optimizer=image`
+}

package/src/lib/types/campaign.d.ts

@@ -0,0 +1,45 @@
+export type Campaign = {
+  campaign_format: CampaignFormat
+  campaign_type: 'playlist' | 'video' | 'image'
+  campaign_platforms: CampaignPlatform[]
+  campaign_name: string
+  campaign_start: string
+  campaign_end: string
+  campaign_region: string
+  content: CampaignContent
+  cta: CampaignCTA
+  content_playlist: object
+  provider: object | null
+  impression_trackers: string[]
+  target_title_uuid: string
+  target_title_sid: string
+  backfill_providers: string[]
+  autogenerated: boolean
+  enabled: boolean
+  hide_imdb_score: boolean
+  hide_sponsored_message: boolean
+  disclaimer: string | null
+}
+
+export type CampaignContent = {
+  header: string | null
+  header_logo: string | null
+  header_logo_uuid: string | null
+  subheader: string | null
+  image: string | null
+  image_uuid: string | null
+  video: string | null
+  format: string | null
+}
+
+export type CampaignCTA = {
+  header: string | null
+  subheader: string | null
+  image: string | null
+  image_uuid: string | null
+  url: string | null
+}
+
+export type CampaignPlatform = 'web' | 'android_app' | 'ios_app'
+
+export type CampaignFormat = 'takeover' | 'horizontal' | 'hero' | 'top_scroll' | 'card'

package/src/lib/types/playlink.d.ts

@@ -5,6 +5,8 @@ export type PlaylinkData = {
   logo_url: string
   highlighted?: boolean
   cta_text?: string | null
+  // This doesn't actually exists on the API objects, it's only present from ads
+  action_text?: string | null,
   extra_info: {
     category: PlaylinkCategory
   }

package/src/lib/types/script.d.ts

@@ -1,3 +1,4 @@
+import type { Campaign } from "./campaign"
 import type { LinkInjection } from "./injection"
 
 export type ScriptConfig = {
@@ -13,4 +14,5 @@ export type ScriptConfig = {
   tracked_events?: { event: string, payload: Record<string, any> }[]
   split_test_identifiers?: Record<string, number>
   evaluated_link_injections?: LinkInjection[]
+  ads?: Campaign[]
 }

package/src/main.ts

@@ -16,6 +16,7 @@ window.PlayPilotLinkInjections = {
   tracked_events: [],
   split_test_identifiers: {},
   evaluated_link_injections: [],
+  ads: [],
   app: null,
 
   initialize(config = { token: '', selector: '', after_article_selector: '', after_article_insert_position: '', language: null, organization_sid: null, domain_sid: null, editorial_token: '' }): void {

package/src/routes/+page.svelte

@@ -14,6 +14,7 @@
   import EditorTrigger from './components/Editorial/EditorTrigger.svelte'
   import Alert from './components/Editorial/Alert.svelte'
   import TrackingPixels from './components/TrackingPixels.svelte'
+  import { fetchAds } from '$lib/ads'
 
   let parentElement: HTMLElement | null = $state(null)
   let elements: HTMLElement[] = $state([])
@@ -43,6 +44,8 @@
       await initialize()
       track(TrackingEvent.ArticlePageView)
 
+      if (aiInjections.length || manualInjections.length) window.PlayPilotLinkInjections.ads = await fetchAds()
+
       trackSplitTestView(SplitTest.MultipleVariants)
     })()
 

package/src/routes/components/Ads/Display.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+  import { SplitTest } from '$lib/enums/SplitTest'
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { trackSplitTestAction, trackSplitTestView } from '$lib/splitTest'
+  import { track } from '$lib/tracking'
+  import type { Campaign } from '$lib/types/campaign'
+
+  interface Props {
+    campaign: Campaign
+  }
+
+  const { campaign }: Props = $props()
+
+  const { disclaimer, content, cta } = $derived(campaign)
+  const { header, subheader, header_logo: logo, image } = $derived(content)
+  const { header: buttonLabel, url: href } = $derived(cta)
+
+  trackSplitTestView(SplitTest.DisplayAdPosition)
+
+  function onclick(): void {
+    track(TrackingEvent.DisplayAdClick, null, { campaign_name: campaign.campaign_name })
+    trackSplitTestAction(SplitTest.DisplayAdPosition, 'click')
+  }
+</script>
+
+<a {href} target="_blank" class="display" rel="sponsored" {onclick}>
+  {#if disclaimer}
+    <div class="disclaimer">
+      {disclaimer}
+    </div>
+  {/if}
+
+  {#if logo || header || subheader || buttonLabel}
+    <div class="cta">
+      {#if logo}
+        <img class="logo" src={logo} alt="" height="40" width="40" />
+      {/if}
+
+      <div>
+        {#if header}
+          <span class="name">{header}</span>
+        {/if}
+
+        {#if subheader}
+          <div class="subheader">{subheader}</div>
+        {/if}
+      </div>
+
+      {#if buttonLabel}
+        <div class="action">{buttonLabel}</div>
+      {/if}
+    </div>
+  {/if}
+
+  {#if image}
+    <img class="background" src={image} alt="" />
+  {/if}
+</a>
+
+<style lang="scss">
+  .display {
+    display: block;
+    position: relative;
+    border-radius: var(--playpilot-display-ad-border-radius, margin(0.5));
+    overflow: hidden;
+    background: black;
+    aspect-ratio: 16 / 9;
+    color: white !important;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
+    font-family: var(--playpilot-detail-font-family, var(--playpilot-font-family));
+    line-height: 1.2;
+    font-style: normal !important;
+  }
+
+  .disclaimer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: margin(0.5);
+    font-size: margin(0.75);
+    text-decoration: underline;
+
+    @media (min-width: 600px) {
+      padding: margin(1);
+    }
+  }
+
+  .cta {
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: margin(0.5);
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: margin(0.5);
+    background: linear-gradient(to right, rgba(110, 110, 110, 1), rgba(85, 85, 85, 0.3));
+    font-size: margin(0.875);
+    text-decoration: none;
+
+    @media (min-width: 600px) {
+      padding: margin(1);
+    }
+  }
+
+  .logo {
+    border-radius: var(--playpilot-display-ad-border-radius, margin(0.5));
+  }
+
+  .name {
+    font-weight: 500;
+  }
+
+  .subheader {
+    font-size: margin(0.75);
+  }
+
+  .action {
+    margin-left: auto;
+    padding: margin(0.5) margin(0.75);
+    background: var(--playpilot-display-ad-action-background, white);
+    border-radius: var(--playpilot-display-action-border-radius, margin(2));
+    transition: transform 50ms;
+    text-shadow: none;
+    font-weight: var(--playpilot-display-action-font-weight, 500);
+    color: var(--playpilot-display-action-text-color, black);
+    white-space: nowrap;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+
+  .background {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+</style>

package/src/routes/components/Ads/TopScroll.svelte

@@ -0,0 +1,240 @@
+<script lang="ts">
+  import { ImageDimensions } from '$lib/enums/ImageDimensions'
+  import { SplitTest } from '$lib/enums/SplitTest'
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { imageFromUUID } from '$lib/image'
+  import { isInSplitTestVariant, trackSplitTestView } from '$lib/splitTest'
+  import { track } from '$lib/tracking'
+  import type { Campaign } from '$lib/types/campaign'
+  import { fade } from 'svelte/transition'
+
+  interface Props {
+    campaign: Campaign
+  }
+
+  const { campaign }: Props = $props()
+
+  trackSplitTestView(SplitTest.TopScrollFormat)
+
+  const { disclaimer, content, cta } = $derived(campaign)
+  const { format, header, header_logo: logo, image_uuid: backgroundImageUUID } = $derived(content)
+  const { header: buttonLabel, url: href } = $derived(cta)
+
+  const inline = isInSplitTestVariant(SplitTest.TopScrollFormat, 1)
+  const simple = $derived(format === 'large')
+
+  const backgroundImage = $derived(imageFromUUID(backgroundImageUUID, ImageDimensions.TopScrollBackground))
+  const contentImage = $derived(imageFromUUID(backgroundImageUUID, ImageDimensions.TopScrollContent))
+
+  let clientWidth = $state(0)
+  let tooltipVisible = $state(false)
+
+  function trackClick(): void {
+    track(TrackingEvent.TopScrollClick, null, { campaign_name: campaign.campaign_name })
+  }
+
+  function toggleTooltip(event: MouseEvent): void {
+    event.preventDefault()
+    event.stopPropagation()
+
+    tooltipVisible = !tooltipVisible
+  }
+</script>
+
+<a
+  {href}
+  target="_blank"
+  class="top-scroll"
+  class:simple
+  class:inline
+  tabindex="-1"
+  onclick={trackClick}
+  rel="sponsored"
+  style:--width="{clientWidth}px"
+  bind:clientWidth>
+  <div class="content">
+    {#if simple}
+      <img class="content-image" src={contentImage} alt={header} width="728" height="90" />
+    {:else}
+      {#if logo}
+        <img class="logo" src={logo} alt="" width="50" height="50" />
+      {/if}
+
+      <p class="tagline">{header}</p>
+
+      {#if buttonLabel}
+        <button class="button">{buttonLabel}</button>
+      {/if}
+    {/if}
+  </div>
+
+  {#if !simple}
+    {#if backgroundImageUUID}
+      <div class="background" style:--background="url('{backgroundImage}')"></div>
+    {/if}
+
+    {#if disclaimer}
+      <button class="tooltip" onclick={toggleTooltip}>
+        <div class="disclaimer">i</div>
+
+        {#if tooltipVisible}
+          <div class="tooltip-content" transition:fade={{ duration: 50 }}>
+            {disclaimer}
+          </div>
+        {/if}
+      </button>
+    {/if}
+  {/if}
+</a>
+
+<style lang="scss">
+  $border-radius-size: var(--playpilot-top-scroll-border-radius, var(--playpilot-popover-border-radius, margin(1)));
+
+  .top-scroll {
+    position: relative;
+    display: block;
+    width: 100%;
+    border-radius: $border-radius-size;
+    background: black;
+    color: var(--playpilot-top-scroll-text-color, white);
+    font-family: var(--playpilot-top-scroll-font-family, var(--playpilot-detail-font-family, var(--playpilot-font-family)));
+    font-size: var(--playpilot-top-scroll-font-size, var(--playpilot-detail-font-size, 14px));
+    text-decoration: none;
+    line-height: 1.35;
+
+    &.inline {
+      border-radius: $border-radius-size $border-radius-size 0 0;
+    }
+  }
+
+  .content {
+    display: flex;
+    z-index: 1;
+    position: relative;
+    align-items: center;
+    height: 100%;
+    min-height: margin(4.5);
+    padding: margin(0.25) margin(0.5);
+    gap: margin(0.5);
+    color: var(--playpilot-top-scroll-text-color, white);
+
+    .simple & {
+      justify-content: center;
+      min-height: 0;
+      padding: 0;
+    }
+  }
+
+  .logo {
+    border-radius: var(--playpilot-top-scroll-logo-border-radius, margin(0.5));
+    background: black;
+  }
+
+  .tagline {
+    margin: 0;
+    text-shadow: var(--playpilot-shadow);
+  }
+
+  .button {
+    margin-left: auto;
+    margin-right: margin(1);
+    padding: margin(0.25) margin(0.5);
+    background: var(--playpilot-top-scroll-button-background, white);
+    border: 0;
+    border-radius: var(--playpilot-top-scroll-button-border-radius, margin(0.25));
+    box-shadow: var(--playpilot-shadow);
+    color: var(--playpilot-top-scroll-button-text-color, black);
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+
+    &:hover {
+      outline: margin(0.25) solid var(--playpilot-top-scroll-button-background, rgba(white, 0.35));
+      background: var(--playpilot-top-scroll-button-background, white);
+    }
+
+    &:active {
+      background: var(--playpilot-top-scroll-button-background, white);
+    }
+  }
+
+  .background {
+    z-index: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: $border-radius-size;
+    background-image: var(--background);
+    background-position: center;
+    background-size: cover;
+    opacity: 0.4;
+
+    .top-scroll:hover & {
+      filter: brightness(1.15);
+    }
+
+    .inline & {
+      border-radius: $border-radius-size $border-radius-size 0 0;
+    }
+  }
+
+  .content-image {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    background: black;
+    border-radius: var(--playpilot-top-scroll-border-radius, var(--playpilot-popover-border-radius, margin(1)));
+
+    .top-scroll:hover & {
+      filter: brightness(1.15);
+    }
+  }
+
+  .disclaimer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: var(--playpilot-top-scroll-disclaimer-border, 2px solid rgba(255, 255, 255, 0.5));
+    padding: margin(0.25);
+    height: margin(1.25);
+    width: margin(1.25);
+    border-radius: 99px;
+    color: var(--playpilot-top-scroll-disclaimer-text-color, rgba(255, 255, 255, 0.75));
+    font-weight: bold;
+    line-height: 1;
+
+    &:hover {
+      border-color: var(--playpilot-top-scroll-disclaimer-hover-border-color, white);
+      color: var(--playpilot-top-scroll-disclaimer-hover-text-color, white);
+    }
+  }
+
+  .tooltip {
+    z-index: 2;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    padding: margin(0.25);
+    background: transparent;
+    border: 0;
+    color: var(--playpilot-top-scroll-text-color, white);
+    cursor: pointer;
+  }
+
+  .tooltip-content {
+    display: block;
+    z-index: 20;
+    position: absolute;
+    right: 100%;
+    bottom: margin(0.25);
+    width: calc(var(--width) * 0.8);
+    padding: margin(0.5);
+    border-radius: margin(1);
+    background: var(--playpilot-content);
+    box-shadow: var(--playpilot-shadow);
+    line-height: 1.1;
+    text-align: right;
+  }
+</style>