@playpilot/tpi 5.2.1 → 5.4.0-beta.topscroll-1

package/events.md

@@ -0,0 +1,60 @@
+This document highlights the purpose of each tracking event.
+
+## Payload
+
+All events share a common payload:
+
+- `url`: The URL of the related article. This is a URL with only the protocol, base url, and pathname. No parameters are included
+- `organization_sid`: The sid for the related organization
+- `domain_sid`: The sid for the related domain
+
+Events related to titles share an additional set of data (referred to below as `Title`):
+
+- `original_title`
+- `title_sid`
+- `title_type`: "movie" or "series"
+- `providers`: An array of provider names
+
+Events may have additional data in their payload.
+
+### General
+Event | Action | Info | Payload
+--- | --- | --- | ---
+`ali_article_page_view` | _Fires any time an article is visited_ | This event will fire right after all data is fetched and will fire regardless of if there are injections or not | It will fire even on pages where injections are disabled. | -
+`ali_links_injected` | _Fires as long as any injections are injected into the article_ | Includes an object with the number of injections for this article with `manual` and `ai` as two separate numbers. | `manual` (number of manual injection), `ai` (number of ai injections)
+
+### Modal
+Event | Action | Info | Payload
+--- | --- | --- | ---
+`ali_title_modal_view` | _Fires any time a title modal is viewed_ | The title modal opens when clicking an injection both on desktop and mobile | `Title`
+`ali_title_modal_scroll` | _Fires the first time a user scrolls inside of a titel modal._ | | `Title`
+`ali_title_modal_playlink_click` | _Fires any time a playlink is clicked inside of a title modal_ | Includes data on which playlink was clicked. | `Title`, `playlink` (name of the clicked playlink)
+`ali_title_modal_save_click` | _Currently unused, there is no save functionality._ | | `Title`
+
+### Popover
+Event | Action | Info | Payload
+--- | --- | --- | ---
+`ali_title_popover_view` | _Fires any time a title popover is viewed_ | The title popover opens when hovering an injection. This will only occur on desktop. | `Title`
+`ali_title_popover_save_click` | _Currently unused, there is no save functionality._ | | `Title`
+`ali_title_popover_playlink_click` | _Fires any time a playlink is clicked inside of a title popover_ | Includes data on which playlink was clicked. | `Title`, `playlink` (name of the clicked playlink)
+
+### After Article
+Event | Action | Info | Payload
+--- | --- | --- | ---
+`ali_after_article_playlink_click` | _Fires any time a playlink is clicked inside of an after article block_ | This block will only appear injections are configured for after article, which no one is currently using. Includes data on which playlink was clicked. | `Title`, `playlink` (name of the clicked playlink)
+`ali_after_article_modal_button_click` | _Fires any time an after article modal button is clicked_ | This button will only appear in after article blocks when configured, which, which no one is currently using | `Title`
+
+### Data
+Event | Action | Info | Payload
+--- | --- | --- | ---
+`ali_injection_failed` | _Fires only inside of the Editor for each injection that failed_ | Only includes visible failures, for instance, it will ignore failures because of already existing links. If a user is shown a message about a failed injection, this event will fire. Includes data on the phrase and sentence for the injection. | `Title`, `phrase`, `sentence`
+`ali_injection_count` | _Fires the first time the Editor is shown_ | This logs the total amount of injections, the total amount of failed and manual injections, and the total amount of successful injections. | `total` (number of failed + successsful injections), `failed_automatic`, `failed_manual`, `final_injected` (number of successful injections)
+`ali_fetch_config_failed` | _Fires whenever the config object failed to fetch_ | When this happens, injections are aborted.
+`ali_auth_failed` | _Fires whenever authentication for the Editor fails._
+
+### Reporting
+Event | Action | Info | Payload
+--- | --- | --- | ---
+`ali_manual_report` | _Fires only through manual action when reporting issues with an injection via the Editor._ | | `Title`, `report_reason`, `sid` (of injection), `title` (of injection), `sentence`, `failed` (true or false), `failed_message` (reason for failure as given in the editor), `manual` (true or false)
+`ali_editor_error` | _Fires whenever an error occurs within the Editor._ | | `Title`, `phrase`, `sentence`
+`ali_injection_error` | _Fires whenever an error occurs during injection_ | This includes fetching the injections as well as actually injecting itself. Does not include fetching of the config object. | `message` (error message as given by the browser)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "5.2.1",
+	"version": "5.4.0-beta.topscroll-1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/api.ts

