@playpilot/tpi 8.7.1 → 8.8.0

package/package.json

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

package/src/lib/enums/TrackingEvent.ts

@@ -85,3 +85,8 @@ export const MetaEvent = {
   SearchQuery: 'SearchQuery',
   GenreInterest: 'GenreInterest',
 } as const
+
+export const MetaSource = {
+  Card: 'tpi_card',
+  Link: 'tpi_link',
+}

package/src/lib/injection.ts

@@ -189,6 +189,7 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
       duplicate,
       failed,
       failed_message: failedMessage,
+      matchingElement,
     }
   })
 }

package/src/lib/pixel.ts

@@ -0,0 +1,6 @@
+import { hasConsentedTo } from './consent'
+
+export function isPixelAllowed(): boolean {
+  if (!window.PlayPilotLinkInjections.config?.allow_retargeting_pixels) return false
+  return hasConsentedTo('pixels')
+}

package/src/lib/tracking.ts

@@ -103,8 +103,3 @@ export function fireQueuedTrackingEvents(): void {
 
   window.PlayPilotLinkInjections.queued_tracking_events = []
 }
-
-export function isPixelAllowed(): boolean {
-  if (!window.PlayPilotLinkInjections.config?.allow_retargeting_pixels) return false
-  return hasConsentedTo('pixels')
-}

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

@@ -18,6 +18,7 @@ export type LinkInjection = {
   manual?: boolean
   removed?: boolean
   duplicate?: boolean
+  matchingElement?: null | Element
 }
 
 export type LinkInjectionRanges = Record<string, { elementIndex: number, from: number, to: number }>

package/src/routes/+page.svelte

@@ -20,6 +20,7 @@
   import Debugger from './components/Debugger.svelte'
   import UserJourney from './components/UserJourney.svelte'
   import PostersScrollReveal from './components/PostersScrollReveal.svelte'
+  import TrackingPixelsForTitleDataPerLink from './components/TrackingPixelsForTitleDataPerLink.svelte'
 
   let elements: HTMLElement[] = $state([])
 
@@ -230,6 +231,10 @@
   <TrackingPixels pixels={response.pixels} />
 {/if}
 
+{#if linkInjections.length}
+  <TrackingPixelsForTitleDataPerLink {linkInjections} />
+{/if}
+
 {#key linkInjections}
   <UserJourney />
   <PostersScrollReveal />

package/src/routes/components/Explore/Filter/Filter.svelte

@@ -28,7 +28,7 @@
   }, {
     label: t('Genres'),
     param: 'genres',
-    data: genres.filter(genre => parseInt(genre.slug) < 900).map(genre => ({ label: genre.name, value: genre.slug })),
+    data: genres.filter(genre => parseInt(genre.slug) < 900).map(genre => ({ label: t(genre.name), value: genre.slug })),
   }, {
     label: t('IMDb'),
     param: 'imdb_score',
@@ -106,4 +106,8 @@
       margin-top: margin(0.5);
     }
   }
+
+  .sorting {
+    margin-top: margin(0.1);
+  }
 </style>

package/src/routes/components/Genres.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import genreData from '$lib/data/genres.json'
-  import { MetaEvent } from '$lib/enums/TrackingEvent'
+  import { MetaEvent, MetaSource } from '$lib/enums/TrackingEvent'
   import { t } from '$lib/localization'
