@playpilot/tpi 5.9.2 → 5.10.0

package/events.md

@@ -7,6 +7,7 @@ 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
+- `device`: Basic device info containing the screen type, size, touch, and orientation
 
 Events related to titles share an additional set of data (referred to below as `Title`):
 

package/package.json

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

package/src/lib/actions/middlemouse.ts

@@ -0,0 +1,18 @@
+export function middlemouse(node: HTMLElement, options: { onclick: (event: MouseEvent) => void }) {
+  let { onclick } = options
+
+  function mouseup(event: MouseEvent): MouseEvent | null {
+    if (event.button !== 1) return null
+
+    onclick(event)
+    return event
+  }
+
+  node.addEventListener('mouseup', mouseup)
+
+  return {
+    destroy() {
+      node.removeEventListener('mouseup', mouseup)
+    },
+  }
+}

package/src/lib/constants.ts

@@ -3,3 +3,4 @@ export const apiBaseUrl = 'https://partner-api.playpilot.tech/1.0.0'
 export const imageBaseUrl = 'https://img-external.playpilot.tech'
 
 export const imagePlaceholderDataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAB+CAMAAACNgsajAAAAb1BMVEU1Q2fI1N5YZoNVYoFndI9qd5JBT3FFU3S8yNS3xNC4xNFBTnDG0t2lscJJV3e9ytaptcWToLOOm6/BzdiZprh3hJ1aaIWJlatte5VPXHx7iJ9zgZlfbYk3RWmNmq5jcY1XZIO2wtCjsMB+i6I9S25IprTeAAABqUlEQVRo3u3W2ZKCMBCF4T5ExRmRVXBfZnn/Z5wKiU5pz1AJ7ZXV/x03HxVCB0jTNE3TNE3TNO0l2rbPNxcFdk8334AINTUD5eSaWbPoQs0qw0CVN98BzNNgE4NVv+ZHsJliuNVt7UgotATAafp/5mZiG4waAB0N5k0kUeg0wMykKDfLvRTl5pxyCFFupjQVo9ykiRTlphzl5nNQNu8C9Hv2lylDT0W2NMyUoeXdLC68KUNLuM7O9HskQ0uLLAEUR2aOQjfORE5LzHP2PMehxpl2k6otM8eh2aQGkBlieyRBYbs3y5Rk6IPZn8mT65XJR6LcROGErwaoxqLm4XvkiTVsy1FoYe5n06zcjazp1Wk0umHz3k9BT6+bXjXR6PnRtKpr755PfRjx4WPz7tXW/26gGYnOvOmrM7xtiK4qYtDOrpGZtnR7JFcSi+Z1XZt7k5d4NCZmcrWxqMzkbRgqN+nAULHpx1RiylFvftJwlxjUz2bWdpPB7NnSxZih5RFrD20Vai4izGOgeenPukMSUE6hte5denI7NMyU1xrSNE3TNE3TNE17hX4ADHsS0j0OCOoAAAAASUVORK5CYII='
+export const mobileBreakpoint = 600

package/src/lib/enums/SplitTest.ts

