@playpilot/tpi 5.9.0 → 5.9.2

package/events.md

@@ -70,7 +70,8 @@ Event | Action | Info | Payload
 ### Ads
 Event | Action | Info | Payload
 --- | --- | --- | ---
-`ali_top_scroll_view` | _Fired any time the top scroll ad is viewed_ | | `campaign_name`
-`ali_top_scroll_click` | _Fired any time the top scroll ad is called_ | | `campaign_name`
-`ali_display_ad_view` | _Fired any time the display ad is viewed_ | | `campaign_name`
-`ali_display_ad_click` | _Fired any time the display ad is clicked_ | | `campaign_name`
+`ali_top_scroll_view` | _Fires any time the top scroll ad is viewed_ | | `campaign_name`
+`ali_top_scroll_click` | _Fires any time the top scroll ad is called_ | | `campaign_name`
+`ali_display_ad_view` | _Fires any time the display ad is viewed_ | | `campaign_name`
+`ali_display_ad_click` | _Fires any time the display ad is clicked_ | | `campaign_name`
+`ali_display_ad_playlink_click` | _Fires any time the playlink linked to the display ad is clicked_ | | `campaign_name`

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "5.9.0",
+	"version": "5.9.2",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/ads.ts

@@ -38,12 +38,3 @@ export function campaignToPlaylink(campaign: Campaign): PlaylinkData {
     }
   }
 }
-
-// This is a temporary solution to load different campaigns per split test.
-// Remove me once the split test is done.
-export function getCampaignForDisplayAdVariant() {
-  const variantIndex = getSplitTestVariantIndex(SplitTest.DisplayAdPosition)
-  const campaignName = ['DigitalSpyAppleTVHeroA', 'DigitalSpyAppleTVHeroB', 'DigitalSpyAppleTVHeroC'][variantIndex]
-
-  return (window.PlayPilotLinkInjections?.ads || []).find(ad => ad.campaign_name === campaignName)
-}

package/src/lib/enums/SplitTest.ts

