Click Tracking Test Suite

1. Link Clicks

What's being tested: The SDK detects <a> elements and classifies them as internal or external based on hostname comparison.

Expected behavior:

All <a> tags emit ct: 'link'
ext: true when hostname differs from current page
ext: false for same-domain links and anchor links
dest contains the full href URL

SDK: isAnchor(), isExternalLink() in click.ts

Internal Link Home Page

ct: link, ext: false

Internal (Relative) Form Page

ct: link, ext: false

External Link Google

ct: link, ext: true

External (GitHub) GitHub

ct: link, ext: true

Anchor Link Jump to Buttons

ct: link, ext: false

Hash Only Top of Page

ct: link, ext: false

2. Buttons & Input Elements

What's being tested: The SDK detects <button> elements and <input type="submit">.

Expected behavior:

<button> (any type) → ct: 'button', tag: 'button'
<input type="submit"> → ct: 'button', tag: 'input'
<input type="button"> → NOT tracked by default (SDK only checks type="submit")
Disabled buttons → No event emitted

SDK: isButton() checks tagName === 'BUTTON' || (tagName === 'INPUT' && type === 'submit')

Standard Button

ct: button, tag: button

type="button"

ct: button, tag: button

type="submit"

ct: button, tag: button

type="reset"

ct: button, tag: button

Input Submit

ct: button, tag: input

Input Button

NOT TRACKED (SDK limitation)

Disabled Button

No event (disabled)

Disabled Input

No event (disabled)

Known Limitation: <input type="button"> is NOT detected as a button by the SDK. Only type="submit" inputs are tracked. This may be intentional (semantic difference) or a gap to fix.

3. Download Detection

What's being tested: Links to downloadable files are detected by file extension or download attribute.

Expected behavior:

Files with recognized extensions → ct: 'download', dl: '{extension}'
Links with download attribute → ct: 'download' regardless of extension
Unrecognized extensions → ct: 'link' (not download)

Supported extensions (40+): pdf, doc, docx, xls, xlsx, ppt, pptx, rtf, odt, ods, odp, epub, mobi, csv, txt, json, xml, zip, rar, 7z, tar, gz, bz2, xz, tgz, cab, iso, mp3, wav, flac, ogg, aac, m4a, mp4, avi, mov, wmv, mkv, webm, m4v, exe, dmg, pkg, deb, rpm, msi, apk, ipa, jar

SDK: DOWNLOAD_EXTENSIONS array, isDownloadLink(), getFileExtension()

Documents

PDF 📄 document.pdf

ct: download, dl: pdf

DOCX 📝 document.docx

ct: download, dl: docx

XLSX 📊 spreadsheet.xlsx

ct: download, dl: xlsx

PPTX 📽️ slides.pptx

ct: download, dl: pptx

CSV 📋 data.csv

ct: download, dl: csv

TXT 📃 readme.txt

ct: download, dl: txt

Media Files

MP4 🎬 video.mp4

ct: download, dl: mp4

MOV 🎬 video.mov

ct: download, dl: mov

MKV 🎬 video.mkv

ct: download, dl: mkv

MP3 🎵 audio.mp3

ct: download, dl: mp3

WAV 🎵 audio.wav

ct: download, dl: wav

FLAC 🎵 audio.flac

ct: download, dl: flac

Installers / Applications

EXE (Windows) 💿 setup.exe

ct: download, dl: exe

MSI (Windows) 💿 setup.msi

ct: download, dl: msi

DMG (macOS) 🍎 app.dmg

ct: download, dl: dmg

PKG (macOS) 🍎 app.pkg

ct: download, dl: pkg

DEB (Linux) 🐧 app.deb

ct: download, dl: deb

RPM (Linux) 🐧 app.rpm

ct: download, dl: rpm

APK (Android) 🤖 app.apk

ct: download, dl: apk

IPA (iOS) 📱 app.ipa

ct: download, dl: ipa

Download Attribute

download attr (no value) ⬇️ Generate Report

ct: download

download="filename" ⬇️ Export CSV

ct: download

Unknown Extension file.xyz

ct: link (not download)

No Extension Download Item

ct: link (no extension)

4. Special Protocols (tel/mailto)

What's being tested: Links with tel: and mailto: protocols are classified separately from regular links.

Expected behavior:

