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

package/events.md

@@ -64,5 +64,11 @@ Event | Action | Info | Payload
 ### Split Testing
 Event | Action | Info | Payload
 --- | --- | --- | ---
-`ali_split_test_view` | _Should be fired for any active split test_ | | `key`, `variant` (0 or 1)
-`ali_split_test_action` | _Should be fired for any assertion in split tests_ | | `key` (matches the key of `ali_split_test_view`), `variant` (0 or 1), `action`
+`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-beta.video.7",
+	"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

@@ -0,0 +1,23 @@
+export const SplitTest = {
+  InitialTest: {
+    key: 'initial_test',
+    numberOfVariants: 2,
+  },
+  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/linkInjection.ts

@@ -219,7 +219,9 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
     if (replacementIndex === -1) continue
     if (hasBeenReplaced) continue
 
-    element.innerHTML = replaceStartingFrom(element.innerHTML, injection.title, injectionElement.outerHTML, replacementIndex)
+    if (!replaceIfSafeInjection(element.innerHTML, injection.title, element, injectionElement, replacementIndex)) {
+      failedMessages[injection.key] = 'Injection would have lead to broken HTML.'
+    }
   }
 
   addLinkInjectionEventListeners(validInjections)
@@ -267,6 +269,31 @@ function createLinkInjectionElement(injection: LinkInjection): { injectionElemen
   return { injectionElement, linkElement }
 }
 
+/**
+ * In some coses injections lead to broken HTML. The reason for this varies and is hard to figure out. In any case, we
+ * should never serve broken HTML.
+ * Before replacing the HTML, we apply the the replacement to a dummy element. From here we check if the number of links
+ * in the HTML increased by one. If it didn't, something went wrong. What exactly is hard to say, we just know something
+ * didn't go as intended and we should not inject.
+ *
+ * No tests exists for this function because writing tests would require finding a scenario in which things break. If we
+ * knew when things break we'd fix it instead.
+ */
+function replaceIfSafeInjection(originalHtml: string, phrase: string, sentenceElement: HTMLElement, injectionElement: HTMLElement, replacementIndex: number): boolean {
+  const dummyElement = document.createElement('div')
+  dummyElement.innerHTML = originalHtml
+
+  const startingNumberOfLinks = Array.from(dummyElement.querySelectorAll<HTMLAnchorElement>('a')).filter(a => a.innerText).length
+  dummyElement.innerHTML = replaceStartingFrom(originalHtml, phrase, injectionElement.outerHTML, replacementIndex)
+  const finalNumberOfLinks = Array.from(dummyElement.querySelectorAll<HTMLAnchorElement>('a')).filter(a => a.innerText).length
+
+  if (finalNumberOfLinks != startingNumberOfLinks + 1) return false
+
+  sentenceElement.innerHTML = dummyElement.innerHTML
+
+  return true
+}
+
 /**
  * Add all used CSS variables to a data attribute. This data attribute is then used for selectors that for each
  * individual CSS variable. This is done this way so that CSS variables are only set when they are used.
@@ -399,7 +426,14 @@ function openLinkPopover(event: MouseEvent, injection: LinkInjection): void {
  * Unmount the popover, removing it from the dom
  */
 function destroyLinkPopover(outro: boolean = true) {
-  if (!activePopoverInsertedComponent) return
+  if (!activePopoverInsertedComponent) {
+    // In some cases a popover lingers even if it should have been removed. This happens sometimes during
+    // HMR during development. In that case we remove the element straight from the dom.
+    // Doing this will prevent the outro animation from playing, but this being a fallback, that's ok.
+    document.querySelectorAll<HTMLElement>('[data-playpilot-title-popover]').forEach(element => element.remove())
+
+    return
+  }
 
   unmount(activePopoverInsertedComponent, { outro })
 

package/src/lib/splitTest.ts

@@ -1,11 +1,16 @@
 import { TrackingEvent } from "./enums/TrackingEvent"
 import { track } from "./tracking"
 
+type SplitTest = {
+  key: string
+  numberOfVariants: number
+}
+
 /**
  * Each split test uses a different split test identifier so a user can be part of one, multiple, or none, tests.
  * The identifier is saved on the window object so that it is consistent across this session.
  */
-export function getSplitTestIdentifier(key: string): number {
+export function getSplitTestIdentifier({ key }: SplitTest): number {
   const windowIdentifier = window.PlayPilotLinkInjections?.split_test_identifiers?.[key]
   if (windowIdentifier) return windowIdentifier
 
@@ -17,24 +22,24 @@ export function getSplitTestIdentifier(key: string): number {
   return randomIdentifier
 }
 
-/**
- * Split tests are either on or off with a 50/50 split. That's all we need for now.
- */
-export function isInSplitTest(key: string): boolean {
-  const identifier = getSplitTestIdentifier(key)
-  const isInSplitTest = identifier > 0.5
+export function getSplitTestVariantIndex(test: SplitTest): number {
+  const identifier = getSplitTestIdentifier(test)
+
+  return Math.floor(identifier * test.numberOfVariants)
+}
 
-  return isInSplitTest
+export function isInSplitTestVariant(test: SplitTest, variant = 1): boolean {
+  return getSplitTestVariantIndex(test) === variant
 }
 
-export function trackSplitTestView(key: string): void {
-  const variant = isInSplitTest(key) ? 1 : 0
+export function trackSplitTestView(test: SplitTest): void {
+  const variant = getSplitTestVariantIndex(test)
 
-  track(TrackingEvent.SplitTestView, null, { key, variant })
+  track(TrackingEvent.SplitTestView, null, { key: test.key, variant })
 }
 
-export function trackSplitTestAction(key: string, action: string): void {
-  const variant = isInSplitTest(key) ? 1 : 0
+export function trackSplitTestAction(test: SplitTest, action: string): void {
+  const variant = getSplitTestVariantIndex(test) ? 1 : 0
 
-  track(TrackingEvent.SplitTestAction, null, { key, variant, action })
+  track(TrackingEvent.SplitTestAction, null, { key: test.key, variant, action })
 }

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,6 @@
+import type { Campaign } from "./campaign"
+import type { LinkInjection } from "./injection"
+
 export type ScriptConfig = {
   token: string
   editorial_token?: string
@@ -10,4 +13,6 @@ export type ScriptConfig = {
   last_successful_fetch?: LinkInjectionResponse | null
   tracked_events?: { event: string, payload: Record<string, any> }[]
   split_test_identifiers?: Record<string, number>
+  evaluated_link_injections?: LinkInjection[]
+  ads?: Campaign[]
 }

package/src/main.ts

@@ -15,6 +15,8 @@ window.PlayPilotLinkInjections = {
   last_successful_fetch: null,
   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 {
@@ -79,6 +81,10 @@ window.PlayPilotLinkInjections = {
         console.log(getPageText(elements))
       console.groupEnd()
 
+      console.groupCollapsed('Evaluated injections')
+        console.log(this.evaluated_link_injections)
+      console.groupEnd()
+
       console.groupCollapsed('Tracked events')
         console.log(this.tracked_events)
       console.groupEnd()

package/src/routes/+layout.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { browser } from '$app/environment'
   import { page } from '$app/state'
+  import { SplitTest } from '$lib/enums/SplitTest'
+  import { getSplitTestVariantIndex } from '$lib/splitTest'
 
   /**
    * !! NOTE: This layout file is for development purposes only and will not be compiled with the final script.
@@ -75,6 +77,8 @@
 
       {#if browser}
         {@render children()}
+
+        Viewing with split test index: {getSplitTestVariantIndex(SplitTest.MultipleVariants)}
       {/if}
     {/key}
   {/if}

package/src/routes/+page.svelte

@@ -8,11 +8,13 @@
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { authorize, getAuthToken, isEditorialModeEnabled, removeAuthCookie, setEditorialParamInUrl } from '$lib/auth'
   import { trackSplitTestView } from '$lib/splitTest'
+  import { SplitTest } from '$lib/enums/SplitTest'
   import type { LinkInjectionResponse, LinkInjection, LinkInjectionTypes } from '$lib/types/injection'
   import Editor from './components/Editorial/Editor.svelte'
   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([])
@@ -42,7 +44,9 @@
       await initialize()
       track(TrackingEvent.ArticlePageView)
 
-      trackSplitTestView('initial_test')
+      if (aiInjections.length || manualInjections.length) window.PlayPilotLinkInjections.ads = await fetchAds()
+
+      trackSplitTestView(SplitTest.MultipleVariants)
     })()
 
     return () => clearLinkInjections()
@@ -120,7 +124,14 @@
     // Get filtered injections as they are shown on the page.
     // Only update state if it they are different from current injections.
     const filteredInjections = injectLinksInDocument(elements, injections)
-    if (JSON.stringify(filteredInjections) !== JSON.stringify(linkInjections)) linkInjections = filteredInjections
+    if (JSON.stringify(filteredInjections) !== JSON.stringify(linkInjections)) {
+      linkInjections = filteredInjections
+
+      // This is added to the window both for debugging purposes and for the benchmarking tool.
+      // Just to have some way to evaluate injections outside of editorial mode.
+      // This shouldn't be used anywhere else.
+      window.PlayPilotLinkInjections.evaluated_link_injections = filteredInjections
+    }
 
     const successfulInjections = filteredInjections.filter(i => !i.failed)
 

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>