@@ -51,6 +51,9 @@ export async function fetchLinkInjections(
 
   const parsed = await response.json()
 
+  // This is used when debugging (using window.PlayPilotLinkInjections.debug())
+  window.PlayPilotLinkInjections.last_successful_fetch = parsed
+
   return parsed
 }
 

package/src/lib/enums/TrackingEvent.ts

@@ -1,13 +1,16 @@
+/** @see /events.md */
 export const TrackingEvent = Object.freeze({
   ArticlePageView: 'ali_article_page_view',
   ArticleInjected: 'ali_links_injected',
 
   TitleModalView: 'ali_title_modal_view',
+  TitleModalClose: 'ali_title_modal_close',
   TitleModalScroll: 'ali_title_modal_scroll',
   TitleModalPlaylinkClick: 'ali_title_modal_playlink_click',
   TitleModalSaveClick: 'ali_title_modal_save_click',
 
   TitlePopoverView: 'ali_title_popover_view',
+  TitlePopoverClose: 'ali_title_popover_close',
   TitlePopoverSaveClick: 'ali_title_popover_save_click',
   TitlePopoverPlaylinkClick: 'ali_title_popover_playlink_click',
 
@@ -22,4 +25,6 @@ export const TrackingEvent = Object.freeze({
   ManualReport: 'ali_manual_report',
   EditorError: 'ali_editor_error',
   InjectionError: 'ali_injection_error',
+
+  TopScrollClick: 'ali_top_scroll_click',
 })

package/src/lib/linkInjection.ts

@@ -103,6 +103,10 @@ export function getLinkInjectionsParentElement(): HTMLElement {
   return document.querySelector('article') || document.querySelector('main') || document.body
 }
 
+export function getPageText(elements: HTMLElement[]): string {
+  return elements.map(element => element.innerText).join('\n\n')
+}
+
 /**
  * Replace all found injections within all given elements on the page
  * @returns Returns an array of injections with injections that failed to be inserted marked as `failed`.

package/src/lib/tracking.ts

@@ -36,6 +36,14 @@ export async function track(event: string, title: TitleData | null = null, paylo
       source: 'ali',
     })),
   })
+
+  pushEventToWindow({ event, payload })
+}
+
+/** Save this event to the window object. Used when calling .debug() */
+function pushEventToWindow(data: { event: string, payload: Record<string, any> }) {
+  if (!window.PlayPilotLinkInjections.tracked_events) window.PlayPilotLinkInjections.tracked_events = []
+  window.PlayPilotLinkInjections.tracked_events?.push(data)
 }
 
 /**

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

@@ -6,6 +6,7 @@ declare global {
       app: any | null
       initialize(config: ScriptConfig): void
       destroy(): void
+      debug(): void
     }
   }
 }

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

@@ -7,4 +7,6 @@ export type ScriptConfig = {
   after_article_selector?: string
   after_article_insert_position?: InsertPosition | ''
   language?: string | null
+  last_successful_fetch?: LinkInjectionResponse | null
+  tracked_events?: { event: string, payload: Record<string, any> }[]
 }

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

@@ -8,7 +8,7 @@ export type TitleData = {
   genres: string[]
   year: number
   imdb_score: number
-  type: string
+  type: 'movie' | 'series'
   providers: PlaylinkData[]
   description: string
   small_poster: string

package/src/main.ts

@@ -1,6 +1,7 @@
 import { mount } from 'svelte'
 import App from './routes/+page.svelte'
-import { clearLinkInjections } from '$lib/linkInjection'
+import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, getPageText } from '$lib/linkInjection'
+import { getPageMetaData } from '$lib/meta'
 
 window.PlayPilotLinkInjections = {
   token: '',
@@ -11,6 +12,8 @@ window.PlayPilotLinkInjections = {
   language: null,
   organization_sid: null,
   domain_sid: null,
+  last_successful_fetch: null,
+  tracked_events: [],
   app: null,
 
   initialize(config = { token: '', selector: '', after_article_selector: '', after_article_insert_position: '', language: null, organization_sid: null, domain_sid: null, editorial_token: '' }): void {
@@ -48,6 +51,38 @@ window.PlayPilotLinkInjections = {
 
     clearLinkInjections()
   },
+
+  debug(): void {
+    const parentElement = getLinkInjectionsParentElement()
+    const elements = getLinkInjectionElements(parentElement)
+
+    console.group('PlayPilot Link Injection Debug')
+      console.groupCollapsed('Config')
+        console.table(Object.entries(this))
+      console.groupEnd()
+
+      console.groupCollapsed('Elements')
+        console.log('Parent element', parentElement)
+        console.log('Valid elements', elements)
+      console.groupEnd()
+
+      console.groupCollapsed('Last fetch')
+        console.log(this.last_successful_fetch)
+      console.groupEnd()
+
+      console.groupCollapsed('Meta')
+        console.log(getPageMetaData())
+      console.groupEnd()
+
+      console.groupCollapsed('Page text')
+        console.log(getPageText(elements))
+      console.groupEnd()
+
+      console.groupCollapsed('Tracked events')
+        console.log(this.tracked_events)
+      console.groupEnd()
+    console.groupEnd()
+  }
 }
 
 export default window.PlayPilotLinkInjections

package/src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte'
   import { fetchConfig, pollLinkInjections } from '$lib/api'
-  import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, injectLinksInDocument, separateLinkInjectionTypes } from '$lib/linkInjection'
+  import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, getPageText, injectLinksInDocument, separateLinkInjectionTypes } from '$lib/linkInjection'
   import { setTrackingSids, track } from '$lib/tracking'
   import { getFullUrlPath } from '$lib/url'
   import { isCrawler } from '$lib/crawler'
@@ -26,7 +26,7 @@
   // @ts-ignore It's ok if the response is empty
   const { ai_injections: aiInjections = [], manual_injections: manualInjections = [] } = $derived(response || {})
 
-  const pageText = $derived(elements.map(element => element.innerText).join('\n\n'))
+  const pageText = $derived(getPageText(elements))
 
   // Rerender link injections when linkInjections change. This is only relevant for editiorial mode.
   $effect(() => {

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

@@ -0,0 +1,251 @@
+<script lang="ts">
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { track } from '$lib/tracking'
+  import { fade } from 'svelte/transition'
+
+  // Placeholder data, of course
+  const { campaign = {
+    campaign_format: 'top_scroll',
+    campaign_type: 'video',
+    campaign_platforms: ['web', 'android_app', 'ios_app'],
+    campaign_name: 'some_campaign_NL',
+    campaign_start: '2025-04-24T00:00:00Z',
+    campaign_end: '2025-04-30T23:59:00Z',
+    campaign_region: 'nl',
+    content: {
+      header: 'Some top scroll header',
+      header_logo: 'https://example.com/',
+      header_logo_uuid: '4fb7d6ea152111f08dd20a58a9feac02',
+      subheader: null,
+      image: 'https://example.com/',
+      image_uuid: '4fb7d6ea152111f08dd20a58a9feac02',
+      video: null,
+      format: null,
+    },
+    cta: {
+      header: 'Button',
+      subheader: null,
+      image: null,
+      image_uuid: null,
+      url: 'https://google.com/',
+    },
+    content_playlist: null,
+    provider: null,
+    impression_trackers: [],
+    target_title_uuid: null,
+    target_title_sid: null,
+    backfill_providers: [],
+    autogenerated: false,
+    enabled: true,
+    hide_imdb_score: false,
+    hide_sponsored_message: false,
+    disclaimer: 'Some disclaimer',
+  } } = $props()
+
+  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 simple = $derived(format === 'large')
+
+  let clientWidth = $state(0)
+  let tooltipVisible = $state(false)
+
+  function trackClick(): void {
+    track(TrackingEvent.TopScrollClick)
+  }
+
+  function toggleTooltip(event: MouseEvent): void {
+    event.preventDefault()
+    event.stopPropagation()
+
+    tooltipVisible = !tooltipVisible
+  }
+</script>
+
+<a
+  {href}
+  target="_blank"
+  class="top-scroll"
+  class:simple
+  tabindex="-1"
+  onclick={trackClick}
+  rel="sponsored"
+  style:--width="{clientWidth}px"
+  bind:clientWidth>
+  <div class="content">
+    {#if simple}
+      <img class="content-image" src="https://picsum.photos/seed/movie/728/90" alt={header} width="728" height="90" />
+    {:else}
+      {#if logo}
+        <img class="logo" src="https://picsum.photos/seed/disney/50/50" 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('https://picsum.photos/seed/movie/728/90')"></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">
+  .top-scroll {
+    position: relative;
+    display: block;
+    width: 100%;
+    border-radius: var(--playpilot-top-scroll-border-radius, var(--playpilot-popover-border-radius, margin(1)));
+    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;
+  }
+
+  .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: var(--playpilot-top-scroll-border-radius, var(--playpilot-popover-border-radius, margin(1)));
+    background-image: var(--background);
+    background-position: center;
+    background-size: cover;
+    opacity: 0.4;
+
+    .top-scroll:hover & {
+      filter: brightness(1.15);
+    }
+  }
+
+  .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>

package/src/routes/components/Modal.svelte

@@ -7,11 +7,12 @@
 
   interface Props {
     children: Snippet
+    bubble?: Snippet
     onclose?: () => void
     onscroll?: () => void
   }
 
-  const { children, onclose = () => null, onscroll = () => null }: Props = $props()
+  const { children, bubble, onclose = () => null, onscroll = () => null }: Props = $props()
 
   setContext('scope', 'modal')
 
@@ -22,12 +23,12 @@
     return () => document.body.style.overflowY = baseOverflowStyle || ''
   })
 
-  function scaleOrFly(node: Element): TransitionConfig {
+  function scaleOrFly(node: Element, options: { y: number } = { y: 0 }): TransitionConfig {
     if (prefersReducedMotion.current) return fade(node, { duration: 0 })
 
     const shouldFly = window.innerWidth < 600
 
-    if (shouldFly) return fly(node, { duration: 250, y: window.innerHeight })
+    if (shouldFly) return fly(node, { duration: 250, ...options })
     return scale(node, { duration: 150, start: 0.85 })
   }
 </script>
@@ -35,7 +36,13 @@
 <svelte:window on:keydown={({ key }) => { if (key === 'Escape') onclose() }} />
 
 <div class="modal" transition:fade|global={{ duration: 150 }}>
-  <div class="dialog" {onscroll} role="dialog" aria-labelledby="title" transition:scaleOrFly|global data-view-transition-new>
+  {#if bubble}
+    <div class="bubble" transition:scaleOrFly|global={{ y: -10 }}>
+      {@render bubble()}
+    </div>
+  {/if}
+
+  <div class="dialog" {onscroll} role="dialog" aria-labelledby="title" transition:scaleOrFly|global={{ y: window.innerHeight }} data-view-transition-new>
     <div class="close">
       <RoundButton onclick={() => onclose()}>
         <IconClose />
@@ -51,44 +58,46 @@
 </div>
 
 <style lang="scss">
+  $max-width: 600px;
+
   .modal {
     z-index: 2147483647; // As high as she goes
     box-sizing: border-box;
     position: fixed;
     display: flex;
-    justify-content: center;
-    align-items: flex-start;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--playpilot-detail-backdrop, rgba(0, 0, 0, 0.65));
 
-    @media (min-width: 600px) {
+    @media (min-width: $max-width) {
       padding: margin(2);
+      gap: margin(1);
     }
   }
 
-
   .dialog {
     z-index: 1;
     position: relative;
     width: 100%;
-    max-width: 600px;
+    max-width: $max-width;
     max-height: 80vh;
     overflow: auto;
     margin-top: auto;
     border-radius: var(--playpilot-detail-border-radius, margin(1) margin(1) 0 0);
     background: var(--playpilot-detail-background, var(--playpilot-light));
 
-    @media (min-width: 600px) {
+    @media (min-width: $max-width) {
       margin-top: 0;
       border-radius: var(--playpilot-detail-border-radius, margin(1));
       max-height: 100%;
     }
   }
 
-
   .backdrop {
     z-index: 0;
     position: absolute;
@@ -112,4 +121,17 @@
       filter: brightness(1.1);
     }
   }
+
+  .bubble {
+    z-index: 1;
+    position: relative;
+    width: calc(100% - margin(1));
+    max-width: $max-width;
+    margin: margin(0.5);
+
+    @media (min-width: $max-width) {
+      width: 100%;
+      margin: 0;
+    }
+  }
 </style>

package/src/routes/components/Popover.svelte

@@ -5,10 +5,11 @@
 
   interface Props {
     children: Snippet
+    bubble?: Snippet
     maxHeight?: number
   }
 
-  let { children, maxHeight = $bindable() }: Props = $props()
+  let { children, bubble, maxHeight = $bindable() }: Props = $props()
 
   setContext('scope', 'popover')
 
@@ -63,11 +64,20 @@
   <div class="dialog" transition:fly|global={{ duration: prefersReducedMotion.current ? 0 : 100, y: 10 }} data-view-transition-old>
     {@render children()}
   </div>
+
+  {#if bubble}
+    <div transition:fly|global={{ duration: prefersReducedMotion.current ? 0 : 100, y: 10 }}>
+      {@render bubble()}
+    </div>
+  {/if}
 </div>
 
 <style lang="scss">
   .popover {
     --offset: #{margin(0.5)};
+    display: flex;
+    gap: margin(0.5);
+    flex-direction: column-reverse;
     position: absolute;
     top: calc((var(--offset) - 1px) * -1); /* Add 1 pixel to account for rounding errors */
     left: 0;
@@ -78,6 +88,7 @@
     z-index: 2147483647; // As high as she goes
 
     &.flip {
+      flex-direction: column;
       top: auto;
       bottom: calc(var(--offset) + 1px);  /* Add 1 pixel to account for rounding errors */
       transform: translateY(calc(100% + var(--offset)));

package/src/routes/components/TitleModal.svelte

@@ -2,8 +2,10 @@
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { track } from '$lib/tracking'
   import type { TitleData } from '$lib/types/title'
+  import { onMount } from 'svelte'
   import Modal from './Modal.svelte'
   import Title from './Title.svelte'
+  import TopScroll from './Ads/TopScroll.svelte'
 
   interface Props {
     onclose: () => void,
@@ -16,6 +18,11 @@
 
   let hasTrackedScrolling = false
 
+  onMount(() => {
+    const openTimestamp = Date.now()
+    return () => track(TrackingEvent.TitleModalClose, title, { time_spent: Date.now() - openTimestamp })
+  })
+
   function onscroll(): void {
     if (hasTrackedScrolling) return
 
@@ -26,4 +33,8 @@
 
 <Modal {onclose} {onscroll}>
   <Title {title} />
+
+  {#snippet bubble()}
+    <TopScroll />
+  {/snippet}
 </Modal>