@playpilot/tpi 8.9.3 → 8.10.1

package/events.md

@@ -122,3 +122,5 @@ Event | Action | Info | Payload
 `venus_title_rail_expand_click` | _Fires any time a title is expanded in a rail directly via a click_ | Does not fire when a title opens automatically on load or navigate | `Title`, `rail` (heading key of the rail)
 `venus_title_rail_set_index` | _Fires when navigating in the titles rail modal, either via arrows, swipe, or clicking titles_ | | `Title`, `index` (index of the new position of the slider)
 `venus_navigate` | _Fires when navigating on the explore page_ | Does not fire on initial load | `route` (the key of the given route)
+`venus_any_click` | _Fires on any click anywhere_ | | `selector` (parent > child selector of the clicked element), `text` (direct text content of the clicked element, limited to 30 characters)
+`venus_scroll_distance` | _Fires on increments of scroll distance_ | 25%, 50%, 75%, 100% | `scroll_percentage` (percentage of the explore element the user has seen)

package/package.json

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

package/src/lib/enums/TrackingEvent.ts

@@ -77,6 +77,8 @@ export const TrackingEvent = {
   ExploreTitleRailExpandClick: 'venus_title_rail_expand_click',
   ExploreTitleRailSetIndex: 'venus_title_rail_set_index',
   ExploreNavigate: 'venus_navigate',
+  ExploreAnyClick: 'venus_any_click',
+  ExploreScrollDistance: 'venus_scroll_distance',
 } as const
 
 export const MetaEvent = {

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

@@ -9,6 +9,8 @@
   import { onMount, type Snippet } from 'svelte'
   import Search from './Filter/Search.svelte'
   import Filter from './Filter/Filter.svelte'
+  import TrackAnyClick from '../TrackAnyClick.svelte'
+  import TrackScrollDistance from '../TrackScrollDistance.svelte'
 
   interface Props {
     navigate?: (key: string) => void
@@ -70,6 +72,9 @@
   {@render children()}
 </div>
 
+<TrackAnyClick />
+<TrackScrollDistance {element} />
+
 <style lang="scss">
   .explore {
     background: theme(explore-background, light);

package/src/routes/components/TrackAnyClick.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { track } from '$lib/tracking'
+
+  interface Props {
+    trackingEvent?: string
+  }
+
+  const { trackingEvent = TrackingEvent.ExploreAnyClick }: Props = $props()
+
+  function onclick(event: MouseEvent): void {
+    const target = event.target as Element
+    const parent = target.parentElement as Element
+
+    if (target === document.body) return
+
+    const parentSelector = `${parent?.nodeName.toLowerCase()}${getClasslistAsString(parent)}`
+    const targetSelector = `${target?.nodeName.toLowerCase()}${getClasslistAsString(target)}`
+    const selector = `${parentSelector} > ${targetSelector}`
+
+    const closestButtonOrLink = target.closest('a, button')
+    const directTextNode =
+      elementHasDirectTextContent(target) ||
+      elementHasDirectTextContent(parent) ||
+      (closestButtonOrLink && elementHasDirectTextContent(closestButtonOrLink))
+
+    const textContent = directTextNode ? directTextNode.textContent?.slice(0, 30) : ''
+    const label = target.getAttribute('aria-label') || closestButtonOrLink?.getAttribute('aria-label') || parent?.getAttribute('aria-label')
+    const placeholder = (target as HTMLInputElement).placeholder
+    const alt = (target as HTMLImageElement).alt
+    const text = (textContent || label || placeholder || alt || '').trim()
+
+    track(trackingEvent, null, { selector, text })
+  }
+
+  function getClasslistAsString(element: Element): string {
+    if (!element) return ''
+
+    const classnames = Array.from(element.classList).filter(classname => !classname.startsWith('s-'))
+
+    if (!classnames.length) return ''
+
+    return '.' + classnames.join('.')
+  }
+
+  function elementHasDirectTextContent(element: Element): Node | undefined {
+    return Array.from(element.childNodes).find(node => node.nodeName === '#text' && !!node.textContent?.trim())
+  }
+</script>
+
+<svelte:window {onclick} />

package/src/routes/components/TrackScrollDistance.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { track } from '$lib/tracking'
+
+  interface Props {
+    element: Element
+    trackingEvent?: string
+  }
+
+  const { element, trackingEvent = TrackingEvent.ExploreScrollDistance }: Props = $props()
+
+  const visibilityTrackingPercentages: Record<string, boolean> = {
+    '25': false,
+    '50': false,
+    '75': false,
+    '100': false,
+  }
+
+  function onscroll(): void {
+    const scrollDistance = window.scrollY
+    const windowHeight = window.innerHeight
+    const elementHeight = element.clientHeight
+    const elementBottomDistance = elementHeight + scrollDistance + element.getBoundingClientRect().top
+
+    const totalVisibilityPercentage = 100 / elementBottomDistance * (scrollDistance + windowHeight)
+
+    for (const percentage in visibilityTrackingPercentages) {
+      if (visibilityTrackingPercentages[percentage]) continue
+      if (totalVisibilityPercentage < parseInt(percentage)) continue
+
+      visibilityTrackingPercentages[percentage] = true
+
+      track(trackingEvent, null, { scroll_percentage: percentage + '%' })
+    }
+  }
+</script>
+
+<svelte:window {onscroll} />

package/src/routes/components/YouTubeEmbed.svelte

@@ -38,7 +38,7 @@
   </iframe>
 
   {#if showMuteControls}
-    <button class="mute" onclick={() => toggleMute()}>
+    <button class="mute" onclick={() => toggleMute()} aria-label="Mute">
       <IconMute muted={isMuted} />
     </button>
   {/if}

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

@@ -0,0 +1,243 @@
+import { render, fireEvent } from '@testing-library/svelte'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+import ClickTracking from '../../../routes/components/TrackAnyClick.svelte'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+describe('TrackAnyClick.svelte', () => {
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    vi.resetAllMocks()
+  })
+
+  it('Should call track with the correct selector and text content on click', async () => {
+    document.body.innerHTML = '<button class="some-button">Some button</button>'
+
+    const { getByRole } = render(ClickTracking)
+
+    await fireEvent.click(getByRole('button'))
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.ExploreAnyClick, null, { selector: 'body > button.some-button', text: 'Some button' })
+  })
+
+  it('Should not call track when body is clicked', async () => {
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('body'))
+
+    expect(track).not.toHaveBeenCalled()
+  })
+
+  it('Should limit text to 30 characters', async () => {
+    document.body.innerHTML = '<button class="some-button">This is a very long text that exceeds thirty characters</button>'
+
+    const { getByRole } = render(ClickTracking)
+
+    await fireEvent.click(getByRole('button'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'This is a very long text that',
+      }),
+    )
+  })
+
+  it('Should not include text when element has no direct text node', async () => {
+    document.body.innerHTML = '<button><span>Some text</span></button>'
+
+    const { getByRole } = render(ClickTracking)
+
+    await fireEvent.click(getByRole('button'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: '',
+      }),
+    )
+  })
+
+  it('Should include class names in the selector', async () => {
+    document.body.innerHTML = '<div class="some element"><button class="some button">Some text</button></div>'
+
+    const { getByRole } = render(ClickTracking)
+
+    await fireEvent.click(getByRole('button'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        selector: 'div.some.element > button.some.button',
+      }),
+    )
+  })
+
+  it('Should filter out svelte-generated s- classes from selector', async () => {
+    document.body.innerHTML = '<div class="some element s-abc"><button class="some button s-123">Some text</button></div>'
+
+    const { getByRole } = render(ClickTracking)
+
+    await fireEvent.click(getByRole('button'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        selector: 'div.some.element > button.some.button',
+      }),
+    )
+  })
+
+  it('Should build selector without classes when element has none', async () => {
+    document.body.innerHTML = '<section><p>Some text</p></section>'
+
+    const { getByRole } = render(ClickTracking)
+
+    await fireEvent.click(getByRole('paragraph'))
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.ExploreAnyClick, null, expect.objectContaining({ selector: 'section > p' }))
+  })
+
+  it('Should select text of closest button', async () => {
+    document.body.innerHTML = '<button>Some text <span><em></em></span></button>'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('em'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some text',
+      }),
+    )
+  })
+
+  it('Should select text of closest link', async () => {
+    document.body.innerHTML = '<a href="/">Some text <span><em></em></span></a>'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('em'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some text',
+      }),
+    )
+  })
+
+  it('Should use placeholder text', async () => {
+    document.body.innerHTML = '<input placeholder="Some placeholder" />'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('input'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some placeholder',
+      }),
+    )
+  })
+
+  it('Should use alt text', async () => {
+    document.body.innerHTML = '<img alt="Some alt text" />'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('img'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some alt text',
+      }),
+    )
+  })
+
+  it('Should use aria label', async () => {
+    document.body.innerHTML = '<button aria-label="Some aria label"></button>'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('button'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some aria label',
+      }),
+    )
+  })
+
+  it('Should use parent aria label', async () => {
+    document.body.innerHTML = '<button aria-label="Some aria label"><img /></button>'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('img'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some aria label',
+      }),
+    )
+  })
+
+  it('Should prefer aria label over placeholder and alt text', async () => {
+    document.body.innerHTML = '<button aria-label="Some aria label"><img placeholder="Some placeholder" alt="Some alt text" /></button>'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('img'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some aria label',
+      }),
+    )
+  })
+
+  it('Should prefer text content over aria label, placeholder and alt text', async () => {
+    document.body.innerHTML = '<button aria-label="Some aria label">Some text <img placeholder="Some placeholder" alt="Some alt text" /></button>'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('img'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some text',
+      }),
+    )
+  })
+})