@playpilot/tpi 5.25.0 → 5.26.0

package/package.json

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

package/src/lib/injection.ts

@@ -317,14 +317,20 @@ function createLinkInjectionElement(injection: LinkInjection): { injectionElemen
  * when things break we'd fix it instead.
  */
 function replaceIfSafeInjection(originalHtml: string, phrase: string, sentenceElement: HTMLElement, injectionElement: HTMLElement, replacementIndex: number): boolean {
+  const getNumberOfEmptyLinks = (element: HTMLElement) => Array.from(element.querySelectorAll('a')).filter(a => !a.innerText).length
+
   const dummyElement = document.createElement('div')
   dummyElement.innerHTML = originalHtml
 
+  const originalNumberOfEmptyLinks = getNumberOfEmptyLinks(dummyElement)
   const originalText = dummyElement.innerText
   dummyElement.innerHTML = replaceStartingFrom(originalHtml, phrase, injectionElement.outerHTML, replacementIndex)
 
   // If the text has changed at all, something probably went wrong as the new text is supposed to be the same as the old.
   if (Math.abs(dummyElement.innerText.length - originalText.length) > 1) return false
+  // One of our links pushed out an existing link on the page. When this happens the original link is emptied (because a link inserted into a link, and that is invalid)
+  // Not sure of the exact circumstances this might happen in, but it has happened on DigitalSpy
+  if (originalNumberOfEmptyLinks != getNumberOfEmptyLinks(dummyElement)) return false
 
   sentenceElement.innerHTML = dummyElement.innerHTML
 

package/src/lib/meta.ts

@@ -34,7 +34,7 @@ export function getPageModifiedTime(parent: HTMLElement): string | null {
     parent.querySelector('[itemprop="dateModified"]') ||
     document.querySelector('[itemprop="dateModified"]') || null) as HTMLElement | null
 
-  const datetime = element?.getAttribute('content') || element?.getAttribute('datetime') || element?.innerText
+  const datetime = getSchemaJson().dateModified || element?.getAttribute('content') || element?.getAttribute('datetime') || element?.innerText
 
   if (!datetime) return null
 
@@ -55,7 +55,7 @@ export function getPagePublishedTime(parent: HTMLElement): string | null {
     parent.querySelector('[datetime]') ||
     document.querySelector('[datetime]') || null) as HTMLElement | null
 
-  const datetime = element?.getAttribute('content') || element?.getAttribute('datetime') || element?.innerText
+  const datetime = getSchemaJson().datePublished || element?.getAttribute('content') || element?.getAttribute('datetime') || element?.innerText
 
   if (!datetime) return null
 
@@ -72,3 +72,15 @@ export function getDatetime(datetime: string): string | null {
     return null
   }
 }
+
+export function getSchemaJson(): Record<string, any> {
+  const schemaElement = document.querySelector('[type="application/ld+json"]')
+
+  if (!schemaElement) return {}
+
+  try {
+    return JSON.parse(schemaElement.textContent)
+  } catch(e) {
+    return {}
+  }
+}

package/src/lib/tracking.ts

@@ -15,7 +15,11 @@ const baseUrl = 'https://insights.playpilot.net'
  */
 export async function track(event: string, title: TitleData | null = null, payload: Record<string, any> = {}): Promise<void> {
   if (isCrawler()) return
-  if (!hasConsentedTo('tracking')) return
+
+  if (!hasConsentedTo('tracking')) {
+    queueTrackingEvent(event, title, payload)
+    return
+  }
 
   const headers = new Headers({ 'Content-Type': 'application/json' })
 
@@ -68,3 +72,24 @@ export function setTrackingSids({ organizationSid = null, domainSid = null }: {
   window.PlayPilotLinkInjections.organization_sid = organizationSid || null
   window.PlayPilotLinkInjections.domain_sid = domainSid || null
 }
+
+export function queueTrackingEvent(event: string, title: TitleData | null = null, payload: Record<string, any> = {}): void {
+  window.PlayPilotLinkInjections.queued_tracking_events ||= []
+  window.PlayPilotLinkInjections.queued_tracking_events.push({ event, title, payload })
+}
+
+/**
+ * If a user has consented, fire all tracking events that were previously fired before the user gave consent.
+ * If a user still has not given consent nothing will happen. This function will re-fire if the user were
+ * to give consent later still.
+ * All events are removed from the queue if the user has consented.
+ */
+export function fireQueuedTrackingEvents(): void {
+  if (!hasConsentedTo('tracking')) return
+
+  for (const { event, title, payload } of window.PlayPilotLinkInjections.queued_tracking_events || []) {
+    track(event, title, payload)
+  }
+
+  window.PlayPilotLinkInjections.queued_tracking_events = []
+}

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

@@ -1,6 +1,7 @@
 import type { Campaign } from './campaign'
 import type { ConsentOptions } from './consent'
 import type { LinkInjection } from './injection'
+import type { TitleData } from './title'
 
 export type ScriptConfig = {
   // The API token to authenticate with the backend.
@@ -23,6 +24,8 @@ export type ScriptConfig = {
   last_successful_fetch?: LinkInjectionResponse | null
   // Lists all tracked events through the `track()` function.
   tracked_events?: { event: string, payload: Record<string, any> }[]
+  // Queued tracking events that were fired before consent was given. These might be fired later if the user consents.
+  queued_tracking_events?: { event: string, title: TitleData | null, payload: Record<strong, any> }[]
   // Lists all split test identifiers as created by each running split test. Identifiers are only created when a split test is fired.
   split_test_identifiers?: Record<string, number>
   // All link injections as returned from external-pages, with AI and manual injections merged.

package/src/main.ts

@@ -16,6 +16,7 @@ window.PlayPilotLinkInjections = {
   domain_sid: null,
   last_successful_fetch: null,
   tracked_events: [],
+  queued_tracking_events: [],
   split_test_identifiers: {},
   evaluated_link_injections: [],
   ads: [],
@@ -109,6 +110,10 @@ window.PlayPilotLinkInjections = {
     console.log(this.tracked_events)
     console.groupEnd()
 
+    console.groupCollapsed('Queued tracking events')
+    console.log(this.queued_tracking_events)
+    console.groupEnd()
+
     console.groupCollapsed('Split tests')
     console.log(this.split_test_identifiers)
     console.groupEnd()

package/src/routes/+page.svelte

@@ -2,7 +2,7 @@
   import { onDestroy } from 'svelte'
   import { pollLinkInjections } from '$lib/api/externalPages'
   import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, getPageText, injectLinksInDocument, separateLinkInjectionTypes } from '$lib/injection'
-  import { setTrackingSids, track } from '$lib/tracking'
+  import { fireQueuedTrackingEvents, setTrackingSids, track } from '$lib/tracking'
   import { getFullUrlPath } from '$lib/url'
   import { isCrawler } from '$lib/crawler'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
@@ -33,6 +33,9 @@
 
   const pageText = $derived(getPageText(elements))
 
+  // Store initializing promise for later, we'll need that to be awaited after the user has given or refused consent.
+  const initializePromise = initialize()
+
   // Rerender link injections when linkInjections change. This is only relevant for editiorial mode.
   $effect(() => {
     if (isEditorialMode && !loading) rerender()
@@ -42,11 +45,13 @@
 
   // This function is called when a user has properly consented via tcfapi or if no consent is required.
   // Both of these options go through the Consent component.
-  async function start() {
-    await initialize()
-
+  async function afterConsent() {
     if (isCrawler()) return
 
+    // Make sure the initializing is done, otherwise injections are not set properly
+    await initializePromise
+
+    fireQueuedTrackingEvents()
     track(TrackingEvent.ArticlePageView)
 
     if (aiInjections.length || manualInjections.length) window.PlayPilotLinkInjections.ads = await fetchAds()
@@ -225,7 +230,7 @@
   <TrackingPixels pixels={response.pixels} />
 {/if}
 
-<Consent onchange={start} />
+<Consent onchange={afterConsent} />
 
 <style lang="scss">
   @import url('$lib/scss/global.scss');

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

@@ -703,6 +703,17 @@ describe('linkInjection.js', () => {
       expect(document.querySelector('a')).not.toBeTruthy()
     })
 
+    it('Should not inject injections into already existing links when the page contains multiple sentences of the same text where one has an existing link and the other does not.', () => {
+      document.body.innerHTML = '<p>This is a <a href="#">phrase</a>.</p> <p>This is a phrase.</p>'
+
+      const elements = Array.from(document.querySelectorAll('p'))
+      const injection = generateInjection('This is a phrase.', 'phrase')
+
+      injectLinksInDocument(elements, { aiInjections: [injection, injection], manualInjections: [] })
+
+      expect(document.querySelectorAll('a')).toHaveLength(1)
+    })
+
     it('Should not mount popover if user uses touch', async () => {
       mockMatchMedia(true)
 

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach } from 'vitest'
-import { getPageHeading, getPageModifiedTime, getPagePublishedTime } from '$lib/meta'
+import { getPageHeading, getPageModifiedTime, getPagePublishedTime, getSchemaJson } from '$lib/meta'
 
 describe('meta.js', () => {
   beforeEach(() => {
@@ -89,6 +89,22 @@ describe('meta.js', () => {
       const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
       expect(getPageModifiedTime(parent)).toBe('2025-01-01T00:00:00.000Z')
     })
+
+    it('Should use schema script before other elements', () => {
+      document.head.innerHTML = '<meta content="2025-01-01" property="article:modified_time">'
+      document.body.innerHTML = `
+        <div itemprop="dateModified">2025-01-02</div>
+        <section>
+          <div itemprop="dateModified">2025-01-03</div>
+        </section>
+        <script type="application/ld+json">
+          {"@context":"https://schema.org","dateModified":"2025-09-24T07:22:07.000Z"}
+        </script>
+      `
+
+      const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
+      expect(getPageModifiedTime(parent)).toBe('2025-09-24T07:22:07.000Z')
+    })
   })
 
   describe('getPagePublishedTime', () => {
@@ -197,5 +213,53 @@ describe('meta.js', () => {
       const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
       expect(getPagePublishedTime(parent)).toBe('2025-01-01T00:00:00.000Z')
     })
+
+    it('Should use schema script before other elements', () => {
+      document.head.innerHTML = '<meta content="2025-01-01" property="article:published_time">'
+      document.body.innerHTML = `
+        <time>2025-01-02</time>
+        <div itemprop="datePublished">2025-01-03</div>
+        <section>
+          <time>2025-01-04</time>
+        </section>
+        <script type="application/ld+json">
+          {"@context":"https://schema.org","datePublished":"2025-09-24T07:22:07.000Z"}
+        </script>
+      `
+
+      const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
+      expect(getPagePublishedTime(parent)).toBe('2025-09-24T07:22:07.000Z')
+    })
+  })
+
+  describe('getSchemaJson', () => {
+    it('Should return empty object if no schema element is present', () => {
+      document.body.innerHTML = '<script></script>'
+
+      expect(getSchemaJson()).toEqual({})
+    })
+
+    it('Should return schema relevant object', () => {
+      document.body.innerHTML = '<script type="application/ld+json">{ "key": "value" }</script>'
+
+      expect(getSchemaJson()).toEqual({ key: 'value' })
+    })
+
+    it('Should return empty object when json object is invalid', () => {
+      document.body.innerHTML = '<script type="application/ld+json"></script>'
+      expect(getSchemaJson()).toEqual({})
+
+      document.body.innerHTML = '<script type="application/ld+json">{}</script>'
+      expect(getSchemaJson()).toEqual({})
+
+      document.body.innerHTML = '<script type="application/ld+json">{ key: "value" }</script>'
+      expect(getSchemaJson()).toEqual({})
+
+      document.body.innerHTML = '<script type="application/ld+json">{ "key": "value" }}</script>'
+      expect(getSchemaJson()).toEqual({})
+
+      document.body.innerHTML = '<script type="application/ld+json">{ "key": "Some "unescaped" value" }</script>'
+      expect(getSchemaJson()).toEqual({})
+    })
   })
 })

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

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
-import { 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'
@@ -161,12 +161,13 @@ describe('$lib/tracking', () => {
       )
     })
 
-    it('Should not track if user did not consent to tracking', () => {
+    it('Should not track if user did not consent to tracking, instead adding it to a queue', () => {
       vi.mocked(hasConsentedTo).mockImplementation(() => false)
 
       track('Some event')
 
       expect(global.fetch).not.toHaveBeenCalled()
+      expect(window.PlayPilotLinkInjections.queued_tracking_events).toHaveLength(1)
     })
 
     it('Should not track if crawler', () => {
@@ -204,4 +205,42 @@ describe('$lib/tracking', () => {
       expect(window.PlayPilotLinkInjections.organization_sid).toBe(null)
     })
   })
+
+  describe('queueTrackingEvent', () => {
+    it('Should store the given data in window object', () => {
+      queueTrackingEvent('Some event', null, { key: 'value' })
+
+      expect(window.PlayPilotLinkInjections.queued_tracking_events).toEqual([{ event: 'Some event', title: null, payload: { key: 'value' } }])
+
+      queueTrackingEvent('Some second event', null, { key: 'value' })
+
+      expect(window.PlayPilotLinkInjections.queued_tracking_events).toEqual([
+        { event: 'Some event', title: null, payload: { key: 'value' } },
+        { event: 'Some second event', title: null, payload: { key: 'value' } },
+      ])
+    })
+  })
+
+  describe('fireQueuedTrackingEvents', () => {
+    it('Should not fire queued events if consent is not given', () => {
+      vi.mocked(hasConsentedTo).mockImplementation(() => false)
+
+      queueTrackingEvent('Some event', null, { key: 'value' })
+
+      fireQueuedTrackingEvents()
+
+      expect(global.fetch).not.toHaveBeenCalled()
+    })
+
+    it('Should fire all queued events if consent is given', () => {
+      vi.mocked(hasConsentedTo).mockImplementation(() => true)
+
+      queueTrackingEvent('Some event', null, { key: 'value' })
+      queueTrackingEvent('Some second event', null, { key: 'value' })
+
+      fireQueuedTrackingEvents()
+
+      expect(global.fetch).toHaveBeenCalledTimes(2)
+    })
+  })
 })

package/src/tests/routes/+page.test.js

@@ -12,6 +12,7 @@ import { isCrawler } from '$lib/crawler'
 import { getFullUrlPath } from '$lib/url'
 import { fetchAds } from '$lib/api/ads'
 import { fetchConfig } from '$lib/api/config'
+import { hasConsentedTo } from '$lib/consent'
 
 vi.mock('$lib/api/externalPages', () => ({
   fetchLinkInjections: vi.fn(() => {}),
@@ -42,6 +43,7 @@ vi.mock(import('$lib/injection'), async (importOriginal) => {
 vi.mock('$lib/tracking', () => ({
   setTrackingSids: vi.fn(),
   track: vi.fn(),
+  fireQueuedTrackingEvents: vi.fn(),
 }))
 
 vi.mock(import('$lib/api/auth'), async (importOriginal) => {
@@ -74,12 +76,18 @@ vi.mock('$lib/api/api', () => ({
   api: vi.fn(),
 }))
 
+vi.mock('$lib/consent', () => ({
+  setConsent: vi.fn(),
+  hasConsentedTo: vi.fn(() => true),
+}))
+
 describe('$routes/+page.svelte', () => {
   beforeEach(() => {
     document.body.innerHTML = ''
     vi.resetAllMocks()
     vi.mocked(injectLinksInDocument).mockReturnValue([])
     vi.mocked(getFullUrlPath).mockReturnValue('/test')
+    vi.mocked(hasConsentedTo).mockImplementation(() => true)
   })
 
   afterEach(() => {