-  import { isPixelAllowed } from '$lib/tracking'
+  import { isPixelAllowed } from '$lib/pixel'
   import { trackViewViaPixel } from '@playpilot/retargeting-tracking'
 
   interface Props {
@@ -20,7 +20,7 @@
   {@const genreName = genreData.find(g => g.slug === genre)?.name}
 
   {#if genreName}
-    <div class="genre" {@attach isPixelAllowed() ? trackViewViaPixel(MetaEvent.GenreInterest, { genre: genreName }) : null}>
+    <div class="genre" {@attach isPixelAllowed() ? trackViewViaPixel(MetaEvent.GenreInterest, { genre: genreName, source: MetaSource.Card }) : null}>
       {t(genreName)}
     </div>
   {/if}

package/src/routes/components/Playlinks/Playlink.svelte

@@ -6,8 +6,8 @@
   import { t } from '$lib/localization'
   import type { PlaylinkData } from '$lib/types/playlink'
   import { trackClickViaPixel, trackViewViaPixel } from '@playpilot/retargeting-tracking'
-  import { MetaEvent } from '$lib/enums/TrackingEvent'
-  import { isPixelAllowed } from '$lib/tracking'
+  import { MetaEvent, MetaSource } from '$lib/enums/TrackingEvent'
+  import { isPixelAllowed } from '$lib/pixel'
 
   interface Props {
     playlink: PlaylinkData
@@ -37,7 +37,7 @@
 <svelte:element
   {onclick}
   this={!window.PlayPilotLinkInjections?.config?.require_affiliate_consent || hasConsentedTo('affiliate') ? 'a' : 'span'}
-  {@attach usePixel ? trackViewViaPixel(MetaEvent.ProviderInterest, { provider: playlink.slug }) : null}
+  {@attach usePixel ? trackViewViaPixel(MetaEvent.ProviderInterest, { provider: playlink.slug, source: MetaSource.Card }) : null}
   {@attach usePixel ? trackClickViaPixel(MetaEvent.ProviderClick, { provider: playlink.slug }) : null}
   href={url}
   target="_blank"

package/src/routes/components/TrackingPixelsForTitleDataPerLink.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import genreData from '$lib/data/genres.json'
+  import { MetaEvent, MetaSource } from '$lib/enums/TrackingEvent'
+  import { keyDataAttribute } from '$lib/injection'
+  import { isPixelAllowed } from '$lib/pixel'
+  import type { LinkInjection } from '$lib/types/injection'
+  import type { TitleData } from '$lib/types/title'
+  import { trackViaPixel } from '@playpilot/retargeting-tracking'
+  import { onMount } from 'svelte'
+
+  interface Props {
+    linkInjections: LinkInjection[]
+  }
+
+  const { linkInjections }: Props = $props()
+
+  const previouslyTrackingTitles: string[] = []
+
+  onMount(() => {
+    if (!isPixelAllowed()) return
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (!entry.isIntersecting) return
+
+        observer!.unobserve(entry.target)
+
+        const key = entry.target.getAttribute(keyDataAttribute)
+        const matchingInjection = linkInjections.find(injection => injection.key === key)
+        const title = matchingInjection?.title_details
+
+        if (!key || !matchingInjection || !title) return
+        if (previouslyTrackingTitles.includes(title.sid)) return
+
+        trackPixelsForTitle(title)
+      })
+    })
+
+    linkInjections.forEach(injection => {
+      if (injection.matchingElement) observer.observe(injection.matchingElement)
+    })
+
+    return () => observer.disconnect()
+  })
+
+  function trackPixelsForTitle({ sid, genres, participants, providers }: TitleData): void {
+    previouslyTrackingTitles.push(sid)
+
+    genres.slice(0, 3).forEach(genre => {
+      trackViaPixel(MetaEvent.GenreInterest, { genre: genreData.find(g => g.slug === genre)?.name, source: MetaSource.Link })
+    })
+
+    participants?.slice(0, 5).forEach(participant => {
+      trackViaPixel(MetaEvent.ParticipantInterest, { participant: participant.name, source: MetaSource.Link })
+    })
+
+    providers?.forEach(provider => {
+      trackViaPixel(MetaEvent.ProviderInterest, { provider: provider.name, source: MetaSource.Link })
+    })
+  }
+</script>

package/src/routes/components/UserJourney.svelte

@@ -28,7 +28,7 @@
 
     observeCreatedLinks()
 
-    ;() => linksIntersectionObserver?.disconnect()
+    return () => linksIntersectionObserver?.disconnect?.()
   })
 
   function observeCreatedLinks(): void {

package/src/tests/lib/pixel.test.js

@@ -0,0 +1,53 @@
+import { hasConsentedTo } from '$lib/consent'
+import { isPixelAllowed } from '$lib/pixel'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('$lib/consent', () => ({
+  hasConsentedTo: vi.fn(() => true),
+}))
+
+describe('pixel.ts', () => {
+  beforeEach(() => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {}
+
+    vi.mocked(hasConsentedTo).mockImplementation(() => true)
+  })
+
+  describe('isPixelAllow', () => {
+    it('Should return false if no config object is set', () => {
+      vi.mocked(hasConsentedTo).mockImplementation(() => true)
+      window.PlayPilotLinkInjections.config = null
+
+      expect(isPixelAllowed()).toBe(false)
+    })
+
+    it('Should return false if config object is without allow_retargeting_pixels', () => {
+      vi.mocked(hasConsentedTo).mockImplementation(() => true)
+      window.PlayPilotLinkInjections.config = { something: true }
+
+      expect(isPixelAllowed()).toBe(false)
+    })
+
+    it('Should return false if config object is allow_retargeting_pixels is false', () => {
+      vi.mocked(hasConsentedTo).mockImplementation(() => true)
+      window.PlayPilotLinkInjections.config = { allow_retargeting_pixels: false }
+
+      expect(isPixelAllowed()).toBe(false)
+    })
+
+    it('Should return true if config object is allow_retargeting_pixels is true', () => {
+      vi.mocked(hasConsentedTo).mockImplementation(() => true)
+      window.PlayPilotLinkInjections.config = { allow_retargeting_pixels: true }
+
+      expect(isPixelAllowed()).toBe(true)
+    })
+
+    it('Should return true if config object is allow_retargeting_pixels is true but hasConsentedTo is false', () => {
+      vi.mocked(hasConsentedTo).mockImplementation(() => false)
+      window.PlayPilotLinkInjections.config = { allow_retargeting_pixels: true }
+
+      expect(isPixelAllowed()).toBe(false)
+    })
+  })
+})