@@ -1,12 +1,4 @@
 export const SplitTest = {
-  InitialTest: {
-    key: 'initial_test',
-    numberOfVariants: 2,
-  },
-  MultipleVariants: {
-    key: 'multiple_variants',
-    numberOfVariants: 4,
-  },
   TopScrollFormat: {
     key: 'top_scroll_format',
     numberOfVariants: 2,

package/src/lib/linkInjection.ts

@@ -8,6 +8,7 @@ import { isHoldingSpecialKey } from './event'
 import { playFallbackViewTransition } from './viewTransition'
 import { prefersReducedMotion } from 'svelte/motion'
 import { getNumberOfOccurrencesInArray } from './array'
+import { mobileBreakpoint } from './constants'
 
 const keyDataAttribute = 'data-playpilot-injection-key'
 const keySelector = `[${keyDataAttribute}]`
@@ -348,7 +349,7 @@ function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
     playFallbackViewTransition(() => {
       destroyLinkPopover(false)
       openLinkModal(event, injection)
-    }, !prefersReducedMotion.current && window.innerWidth >= 600 && !window.matchMedia("(pointer: coarse)").matches)
+    }, !prefersReducedMotion.current && window.innerWidth >= mobileBreakpoint && !window.matchMedia("(pointer: coarse)").matches)
   })
 
   window.addEventListener('mousemove', (event) => {

package/src/lib/tracking.ts

@@ -1,3 +1,4 @@
+import { mobileBreakpoint } from "./constants"
 import type { TitleData } from "./types/title"
 import { getFullUrlPath } from "./url"
 
@@ -10,7 +11,7 @@ const baseUrl = 'https://insights.playpilot.net'
  * @param [title] Title related to the event
  * @param [payload] Any data that will be included with the event
  */
-export async function track(event: string, title: TitleData | null = null, payload: Record<string, string | string[] | number | boolean | null | undefined> = {}): Promise<void> {
+export async function track(event: string, title: TitleData | null = null, payload: Record<string, any> = {}): Promise<void> {
   const headers = new Headers({ 'Content-Type': 'application/json' })
 
   if (title) {
@@ -26,6 +27,13 @@ export async function track(event: string, title: TitleData | null = null, paylo
   payload.url = getFullUrlPath()
   payload.organization_sid = window.PlayPilotLinkInjections?.organization_sid
   payload.domain_sid = window.PlayPilotLinkInjections?.domain_sid
+  payload.device = {
+    type: window.innerWidth > mobileBreakpoint ? 'desktop' : 'mobile',
+    width: window.innerWidth,
+    height: window.innerHeight,
+    touch: window.matchMedia('(pointer: coarse)').matches,
+    orientation: screen.orientation?.type || 'undefined', // It would be excluded from the payload if it was `undefined`, we still want the string if it is actually undefined
+  }
 
   fetch(baseUrl, {
     headers,

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

@@ -7,6 +7,7 @@ declare global {
       initialize(config: ScriptConfig): void
       destroy(): void
       debug(): void
+      mockAd(override?: Record<any, any> = {}): void
     }
   }
 }

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 type { Campaign } from '$lib/types/campaign'
 
 window.PlayPilotLinkInjections = {
   token: '',
@@ -59,40 +60,67 @@ window.PlayPilotLinkInjections = {
     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('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('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('Last fetch')
+      console.log(this.last_successful_fetch)
+    console.groupEnd()
 
-      console.groupCollapsed('Meta')
-        console.log(getPageMetaData())
-      console.groupEnd()
+    console.groupCollapsed('Meta')
+      console.log(getPageMetaData())
+    console.groupEnd()
 
-      console.groupCollapsed('Page text')
-        console.log(getPageText(elements))
-      console.groupEnd()
+    console.groupCollapsed('Page text')
+      console.log(getPageText(elements))
+    console.groupEnd()
 
-      console.groupCollapsed('Evaluated injections')
-        console.log(this.evaluated_link_injections)
-      console.groupEnd()
+    console.groupCollapsed('Evaluated injections')
+      console.log(this.evaluated_link_injections)
+    console.groupEnd()
 
-      console.groupCollapsed('Tracked events')
-        console.log(this.tracked_events)
-      console.groupEnd()
+    console.groupCollapsed('Tracked events')
+      console.log(this.tracked_events)
+    console.groupEnd()
 
-      console.groupCollapsed('Split tests')
-        console.log(this.split_test_identifiers)
-      console.groupEnd()
+    console.groupCollapsed('Split tests')
+      console.log(this.split_test_identifiers)
     console.groupEnd()
+  },
+
+  mockAd(override = {}): void {
+    /** @ts-ignore We're not including every field here, that's ok. */
+    const campaign: Campaign = {
+      campaign_format: 'card',
+      campaign_type: 'image',
+      campaign_name: 'some_campaign',
+      content: {
+        header: 'Some content header',
+        header_logo: 'https://picsum.photos/seed/picsum/40/40',
+        header_logo_uuid: '',
+        subheader: 'Some content subheader',
+        image: 'https://picsum.photos/seed/picsum/640/360',
+        image_uuid: '',
+        video: null,
+        format: null,
+      },
+      cta: {
+        header: 'Some cta header',
+        subheader: 'Some cta subheader',
+        url: 'https://google.com/',
+        image: null,
+        image_uuid: null
+      },
+      disclaimer: 'Some disclaimer',
+    }
+
+    this.ads = [{ ...campaign, ...override }]
   }
 }
 

package/src/routes/+layout.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
   import { browser } from '$app/environment'
   import { page } from '$app/state'
-  import { SplitTest } from '$lib/enums/SplitTest'
-  import { getSplitTestVariantIndex } from '$lib/splitTest'
 
   /**
    * !! NOTE: This layout file is for development purposes only and will not be compiled with the final script.
@@ -80,8 +78,6 @@
 
       {#if browser}
         {@render children()}
-
-        Viewing with split test index: {getSplitTestVariantIndex(SplitTest.MultipleVariants)}
       {/if}
     {/key}
   {/if}

package/src/routes/+page.svelte

@@ -7,13 +7,12 @@
   import { isCrawler } from '$lib/crawler'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { authorize, getAuthToken, isEditorialModeEnabled, removeAuthCookie, setEditorialParamInUrl } from '$lib/auth'
-  import { trackSplitTestView } from '$lib/splitTest'
-  import { SplitTest } from '$lib/enums/SplitTest'
   import type { LinkInjectionResponse, LinkInjection, LinkInjectionTypes } from '$lib/types/injection'
   import Editor from './components/Editorial/Editor.svelte'
   import EditorTrigger from './components/Editorial/EditorTrigger.svelte'
   import Alert from './components/Editorial/Alert.svelte'
   import TrackingPixels from './components/TrackingPixels.svelte'
+  import Debugger from './components/Debugger.svelte'
   import { fetchAds } from '$lib/ads'
 
   let parentElement: HTMLElement | null = $state(null)
@@ -45,8 +44,6 @@
       track(TrackingEvent.ArticlePageView)
 
       if (aiInjections.length || manualInjections.length) window.PlayPilotLinkInjections.ads = await fetchAds()
-
-      trackSplitTestView(SplitTest.MultipleVariants)
     })()
 
     return () => clearLinkInjections()
@@ -202,6 +199,8 @@
   {/if}
 </div>
 
+<Debugger />
+
 {#if response?.pixels?.length}
   <TrackingPixels pixels={response.pixels} />
 {/if}

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { middlemouse } from '$lib/actions/middlemouse'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { track } from '$lib/tracking'
   import type { Campaign } from '$lib/types/campaign'
@@ -22,7 +23,7 @@
   }
 </script>
 
-<a {href} target="_blank" class="display" class:compact rel="sponsored" {onclick}>
+<a {href} target="_blank" class="display" class:compact rel="sponsored" {onclick} use:middlemouse={{ onclick }}>
   {#if disclaimer}
     <div class="disclaimer">
       {#if compact}

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { middlemouse } from '$lib/actions/middlemouse'
   import { ImageDimensions } from '$lib/enums/ImageDimensions'
   import { SplitTest } from '$lib/enums/SplitTest'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
@@ -30,7 +31,7 @@
   let clientWidth = $state(0)
   let tooltipVisible = $state(false)
 
-  function trackClick(): void {
+  function onclick(): void {
     track(TrackingEvent.TopScrollClick, null, { campaign_name: campaign.campaign_name })
   }
 
@@ -44,15 +45,16 @@
 
 <a
   {href}
+  {onclick}
+  use:middlemouse={{ onclick }}
+  bind:clientWidth
   target="_blank"
   class="top-scroll"
   class:simple
   class:inline
   tabindex="-1"
-  onclick={trackClick}
   rel="sponsored"
-  style:--width="{clientWidth}px"
-  bind:clientWidth>
+  style:--width="{clientWidth}px">
   <div class="content">
     {#if simple}
       <img class="content-image" src={contentImage} alt={header} width="728" height="90" />

package/src/routes/components/Debugger.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte'
+
+  const secrets = ['tpidebug', 'debugtpi']
+  const lastInputs: string[] = []
+
+  let data = $state(dataToReadable())
+  let shown = $state(false)
+  let interval: ReturnType<typeof setInterval> | null = null
+
+  onDestroy(() => {
+    if (interval) clearInterval(interval)
+  })
+
+  function dataToReadable() {
+    const data = window.PlayPilotLinkInjections
+
+    const succesfulInjections = data.evaluated_link_injections?.filter(injection => !injection.failed) || []
+    const failedInjections = data.evaluated_link_injections?.filter(injection => injection.failed) || []
+
+    return {
+      'Config': [
+        { label: 'Domain', data: data.domain_sid },
+        { label: 'Organization', data: data.organization_sid },
+        { label: 'HTML selector', data: data.selector },
+      ],
+      [`Succesful injections (${succesfulInjections.length})`]: succesfulInjections.map(injection => ({ label: injection.title, data: injection.sentence })),
+      [`Failed injections (${failedInjections.length})`]: failedInjections.map(injection => ({ label: injection.title, data: injection.failed_message })),
+      [`Fetched ads (${data.ads?.length || 0})`]: data.ads?.map(ad => ({ label: ad.campaign_name, data: ad })),
+      [`Tracking events (${data.tracked_events?.length || 0})`]: data.tracked_events?.map(event => ({ label: event.event, data: event.payload })),
+    }
+  }
+
+  // Keep track of all last inputs. If the last inputs match the "secret" key we show the debugger and start setting data
+  function onkeydown(event: KeyboardEvent): void {
+    const key = event.key
+
+    lastInputs.push(key)
+
+    // Check all secrets. Both "tpidebug" and "debugtpi" are accepted because remembering is hard.
+    // It's checked by comparing the last inputs to each secret.
+    shown = secrets.some(secret => lastInputs.slice(lastInputs.length - secret.length, lastInputs.length).join('') === secret)
+
+    interval = setInterval(() => data = dataToReadable(), 200)
+  }
+</script>
+
+<svelte:window {onkeydown} />
+
+{#if shown}
+  <div class="debugger">
+    <strong>TPI Debugger</strong>
+
+    <hr />
+
+    {#each Object.entries(data) as [key, value]}
+      <details>
+        <summary>{key}</summary>
+
+        {#if value?.length}
+          {#if Array.isArray(value)}
+            {#each value as { label, data }}
+              <div class="item">
+                <span class="label">{label}</span>:
+                <span class="data">{JSON.stringify(data)}</span>
+              </div>
+            {/each}
+          {/if}
+        {:else}
+          No data
+        {/if}
+      </details>
+    {/each}
+  </div>
+{/if}
+
+<style lang="scss">
+  summary {
+    color: var(--playpilot-primary);
+    font-weight: bold;
+  }
+
+  hr {
+    border-color: var(--playpilot-primary);
+  }
+
+  .debugger {
+    z-index: 2147483647; // As high as she goes
+    position: fixed;
+    top: 0;
+    left: 0;
+    max-width: 70dvw;
+    max-height: 50dvh;
+    padding: margin(1);
+    border: 1px solid var(--playpilot-primary);
+    background: black;
+    overflow: auto;
+    color: white;
+    font-family: "Consolas", monospace;
+  }
+
+  .item {
+    white-space: nowrap;
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
+
+  .data {
+    color: gray;
+  }
+</style>

package/src/routes/components/Modal.svelte

@@ -7,6 +7,7 @@
   import { prefersReducedMotion } from 'svelte/motion'
   import { isInSplitTestVariant } from '$lib/splitTest'
   import { SplitTest } from '$lib/enums/SplitTest'
+  import { mobileBreakpoint } from '$lib/constants'
 
   interface Props {
     children: Snippet
@@ -25,7 +26,7 @@
   let dialogElement: HTMLElement | null = $state(null)
   let dialogOffset: number = $state(0)
 
-  const isMobile = $derived(windowWidth < 600)
+  const isMobile = $derived(windowWidth < mobileBreakpoint)
 
   $effect(() => { if (windowWidth) dialogOffset = dialogElement?.offsetTop || 0 })
   $effect(() => { setTimeout(() => dialogOffset = dialogElement?.offsetTop || 0) }) // Set after the dialog has shown to get the proper height

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

@@ -137,20 +137,31 @@ describe('$lib/tracking', () => {
       )
     })
 
-    describe('setTrackingSids', () => {
-      it('Should set stores equal to the given values', () => {
-        setTrackingSids({ domainSid: 'some-domain', organizationSid: 'some-organization' })
+    it('Should include device information', () => {
+      track('Some event')
 
-        expect(window.PlayPilotLinkInjections.domain_sid).toBe('some-domain')
-        expect(window.PlayPilotLinkInjections.organization_sid).toBe('some-organization')
-      })
+      expect(global.fetch).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          body: expect.stringContaining('"device":{"type":"desktop","width":1024,"height":768,"touch":false,"orientation":"undefined"}'),
+        }),
+      )
+    })
+  })
+
+  describe('setTrackingSids', () => {
+    it('Should set stores equal to the given values', () => {
+      setTrackingSids({ domainSid: 'some-domain', organizationSid: 'some-organization' })
+
+      expect(window.PlayPilotLinkInjections.domain_sid).toBe('some-domain')
+      expect(window.PlayPilotLinkInjections.organization_sid).toBe('some-organization')
+    })
 
-      it('Should set stores to null if invalid values are given', () => {
-        setTrackingSids({ domainSid: '', organizationSid: undefined })
+    it('Should set stores to null if invalid values are given', () => {
+      setTrackingSids({ domainSid: '', organizationSid: undefined })
 
-        expect(window.PlayPilotLinkInjections.domain_sid).toBe(null)
-        expect(window.PlayPilotLinkInjections.organization_sid).toBe(null)
-      })
+      expect(window.PlayPilotLinkInjections.domain_sid).toBe(null)
+      expect(window.PlayPilotLinkInjections.organization_sid).toBe(null)
     })
   })
 })

package/src/tests/routes/components/Ads/Display.test.js

@@ -59,9 +59,14 @@ describe('Display.svelte', () => {
     /** @ts-ignore */
     const { getByRole } = render(Display, { campaign })
 
-    await fireEvent.click(getByRole('link'))
+    vi.resetAllMocks()
 
+    await fireEvent.click(getByRole('link'))
     expect(track).toHaveBeenCalledWith(TrackingEvent.DisplayAdClick, null, { campaign_name: campaign.campaign_name })
+    expect(track).toHaveBeenCalledTimes(1)
+
+    await fireEvent.mouseUp(getByRole('link'), { button: 1 })
+    expect(track).toHaveBeenCalledTimes(2)
   })
 
   it('Should render link without any content by default', () => {

package/src/tests/routes/components/Ads/TopScroll.test.js

@@ -92,9 +92,14 @@ describe('TopScroll.svelte', () => {
     /** @ts-ignore */
     const { getByRole } = render(TopScroll, { campaign })
 
-    await fireEvent.click(getByRole('link'))
+    vi.resetAllMocks()
 
+    await fireEvent.click(getByRole('link'))
     expect(track).toHaveBeenCalledWith(TrackingEvent.TopScrollClick, null, { campaign_name: campaign.campaign_name })
+    expect(track).toHaveBeenCalledTimes(1)
+
+    await fireEvent.mouseUp(getByRole('link'), { button: 1 })
+    expect(track).toHaveBeenCalledTimes(2)
   })
 
   it('Should render as simple variant when content format is large', async () => {

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

@@ -0,0 +1,54 @@
+import { fireEvent, render } from '@testing-library/svelte'
+import { afterEach, describe, expect, it } from 'vitest'
+
+import Debugger from '../../../routes/components/Debugger.svelte'
+
+describe('Debugger.svelte', () => {
+  afterEach(() => {
+    localStorage.clear()
+  })
+
+  it('Should show debugger after entering correct input', async () => {
+    const { getByText } = render(Debugger)
+
+    const keys = ['t', 'p', 'i', 'd', 'e', 'b', 'u', 'g']
+    for (const key of keys) {
+      await fireEvent.keyDown(window, { key })
+    }
+
+    expect(getByText('TPI Debugger')).toBeTruthy()
+  })
+
+  it('Should show debugger after entering other correct input', async () => {
+    const { getByText } = render(Debugger)
+
+    const keys = ['d', 'e', 'b', 'u', 'g', 't', 'p', 'i']
+    for (const key of keys) {
+      await fireEvent.keyDown(window, { key })
+    }
+
+    expect(getByText('TPI Debugger')).toBeTruthy()
+  })
+
+  it('Should not show debugger after entering incorrect input', async () => {
+    const { queryByText } = render(Debugger)
+
+    const keys = ['n', 'o', 't', 'd', 'e', 'b', 'u', 'g']
+    for (const key of keys) {
+      await fireEvent.keyDown(window, { key })
+    }
+
+    expect(queryByText('TPI Debugger')).not.toBeTruthy()
+  })
+
+  it('Should show debugger after entering correct input after first enter incorrect keys', async () => {
+    const { getByText } = render(Debugger)
+
+    const keys = ['a', 'b', 'c', 't', 'p', 'i', 'd', 'e', 'b', 'u', 'g']
+    for (const key of keys) {
+      await fireEvent.keyDown(window, { key })
+    }
+
+    expect(getByText('TPI Debugger')).toBeTruthy()
+  })
+})