tel:... → ct: 'tel' (no dest/ext fields)
mailto:... → ct: 'mailto' (no dest/ext fields)
Other protocols (sms:, javascript:) → ct: 'link'

SDK: isTelLink(), isMailtoLink() - check URL prefix

Phone (tel:) 📞 +1-555-123-4567

ct: tel

Phone (no formatting) 📱 Call Us

ct: tel

Email (mailto:) ✉️ contact@acmecorp.io

ct: mailto

Email w/ Subject 📧 Contact Sales

ct: mailto

SMS (not special) 💬 Send SMS

ct: link (not special)

javascript:void(0) ⚡ JS Link

ct: link

5. ARIA Roles

What's being tested: Non-semantic elements with ARIA roles are tracked as their semantic equivalents.

Expected behavior:

role="button" → ct: 'button'
role="link" → ct: 'link'
role="menuitem" → ct: 'button'
No role (just tabindex) → No event

SDK: Checks element.getAttribute('role') for button/link/menuitem

role="button"

Div as Button

ct: button

role="link" Span as Link

ct: link

role="menuitem"

Menu Item

ct: button

role="tab"

Tab

NO EVENT (role not supported)

role="switch"

Toggle

NO EVENT (role not supported)

No role (tabindex only)

Focusable Div

No event (no role)

Note: Only role="button", role="link", and role="menuitem" are tracked. Other interactive roles like tab, switch, checkbox are NOT tracked automatically.

6. onclick Handlers

What's being tested: Elements with onclick handlers are treated as buttons (clickable interactive elements).

Expected behavior:

Inline onclick="..." → ct: 'button'
Programmatic element.onclick = fn → ct: 'button'
addEventListener('click', fn) → NOT detectable (no event)

SDK: Checks target.element.onclick || target.element.hasAttribute('onclick')

Inline onclick

Inline Handler

ct: button

Empty onclick=""

Empty onclick

ct: button

Programmatic .onclick

Programmatic

ct: button

addEventListener only

Event Listener

NOT DETECTABLE

Limitation: Handlers added via addEventListener() cannot be detected by the SDK. Only onclick attribute and .onclick property are detectable.

7. Nested Elements

What's being tested: When you click a child element (span, icon, img), the SDK traverses up the DOM to find the nearest link or button.

Expected behavior:

Click on span inside link → Event reports the <a> element
Click on SVG inside link → Event reports the <a> element
Click on deeply nested element → SDK traverses all levels to find parent

SDK: Uses event.composedPath() and findInPath() to traverse up

Content Inside Links

Click the SPAN inside (not the text around it):

Before CLICK THIS SPAN After

ct: link, tag: a (finds parent link)

Click the SVG icon:

Link with SVG Icon

ct: link, tag: a (finds parent link)

Click the IMAGE inside:

Link with Image

ct: link, tag: a (finds parent link)

Content Inside Buttons

Click the inner SPAN:

ct: button, tag: button (finds parent button)

Click the SVG icon inside button:

ct: button, tag: button (finds parent button)

Deeply Nested (5 levels)

Click Me (Level 5 span)

ct: link, tag: a (traverses 5 levels up)

8. Shadow DOM

What's being tested: Click tracking works inside Shadow DOM using event.composedPath() which crosses shadow boundaries.

Expected behavior:

Clicks inside shadow root are detected
Event data includes shadow: true flag
Nested shadow DOM (shadow inside shadow) also works
Closed mode shadow DOM cannot be traversed (privacy feature)

SDK: pathCrossesShadow() detects shadow boundary, composedPath() traverses it

Open Shadow DOM (mode: 'open')

ct: button, shadow: true

ct: link, shadow: true

Nested Shadow DOM

Card with nested shadow button inside

ct: button, shadow: true (nested)

Closed Shadow DOM (mode: 'closed')

CANNOT TRAVERSE (closed mode)

Limitation: Shadow DOM with mode: 'closed' cannot be traversed by composedPath(). The click event's path stops at the host element, so the SDK cannot see inside the shadow root.

9. Dynamic Elements

What's being tested: Elements added to the DOM after page load are tracked via event delegation.

Expected behavior:

SDK uses document.addEventListener('click', handler, { capture: true })
No need to re-initialize tracking when adding elements
Dynamically added buttons/links are tracked immediately

SDK: Event delegation on document with capture phase

Click buttons above to add elements, then click the new elements to verify tracking works.

10. Debounce Testing (300ms)