@@ -13,11 +13,4 @@ export const SplitTest = {
     // 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

@@ -30,6 +30,7 @@ export const TrackingEvent = Object.freeze({
   TopScrollClick: 'ali_top_scroll_click',
   DisplayAdView: 'ali_display_ad_view',
   DisplayAdClick: 'ali_display_ad_click',
+  DisplayedAdPlaylickClick: 'ali_display_ad_playlink_click',
 
   SplitTestView: 'ali_split_test_view',
   SplitTestAction: 'ali_split_test_action'

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

@@ -1,7 +1,5 @@
 <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'
   import Tooltip from '../Tooltip.svelte'
@@ -18,11 +16,9 @@
   const { header: buttonLabel, url: href } = $derived(cta)
 
   track(TrackingEvent.DisplayAdView, null, { campaign_name: campaign.campaign_name })
-  trackSplitTestView(SplitTest.DisplayAdPosition)
 
   function onclick(): void {
     track(TrackingEvent.DisplayAdClick, null, { campaign_name: campaign.campaign_name })
-    trackSplitTestAction(SplitTest.DisplayAdPosition, 'click')
   }
 </script>
 

package/src/routes/components/Modal.svelte

@@ -123,6 +123,10 @@
     background: var(--playpilot-detail-background, var(--playpilot-light));
     transition: transform 200ms;
 
+    @supports (height: 1dvh) {
+      max-height: 80dvh;
+    }
+
     @media (min-width: $max-width) {
       margin-top: 0;
       border-radius: var(--playpilot-detail-border-radius, margin(1));
@@ -130,10 +134,6 @@
       max-height: unset;
     }
 
-    @supports (height: 1dvh) {
-      max-height: 80dvh;
-    }
-
     &.tall {
       @media (max-width: 599px) {
         max-height: 90vh;

package/src/routes/components/Playlinks.svelte

@@ -6,12 +6,10 @@
   import type { PlaylinkData } from '$lib/types/playlink'
   import type { TitleData } from '$lib/types/title'
   import { heading } from '$lib/actions/heading'
-  import { isInSplitTestVariant, trackSplitTestAction } from '$lib/splitTest'
-  import { SplitTest } from '$lib/enums/SplitTest'
   import { getContext } from 'svelte'
   import Playlink from './Playlink.svelte'
   import Display from './Ads/Display.svelte'
-  import { campaignToPlaylink } from '$lib/ads'
+  import { campaignToPlaylink, getFirstAdOfType } from '$lib/ads'
 
   interface Props {
     playlinks: PlaylinkData[]
@@ -21,18 +19,14 @@
   const { playlinks, title }: Props = $props()
 
   const isModal = getContext('scope') === 'modal'
-  // This is a temporary solution to show different campaigns for different variants
-  const displayAd = (window.PlayPilotLinkInjections?.ads || []).find(ad => ad.campaign_name === 'DigitalSpyAppleTVHeroA')
-  const displayAdForPlaylink = (window.PlayPilotLinkInjections?.ads || []).find(ad => ad.campaign_name === 'DigitalSpyAppleTVPromotedOffer')
-  const showDisplayAd = displayAd && isInSplitTestVariant(SplitTest.DisplayAdPosition, 0)
-  const showPlaylinkAd = displayAdForPlaylink && isInSplitTestVariant(SplitTest.DisplayAdPosition, 1)
+  const displayAd = getFirstAdOfType('card')
 
   let outerWidth = $state(0)
 
   // Grid turns into a list when the playlinks container is small enough
   // It is also a list by default if a display ad is present, as that would
   // otherwise break the layout in ways that don't make sense to fix.
-  const list = $derived(outerWidth < 500 || showDisplayAd || showPlaylinkAd)
+  const list = $derived(outerWidth < 500 || !!displayAd)
 
   // Remove any playlinks without logos, these are likely sub providers.
   const filteredPlaylinks = $derived(playlinks.filter(playlink => !!playlink.logo_url))
@@ -56,11 +50,9 @@
   {#each mergedPlaylink as playlink, index}
     <Playlink {playlink} onclick={() => onclick(playlink.name)} />
 
-    <!-- Insert display ad after the first playlink -->
-    {#if showDisplayAd && (index === 0)}
-      <Display campaign={displayAd} compact={!isModal} />
-    {:else if showPlaylinkAd && (index === 0)}
-      <Playlink playlink={campaignToPlaylink(displayAdForPlaylink)} onclick={() => trackSplitTestAction(SplitTest.DisplayAdPosition, 'click_playlink_ad')} hideCategory />
+    <!-- A fake highlighted playlink as part of the display ad, to be shown after the first playlink -->
+    {#if displayAd && (index === 0)}
+      <Playlink playlink={campaignToPlaylink(displayAd)} onclick={() => track(TrackingEvent.DisplayedAdPlaylickClick, title, { campaign_name: displayAd.campaign_name })} hideCategory />
     {/if}
   {/each}
 
@@ -69,7 +61,7 @@
       {t('Title Unavailable')}
     </div>
 
-    {#if showDisplayAd}
+    {#if displayAd}
       <Display campaign={displayAd} compact={!isModal} />
     {/if}
   {/if}

package/src/routes/components/Popover.svelte

@@ -66,7 +66,7 @@
     maxHeight = Math.min(availableSpace, window.innerHeight * 0.8)
   }
 
-  function getOffset() {
+  function getOffset(): number {
     return parseFloat(getComputedStyle(document.documentElement).fontSize) // 1 rem
   }
 </script>

package/src/routes/components/RoundButton.svelte

@@ -8,7 +8,7 @@
     [key: string]: any;
   }
 
-  const { children, size = 'margin(2)', onclick = () => null, ...rest }: Props = $props()
+  const { children, size = '32px', onclick = () => null, ...rest }: Props = $props()
 </script>
 
 <svelte:element this={rest.href ? 'a' : 'button'} role={rest.href ? 'link' : 'button'} {onclick} class="button" style:--size={size} {...rest}>

package/src/routes/components/TitleModal.svelte

@@ -7,9 +7,7 @@
   import Title from './Title.svelte'
   import TopScroll from './Ads/TopScroll.svelte'
   import Display from './Ads/Display.svelte'
-  import { getCampaignForDisplayAdVariant, getFirstAdOfType } from '$lib/ads'
-  import { isInSplitTestVariant } from '$lib/splitTest'
-  import { SplitTest } from '$lib/enums/SplitTest'
+  import { getFirstAdOfType } from '$lib/ads'
 
   interface Props {
     onclose: () => void,
@@ -19,9 +17,7 @@
   const { onclose, title }: Props = $props()
 
   const topScrollAd = getFirstAdOfType('top_scroll')
-  const displayAd = getCampaignForDisplayAdVariant()
-
-  const isInDisplayAdFormatSplitTest = isInSplitTestVariant(SplitTest.DisplayAdPosition, 1) || isInSplitTestVariant(SplitTest.DisplayAdPosition, 2)
+  const displayAd = getFirstAdOfType('card')
 
   track(TrackingEvent.TitleModalView, title)
 
@@ -53,6 +49,6 @@
   {/if}
 {/snippet}
 
-<Modal {onclose} {onscroll} prepend={isInDisplayAdFormatSplitTest ? prepend : null} bubble={topScrollAd ? bubble : null} tall>
+<Modal {onclose} {onscroll} prepend={displayAd ? prepend : null} bubble={topScrollAd ? bubble : null} tall>
   <Title {title} />
 </Modal>

package/src/routes/components/TitlePopover.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { track } from '$lib/tracking'
-  import { getCampaignForDisplayAdVariant, getFirstAdOfType } from '$lib/ads'
+  import { getFirstAdOfType } from '$lib/ads'
   import type { TitleData } from '$lib/types/title'
   import { onMount } from 'svelte'
   import Popover from './Popover.svelte'
   import Title from './Title.svelte'
   import TopScroll from './Ads/TopScroll.svelte'
-  import { isInSplitTestVariant } from '$lib/splitTest'
-  import { SplitTest } from '$lib/enums/SplitTest'
   import Display from './Ads/Display.svelte'
 
   interface Props {
@@ -19,9 +17,7 @@
   const { event, title }: Props = $props()
 
   const topScroll = getFirstAdOfType('top_scroll')
-  const displayAd = getCampaignForDisplayAdVariant()
-
-  const isInDisplayAdFormatSplitTest = isInSplitTestVariant(SplitTest.DisplayAdPosition, 1) || isInSplitTestVariant(SplitTest.DisplayAdPosition, 2)
+  const displayAd = getFirstAdOfType('card')
 
   let maxHeight = $state(0)
   let element: HTMLElement | null = $state(null)
@@ -72,7 +68,7 @@
 {/snippet}
 
 <div class="title-popover" bind:this={element} data-playpilot-title-popover role="region" aria-labelledby="title">
-  <Popover bind:maxHeight append={isInDisplayAdFormatSplitTest && !compact ? append : null} bubble={topScroll ? bubble : null}>
+  <Popover bind:maxHeight append={displayAd && !compact ? append : null} bubble={topScroll ? bubble : null}>
     <Title {title} {compact} small  />
   </Popover>
 </div>

package/src/tests/routes/components/TitleModal.test.js

@@ -64,15 +64,14 @@ describe('TitleModal.svelte', () => {
     expect(container.querySelector('.top-scroll')).not.toBeTruthy()
   })
 
-  // !! Temporarily disabled while ads use a specific id during split test
-  // it('Should render display ad when given', () => {
-  //   // @ts-ignore
-  //   window.PlayPilotLinkInjections = { ads: [{ campaign_format: 'card', content: {}, cta: {} }] }
+  it('Should render display ad when given', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { ads: [{ campaign_format: 'card', content: {}, cta: {} }] }
 
-  //   const { container } = render(TitleModal, { onclose, title })
+    const { container } = render(TitleModal, { onclose, title })
 
-  //   expect(container.querySelector('.display')).toBeTruthy()
-  // })
+    expect(container.querySelector('.display')).toBeTruthy()
+  })
 
   it('Should not render top scroll ad when not given', () => {
     // @ts-ignore