@playpilot/tpi 5.14.0 → 5.15.0

package/package.json

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

package/src/lib/ads.ts

@@ -1,4 +1,5 @@
 import { getApiToken } from "./api"
+import { hasConsentedTo } from "./consent"
 import { apiBaseUrl } from "./constants"
 import { TrackingEvent } from "./enums/TrackingEvent"
 import { track } from "./tracking"
@@ -6,6 +7,8 @@ import type { Campaign, CampaignFormat } from "./types/campaign"
 import type { PlaylinkData } from "./types/playlink"
 
 export async function fetchAds() {
+  if (!hasConsentedTo('ads')) return
+
   const headers = new Headers({ 'Content-Type': 'application/json' })
   const apiToken = getApiToken()
 
@@ -29,6 +32,8 @@ export async function fetchAds() {
  * ad of the given format, which will likely always be the most recently added (or only) ad of that format.
  */
 export function getFirstAdOfType(format: CampaignFormat): Campaign | null {
+  if (!hasConsentedTo('ads')) return null
+
   return (window.PlayPilotLinkInjections?.ads || []).find(i => i.campaign_format === format) || null
 }
 

package/src/lib/consent.ts

@@ -0,0 +1,13 @@
+import type { ConsentKeys, ConsentOptions } from "./types/consent"
+
+export function setConsent(options: ConsentOptions): void {
+  if (!window.PlayPilotLinkInjections) return
+
+  window.PlayPilotLinkInjections.consents = options
+}
+
+export function hasConsentedTo(key: ConsentKeys): boolean {
+  if (window.PlayPilotLinkInjections.require_consent === false) return true
+
+  return !!window.PlayPilotLinkInjections.consents?.[key]
+}

package/src/lib/splitTest.ts

@@ -1,3 +1,4 @@
+import { hasConsentedTo } from "./consent"
 import { TrackingEvent } from "./enums/TrackingEvent"
 import { track } from "./tracking"
 
@@ -12,6 +13,8 @@ type SplitTest = {
  * The identifier is saved on the window object so that it is consistent across this session.
  */
 export function getSplitTestIdentifier({ key }: SplitTest): number {
+  if (!hasConsentedTo('tracking')) return 0
+
   const windowIdentifier = window.PlayPilotLinkInjections?.split_test_identifiers?.[key]
   if (windowIdentifier) return windowIdentifier
 
@@ -39,6 +42,8 @@ export function getSplitTestVariantName(test: SplitTest): string {
 }
 
 export function isInSplitTestVariant(test: SplitTest, variant = 1): boolean {
+  if (!hasConsentedTo('tracking')) return false
+
   return getSplitTestVariantIndex(test) === variant
 }
 

package/src/lib/tracking.ts

@@ -1,3 +1,4 @@
+import { hasConsentedTo } from "./consent"
 import { mobileBreakpoint } from "./constants"
 import type { TitleData } from "./types/title"
 import { getFullUrlPath } from "./url"
@@ -12,6 +13,8 @@ const baseUrl = 'https://insights.playpilot.net'
  * @param [payload] Any data that will be included with the event
  */
 export async function track(event: string, title: TitleData | null = null, payload: Record<string, any> = {}): Promise<void> {
+  if (!hasConsentedTo('tracking')) return
+
   const headers = new Headers({ 'Content-Type': 'application/json' })
 
   if (title) {

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

@@ -0,0 +1,9 @@
+export type ConsentKeys = 'ads' | 'pixels' | 'tracking' | 'split_tests' | 'affiliate'
+
+export type ConsentOptions = {
+  ads: boolean
+  pixels: boolean
+  tracking: boolean
+  split_tests: boolean
+  affiliate: boolean
+}

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

@@ -1,4 +1,5 @@
 import type { Campaign } from "./campaign"
+import type { ConsentOptions } from "./consent"
 import type { LinkInjection } from "./injection"
 
 export type ScriptConfig = {
@@ -14,5 +15,7 @@ export type ScriptConfig = {
   tracked_events?: { event: string, payload: Record<string, any> }[]
   split_test_identifiers?: Record<string, number>
   evaluated_link_injections?: LinkInjection[]
+  require_consent?: boolean
+  consents?: ConsentOptions
   ads?: Campaign[]
 }

package/src/main.ts

@@ -2,6 +2,7 @@ import { mount } from 'svelte'
 import App from './routes/+page.svelte'
 import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, getPageText } from '$lib/linkInjection'
 import { getPageMetaData } from '$lib/meta'
+import { setConsent } from '$lib/consent'
 import type { Campaign } from '$lib/types/campaign'
 
 window.PlayPilotLinkInjections = {
@@ -18,9 +19,17 @@ window.PlayPilotLinkInjections = {
   split_test_identifiers: {},
   evaluated_link_injections: [],
   ads: [],
+  require_consent: true,
+  consents: {
+    ads: false,
+    pixels: false,
+    tracking: false,
+    split_tests: false,
+    affiliate: false,
+  },
   app: null,
 
-  initialize(config = { token: '', selector: '', after_article_selector: '', after_article_insert_position: '', language: null, organization_sid: null, domain_sid: null, editorial_token: '' }): void {
+  initialize(config = { token: '', selector: '', after_article_selector: '', after_article_insert_position: '', language: null, organization_sid: null, domain_sid: null, editorial_token: '', require_consent: true }): void {
     if (!config.token) {
       console.error('An API token is required.')
       return
@@ -34,6 +43,17 @@ window.PlayPilotLinkInjections = {
     this.language = config.language
     this.organization_sid = config.organization_sid
     this.domain_sid = config.domain_sid
+    this.require_consent = config.require_consent
+
+    if (!this.require_consent) {
+      setConsent({
+        ads: true,
+        pixels: true,
+        tracking: true,
+        split_tests: true,
+        affiliate: true,
+      })
+    }
 
     if (this.app) this.destroy()
 

package/src/routes/+layout.svelte

@@ -8,9 +8,26 @@
 
   const { children } = $props()
 
-  // This is normally given through window.PlayPilotLinkInjections.initialize({ token: 'some-token' })
-  // @ts-ignore
-  if (browser) window.PlayPilotLinkInjections = { token: 'ZoAL14yqzevMyQiwckbvyetOkeIUeEDN', selector: 'article' }
+  if (browser) {
+    // @ts-ignore
+    // This is normally given through window.PlayPilotLinkInjections.initialize({ token: 'some-token' })
+    window.PlayPilotLinkInjections = { token: 'ZoAL14yqzevMyQiwckbvyetOkeIUeEDN', selector: 'article', require_consent: true }
+
+    // @ts-ignore
+    // Fake tcfapi consent to always be true in development. This way we can write the script assuming consent
+    // windows are standard and we don't have to make exceptions. If we do want actual exceptions they can be
+    // set via the config object using `require_consent`
+    window.__tcfapi = (command, _version, callback) => {
+      if (command !== 'addEventListener') return
+
+      setTimeout(() => callback({
+        purpose: { consents: { 1: true, 2: true, 7: true, 8: true, 9: true, 10: true } },
+        eventStatus: 'tcloaded',
+      }, true), 0)
+
+      return 1
+    }
+  }
 </script>
 
 <title>PlayPilot Link Injections</title>

package/src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount } from 'svelte'
+  import { onDestroy } from 'svelte'
   import { fetchConfig, pollLinkInjections } from '$lib/api'
   import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, getPageText, injectLinksInDocument, separateLinkInjectionTypes } from '$lib/linkInjection'
   import { setTrackingSids, track } from '$lib/tracking'
@@ -12,6 +12,7 @@
   import EditorTrigger from './components/Editorial/EditorTrigger.svelte'
   import Alert from './components/Editorial/Alert.svelte'
   import TrackingPixels from './components/TrackingPixels.svelte'
+  import Consent from './components/Consent.svelte'
   import Debugger from './components/Debugger.svelte'
   import { fetchAds } from '$lib/ads'
 
@@ -36,18 +37,18 @@
     if (isEditorialMode && !loading) rerender()
   })
 
-  onMount(() => {
-    if (isCrawler()) return
+  onDestroy(clearLinkInjections)
 
-    (async () => {
-      await initialize()
-      track(TrackingEvent.ArticlePageView)
+  // 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() {
+    if (isCrawler()) return
 
-      if (aiInjections.length || manualInjections.length) window.PlayPilotLinkInjections.ads = await fetchAds()
-    })()
+    await initialize()
+    track(TrackingEvent.ArticlePageView)
 
-    return () => clearLinkInjections()
-  })
+    if (aiInjections.length || manualInjections.length) window.PlayPilotLinkInjections.ads = await fetchAds()
+  }
 
   async function initialize(): Promise<void> {
     loading = true
@@ -205,6 +206,8 @@
   <TrackingPixels pixels={response.pixels} />
 {/if}
 
+<Consent onchange={start} />
+
 <style lang="scss">
   @import url('$lib/scss/variables.scss');
   @import url('$lib/scss/global.scss');

package/src/routes/components/Consent.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { setConsent } from '$lib/consent'
+
+  interface Props {
+    onchange: () => void
+  }
+
+  const { onchange }: Props = $props()
+
+  const maxTries = 100
+
+  let currentTry = 1
+
+  listenForConsent()
+
+  function listenForConsent(): void {
+    // If require_consent has been explicitely turned off we return right away and call `onchange`.
+    // We don't need to set consent values as require_consent=false will mean all consent is true.
+    if (window.PlayPilotLinkInjections.require_consent === false) {
+      onchange()
+      return
+    }
+
+    // @ts-ignore
+    if (!window.__tcfapi) {
+      // It could be that the consent script loads after our script. It's not terribly likely since our script is deferred,
+      // but still, it's possible. We retry for a little while to see if the script loads. If it doesn't load after x tries
+      // we assume there is no consent window at all.
+      if (currentTry < maxTries) setTimeout(listenForConsent, 100)
+      currentTry++
+
+      return
+    }
+
+    // @ts-ignore
+    // '2' here is the version of tcfapi
+    window.__tcfapi('addEventListener', 2, (tcData, success) => {
+      if (!success) return
+
+      const { purpose, eventStatus } = tcData
+
+      if (eventStatus !== 'tcloaded' && eventStatus !== 'useractioncomplete') return
+
+      // Consent is given as a list of ids, each id giving consent for a certain type of data.
+      // We don't use most of these, but for future reference:
+      // 1	 Store and/or access information on a device
+      // 2	 Basic ads
+      // 3	 Create a personalised ads profile
+      // 4	 Select personalised ads
+      // 5	 Create a personalised content profile
+      // 6	 Select personalised content
+      // 7	 Measure ad performance (impressions, clicks, conversions)
+      // 8	 Measure content performance (engagement, viewability)
+      // 9	 Apply market research to generate audience insights
+      // 10  Develop and improve products (Split tests, feature measurement)
+      // 11  Ensure security, prevent fraud, and debug (bot detection, fraud prevention)
+      // When there's overlap or ambiguity we select all possibly relevant categories
+
+      const consent = (id: number) => purpose.consents[id] === true
+
+      setConsent({
+        ads: consent(1),
+        pixels: consent(1) && consent(7),
+        split_tests: consent(9) && consent(10),
+        tracking: consent(7) && consent(8),
+        affiliate: consent(1) && consent(7),
+      })
+
+      onchange()
+    })
+  }
+</script>

package/src/routes/components/Playlink.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Disclaimer from './Ads/Disclaimer.svelte'
+  import { hasConsentedTo } from '$lib/consent'
   import { removeImageUrlPrefix } from '$lib/image'
   import { t } from '$lib/localization'
   import type { PlaylinkData } from '$lib/types/playlink'
@@ -23,7 +24,18 @@
   }
 </script>
 
-<a href={url} target="_blank" class="playlink" class:highlighted={highlighted && cta_text} class:no-category={hideCategory} {onclick} data-playlink={name} rel="sponsored">
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<svelte:element
+  {onclick}
+  this={hasConsentedTo('affiliate') ? 'a' : 'span'}
+  href={url}
+  target="_blank"
+  class="playlink"
+  class:highlighted={highlighted && cta_text}
+  class:no-category={hideCategory}
+  data-playlink={name}
+  rel="sponsored">
+
   <div class="playlink-content">
     <img src={removeImageUrlPrefix(logo_url)} alt="" height="36" width="36" />
 
@@ -45,7 +57,7 @@
       <Disclaimer {disclaimer} small />
     {/if}
   </div>
-</a>
+</svelte:element>
 
 <style lang="scss">
   $image-size: margin(2.25);
@@ -81,8 +93,8 @@
     font-size: var(--playpilot-playlinks-font-size, margin(0.75));
     line-height: 1;
 
-    &:hover,
-    &:active {
+    &:not(span):hover,
+    &:not(span):active {
       filter: var(--playpilot-playlink-hover-filter, brightness(1.1));
       background: var(--playpilot-playlink-hover-background, var(--playpilot-playlink-background, var(--playpilot-lighter))) !important;
       text-decoration: none !important;

package/src/routes/components/TrackingPixels.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { hasConsentedTo } from '$lib/consent'
+
   interface Props {
     pixels: string[]
   }
@@ -6,9 +8,11 @@
   const { pixels }: Props = $props()
 </script>
 
-{#each pixels as src}
-  <img {src} alt="" />
-{/each}
+{#if hasConsentedTo('pixels')}
+  {#each pixels as src}
+    <img {src} alt="" />
+  {/each}
+{/if}
 
 <style lang="scss">
   img {

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

@@ -2,6 +2,7 @@ import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
 import { fakeFetch } from '../helpers'
 
 import { fetchAds, getFirstAdOfType } from '$lib/ads'
+import { hasConsentedTo } from '$lib/consent'
 import { track } from '$lib/tracking'
 import { TrackingEvent } from '$lib/enums/TrackingEvent'
 
@@ -9,11 +10,17 @@ vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
 }))
 
-describe('$lib/api', () => {
+vi.mock('$lib/consent', () => ({
+  hasConsentedTo: vi.fn(() => true),
+}))
+
+describe('$lib/ads', () => {
   afterEach(() => {
     vi.resetAllMocks()
     // @ts-ignore
     window.PlayPilotLinkInjections = null
+
+    vi.mocked(hasConsentedTo).mockImplementation(() => true)
   })
 
   describe('fetchAds', () => {
@@ -42,6 +49,13 @@ describe('$lib/api', () => {
       expect(global.fetch).not.toHaveBeenCalled()
     })
 
+    it('Should not call fetch if user did not consent to ads', async () => {
+      vi.mocked(hasConsentedTo).mockImplementation(() => false)
+
+      await fetchAds()
+      expect(global.fetch).not.toHaveBeenCalled()
+    })
+
     it('Should fire track event when ads failed to fetch', async () => {
       fakeFetch({ ok: false, status: 505 })
 
@@ -64,5 +78,14 @@ describe('$lib/api', () => {
 
       expect(getFirstAdOfType('top_scroll')).toBe(null)
     })
+
+    it('Should not return ads if valid ad was given but user did not consent to ads', async () => {
+      vi.mocked(hasConsentedTo).mockImplementation(() => false)
+
+      // @ts-ignore
+      window.PlayPilotLinkInjections = { ads: [{ campaign_format: 'top_scroll' }] }
+
+      expect(getFirstAdOfType('top_scroll')).toBe(null)
+    })
   })
 })

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

@@ -0,0 +1,50 @@
+import { describe, it, expect, afterEach } from 'vitest'
+
+import { setConsent, hasConsentedTo } from '$lib/consent'
+
+describe('$lib/consent', () => {
+  afterEach(() => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = null
+  })
+
+  describe('setConsent', () => {
+    it('Should set consent in window object to given values', async () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = {}
+
+      setConsent({ ads: true, affiliate: true, pixels: true, split_tests: false, tracking: false })
+
+      expect(window.PlayPilotLinkInjections.consents).toEqual({ ads: true, affiliate: true, pixels: true, split_tests: false, tracking: false })
+    })
+  })
+
+  describe('hasConsentedTo', () => {
+    it('Should return values for given keys from window object', async () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = {
+        consents: { ads: true, affiliate: true, pixels: true, split_tests: false, tracking: false },
+      }
+
+      expect(hasConsentedTo('ads')).toBe(true)
+      expect(hasConsentedTo('affiliate')).toBe(true)
+      expect(hasConsentedTo('pixels')).toBe(true)
+      expect(hasConsentedTo('split_tests')).toBe(false)
+      expect(hasConsentedTo('tracking')).toBe(false)
+    })
+
+    it('Should return true regardless of values if require_consent is false', async () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = {
+        require_consent: false,
+        consents: { ads: true, affiliate: true, pixels: true, split_tests: false, tracking: false },
+      }
+
+      expect(hasConsentedTo('ads')).toBe(true)
+      expect(hasConsentedTo('affiliate')).toBe(true)
+      expect(hasConsentedTo('pixels')).toBe(true)
+      expect(hasConsentedTo('split_tests')).toBe(true)
+      expect(hasConsentedTo('tracking')).toBe(true)
+    })
+  })
+})

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

@@ -2,6 +2,11 @@ import { describe, it, expect, vi, afterEach } from 'vitest'
 import { getSplitTestIdentifier, getSplitTestVariantIndex, getSplitTestVariantName, isInSplitTestVariant, trackSplitTestAction, trackSplitTestView } from '$lib/splitTest'
 import { track } from '$lib/tracking'
 import { TrackingEvent } from '$lib/enums/TrackingEvent'
+import { hasConsentedTo } from '$lib/consent'
+
+vi.mock('$lib/consent', () => ({
+  hasConsentedTo: vi.fn(() => true),
+}))
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
@@ -13,13 +18,16 @@ describe('$lib/splitTest', () => {
     numberOfVariants: 2,
   }
 
-  describe('getSplitTestIdentifier', () => {
-    afterEach(() => {
-      // @ts-ignore
-      window.PlayPilotLinkInjections = {}
+  afterEach(() => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {}
 
-      vi.resetAllMocks()
-    })
+    vi.resetAllMocks()
+
+    vi.mocked(hasConsentedTo).mockImplementation(() => true)
+  })
+
+  describe('getSplitTestIdentifier', () => {
 
     it('Should set window object with given key if window object was not set to begin with', () => {
       // @ts-ignore
@@ -52,6 +60,12 @@ describe('$lib/splitTest', () => {
         'Some other key': expect.any(Number),
       })
     })
+
+    it('Should return 0 if user did not consent', () => {
+      vi.mocked(hasConsentedTo).mockImplementation(() => false)
+
+      expect(getSplitTestIdentifier(splitTest)).toBe(0)
+    })
   })
 
   describe('isInSplitTestVariant', () => {
@@ -93,6 +107,16 @@ describe('$lib/splitTest', () => {
       expect(isInSplitTestVariant(multiple, 1)).toBe(false)
       expect(isInSplitTestVariant(multiple, 2)).toBe(true)
     })
+
+    it('Should return false if user did not consent', () => {
+      vi.mocked(hasConsentedTo).mockImplementation(() => false)
+
+      // @ts-ignore
+      window.PlayPilotLinkInjections.split_test_identifiers = {}
+      window.PlayPilotLinkInjections.split_test_identifiers[splitTest.key] = 0.75
+
+      expect(isInSplitTestVariant(splitTest)).toBe(false)
+    })
   })
 
   describe('trackSplitTestView', () => {

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

@@ -3,8 +3,12 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { setTrackingSids, track } from '$lib/tracking'
 import { title } from '$lib/fakeData'
 import { getFullUrlPath } from '$lib/url'
+import { fakeFetch } from '../helpers'
+import { hasConsentedTo } from '$lib/consent'
 
-global.fetch = vi.fn()
+vi.mock('$lib/consent', () => ({
+  hasConsentedTo: vi.fn(() => true),
+}))
 
 describe('$lib/tracking', () => {
   beforeEach(() => {
@@ -12,6 +16,9 @@ describe('$lib/tracking', () => {
     window.PlayPilotLinkInjections = {}
 
     vi.resetAllMocks()
+
+    fakeFetch()
+    vi.mocked(hasConsentedTo).mockImplementation(() => true)
   })
 
   describe('track', () => {
@@ -149,6 +156,16 @@ describe('$lib/tracking', () => {
       )
     })
 
+    it('Should not track if user did not consent to tracking', () => {
+      vi.mocked(hasConsentedTo).mockImplementation(() => false)
+
+      track('Some event')
+
+      expect(global.fetch).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('setTrackingSids', () => {
     it('Should include device information', () => {
       track('Some event')
 
@@ -159,9 +176,7 @@ describe('$lib/tracking', () => {
         }),
       )
     })
-  })
 
-  describe('setTrackingSids', () => {
     it('Should set stores equal to the given values', () => {
       setTrackingSids({ domainSid: 'some-domain', organizationSid: 'some-organization' })
 

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

@@ -0,0 +1,69 @@
+import { render } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import Consent from '../../../routes/components/Consent.svelte'
+
+describe('Consent.svelte', () => {
+  it('Should call onchange right away when require_consent is false', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { require_consent: false }
+
+    const onchange = vi.fn()
+
+    render(Consent, { onchange })
+
+    expect(onchange).toHaveBeenCalled()
+  })
+
+  it('Should call onchange after user has consented', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { require_consent: true }
+
+    // @ts-ignore
+    window.__tcfapi = (command, _version, callback) => {
+      if (command !== 'addEventListener') return
+
+      callback({
+        purpose: { consents: { 1: true, 2: true, 7: true, 8: true, 9: true, 10: true } },
+        eventStatus: 'tcloaded',
+      }, true)
+
+      return 1
+    }
+
+    const onchange = vi.fn()
+
+    render(Consent, { onchange })
+
+    // @ts-ignore
+    window.__tcfapi()
+
+    expect(onchange).toHaveBeenCalled()
+  })
+
+  it('Should not call onchange after user has consented but eventStatus is invalid', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { require_consent: true }
+
+    // @ts-ignore
+    window.__tcfapi = (command, _version, callback) => {
+      if (command !== 'addEventListener') return
+
+      callback({
+        purpose: { consents: { 1: true, 2: true, 7: true, 8: true, 9: true, 10: true } },
+        eventStatus: 'invalid',
+      }, true)
+
+      return 1
+    }
+
+    const onchange = vi.fn()
+
+    render(Consent, { onchange })
+
+    // @ts-ignore
+    window.__tcfapi()
+
+    expect(onchange).not.toHaveBeenCalled()
+  })
+})