What's being tested: Rapid clicks on the same element are debounced to prevent duplicate events.

Expected behavior:

First click → Event emitted immediately
Clicks within 300ms of last click → Ignored (debounced)
Click after 300ms → Event emitted
Different element → Event emitted (no debounce across elements)

SDK: debounceMs: 300 default, compares lastClickTarget and lastClickTime

0

DOM clicks (actual): 0
With 300ms debounce, the SDK will emit fewer events than actual clicks.

How to verify: Enable SDK debug mode, click rapidly, and compare the actual click count above with the number of click events in the console/event log. SDK events should be fewer.

11. data-ll-* Attributes

What's being tested: Custom tracking data can be attached to elements via data-ll-* attributes.

Expected behavior:

All data-ll-* attributes appear in the ll object of the event
Attributes are collected from the click path (element → ancestors)
Child values override parent values (closest to click wins)
data-ll-click-type overrides the auto-detected click type

SDK: extractLLDataFromPath() collects data-ll-* from composed path

Basic Tracking Attributes

data-ll-click

ll: {click: 'signup-hero-cta'}

Multiple data-ll-* Pricing

ll: {click, source, position}

Custom tracking ID

ll: {id: 'btn-123', campaign: '...'}

Click Type Override

Override link → cta Sign Up Link

ct: 'cta' (overridden from 'link')

Override button → download

ct: 'download' (overridden)

Invalid override

ct: 'button' (invalid ignored)

Valid override types: link, button, cta, download, tel, mailto, rule, other

Inheritance from Parent Elements

Parent Container with data-ll-*

Parent: data-ll-section="hero" data-ll-experiment="pricing-v2"

Both buttons inherit section="hero" and experiment="pricing-v2"

Child Overrides Parent

Child values win over parent

Parent: data-ll-variant="control"

Each button has its own variant value, overriding parent's "control"

12. Text & Class Extraction

What's being tested: The SDK extracts element text content and CSS classes for event data.

Expected behavior:

txt: Text content, trimmed, whitespace normalized, max 100 chars (truncated with ...)
cls: Array of class names, max 5 classes
Empty text/no classes → Field is undefined (not sent)

SDK: getElementText() (max 100), getElementClasses() (max 5)

Text Content Extraction

Short text

txt: 'OK'

Normal text

txt: 'Subscribe Now'

Long text (truncated at 100 chars)

txt: 'This is an extremely long button text that exceeds one hundred characters and should be truncat...'

Whitespace normalized

txt: 'Multiple Spaces Here'

Newlines normalized

txt: 'Line One Line Two'

Empty button

txt: undefined

CSS Class Extraction

Single class

cls: ['primary-cta']

Three classes

cls: ['btn', 'primary', 'large']

Exactly 5 classes

cls: ['btn','primary','lg','rounded','shadow']

More than 5 (8 classes)

cls: ['a','b','c','d','e'] (max 5)

No classes

cls: undefined

13. Custom Click Rules

What's being tested: Sidecar-configured CSS selector rules that match specific elements and emit ct: 'rule' with a rule ID.

Expected behavior:

When an element matches a rule selector → ct: 'rule', rule: '{rule-id}'
First matching rule wins (rules checked in order)
Rule matching uses element.matches(selector) on each element in composedPath

⚠️ Requires sidecar configuration: These tests need matching rules in the account's sidecar settings to emit ct: 'rule'.

SDK: matchClickRule() iterates path and rules, uses element.matches(selector)

Simple Selectors

Rule: #nav-signup → rule: 'nav-signup-btn'

Rule: .cta-primary → rule: 'primary-cta'

Rule: [data-action="subscribe"] → rule: 'subscribe-btn'

Attribute Selectors

Rule: [href^="https://external"] → rule: 'external-link'

External Link (prefix match)

Rule: [href$=".pdf"] → rule: 'pdf-download'

📄 Report PDF (suffix match)

Rule: [href*="campaign"] → rule: 'campaign-link'

Campaign Link (contains match)

Combined Selectors

Rule: .btn.primary → rule: 'primary-btn'

Rule: button.cta[data-size="large"] → rule: 'large-cta'

Descendant/Child Selectors

Rule: nav#main-nav a → rule: 'main-nav-link'

Rule: .card-actions > button:first-child → rule: 'card-primary-action'

Product Card

Pseudo Selectors