package/src/tests/lib/tracking.test.js

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
-import { fireQueuedTrackingEvents, isPixelAllowed, queueTrackingEvent, setTrackingSids, track } from '$lib/tracking'
+import { fireQueuedTrackingEvents, queueTrackingEvent, setTrackingSids, track } from '$lib/tracking'
 import { title } from '$lib/fakeData'
 import { getFullUrlPath } from '$lib/url'
 import { fakeFetch } from '../helpers'
@@ -299,41 +299,4 @@ describe('$lib/tracking', () => {
       expect(global.fetch).toHaveBeenCalledTimes(2)
     })
   })
-
-  describe('isPixelAllow', () => {
-    it('Should return false if no config object is set', () => {
-      vi.mocked(hasConsentedTo).mockImplementation(() => true)
-      window.PlayPilotLinkInjections.config = null
-
-      expect(isPixelAllowed()).toBe(false)
-    })
-
-    it('Should return false if config object is without allow_retargeting_pixels', () => {
-      vi.mocked(hasConsentedTo).mockImplementation(() => true)
-      window.PlayPilotLinkInjections.config = { something: true }
-
-      expect(isPixelAllowed()).toBe(false)
-    })
-
-    it('Should return false if config object is allow_retargeting_pixels is false', () => {
-      vi.mocked(hasConsentedTo).mockImplementation(() => true)
-      window.PlayPilotLinkInjections.config = { allow_retargeting_pixels: false }
-
-      expect(isPixelAllowed()).toBe(false)
-    })
-
-    it('Should return true if config object is allow_retargeting_pixels is true', () => {
-      vi.mocked(hasConsentedTo).mockImplementation(() => true)
-      window.PlayPilotLinkInjections.config = { allow_retargeting_pixels: true }
-
-      expect(isPixelAllowed()).toBe(true)
-    })
-
-    it('Should return true if config object is allow_retargeting_pixels is true but hasConsentedTo is false', () => {
-      vi.mocked(hasConsentedTo).mockImplementation(() => false)
-      window.PlayPilotLinkInjections.config = { allow_retargeting_pixels: true }
-
-      expect(isPixelAllowed()).toBe(false)
-    })
-  })
 })

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

@@ -13,6 +13,9 @@ vi.mock('$lib/consent', () => ({
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
+}))
+
+vi.mock('$lib/pixel', () => ({
   isPixelAllowed: vi.fn(),
 }))
 

package/src/tests/routes/components/Playlinks/Playlink.test.js

@@ -6,6 +6,9 @@ import { hasConsentedTo } from '$lib/consent'
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
+}))
+
+vi.mock('$lib/pixel', () => ({
   isPixelAllowed: vi.fn(),
 }))
 

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

@@ -9,6 +9,9 @@ import { getContext } from 'svelte'
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
+}))
+
+vi.mock('$lib/pixel', () => ({
   isPixelAllowed: vi.fn(),
 }))
 

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

@@ -9,6 +9,9 @@ import { isYouTubeVideoAvailableInRegion } from '$lib/api/youtubeAvailability'
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
+}))
+
+vi.mock('$lib/pixel', () => ({
   isPixelAllowed: vi.fn(),
 }))
 

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

@@ -13,6 +13,9 @@ vi.mock('$lib/consent', () => ({
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
+}))
+
+vi.mock('$lib/pixel', () => ({
   isPixelAllowed: vi.fn(),
 }))