Rule: button:not(.disabled) → rule: 'active-btn'

Rule: ul.menu li:nth-child(odd) a → rule: 'odd-menu-item'

Important: These elements will emit ct: 'link' or ct: 'button' unless your sidecar has matching rules configured. To see ct: 'rule', add rules like:

{
  "clicks": {
    "rules": [
      { "id": "nav-signup-btn", "selector": "#nav-signup" },
      { "id": "primary-cta", "selector": ".cta-primary" },
      { "id": "subscribe-btn", "selector": "[data-action='subscribe']" }
    ]
  }
}

14. Modifier Keys & Special Clicks

What's being tested: How the SDK handles clicks with modifier keys and different mouse buttons.

Expected behavior:

Regular left-click → Event emitted
Ctrl+Click / Cmd+Click (new tab) → Event should still emit before navigation
Middle-click → Check if tracked (behavior may vary by browser)
Right-click → Context menu, may not emit click event

SDK: Uses standard click event (left button). Middle/right clicks may not fire click event.

Test with Modifier Keys

Regular Click Normal Link

ct: link (standard)

Ctrl+Click (Windows) / Cmd+Click (Mac) New Tab Link

ct: link (opens new tab)

Shift+Click New Window Link

ct: link (opens new window)

target="_blank" External New Tab

ct: link, ext: true

Mouse Button Tests

Left Click

ct: button

Middle Click

May not fire click event

Right Click

Opens context menu, no click

How to test:

Ctrl + Click (Windows) or Cmd + Click (Mac) to open in new tab
Shift + Click to open in new window
Middle mouse button click (scroll wheel click)
Right-click shows context menu

15. Edge Cases

What's being tested: Unusual or problematic DOM structures and link configurations.

Expected behavior varies - some may be tracked, others may have limitations.

Links Without href

No href attribute Link without href

May not track (no href)

Empty href="" Empty href

ct: link (current page)

href=" " (space) Space href

ct: link

Invalid/Unusual Structures

Button inside Link (invalid HTML)

Both are clickable - complex

Link inside Button (invalid HTML)

Both are clickable - complex

Nested Links (invalid HTML) Outer Inner

Browser may flatten

Special URL Formats

Blob URL Blob Link

ct: link

Data URL Data URL

ct: link

Query string only ?foo=bar

ct: link, ext: false

CSS Pointer Events

pointer-events: none

Click passes through

Overlay blocking

Overlay receives click

autoTrack Configuration

Sidecar autoTrack settings: The SDK respects clicks.autoTrack configuration:

links: false → Link clicks not auto-tracked (unless has data-ll-* or matches rule)
buttons: false → Button clicks not auto-tracked
downloads: false → Download links not auto-tracked

To test: modify sidecar settings and reload page. Elements with data-ll-* attributes or matching custom rules are ALWAYS tracked regardless of autoTrack settings.

Event Log

How to use: This panel shows click events captured by a hook. Enable SDK debug mode for full visibility.

Open browser console
Run: _ll.debug(true)
Click elements on this page
See events appear below (and in console)

Events captured: 0

Waiting for events... Click elements above after enabling debug mode.

Click Tracking Test Suite

How to Use This Page

Sections (15 Total)

1. Link Clicks

2. Buttons & Input Elements

3. Download Detection

Documents

Archives

Media Files

Installers / Applications

Download Attribute

4. Special Protocols (tel/mailto)

5. ARIA Roles

6. onclick Handlers

7. Nested Elements

Content Inside Links

Content Inside Buttons

Deeply Nested (5 levels)

8. Shadow DOM

Open Shadow DOM (mode: 'open')

Nested Shadow DOM

Closed Shadow DOM (mode: 'closed')

9. Dynamic Elements

10. Debounce Testing (300ms)

11. data-ll-* Attributes

Basic Tracking Attributes

Click Type Override

Inheritance from Parent Elements

Child Overrides Parent

12. Text & Class Extraction

Text Content Extraction

CSS Class Extraction

13. Custom Click Rules

Simple Selectors

Attribute Selectors

Combined Selectors

Descendant/Child Selectors

Pseudo Selectors

14. Modifier Keys & Special Clicks

Test with Modifier Keys

Mouse Button Tests

15. Edge Cases

Links Without href

Invalid/Unusual Structures

Special URL Formats

CSS Pointer Events

autoTrack Configuration

Event Log