Custom Events Test Suite

Comprehensive testing for ListenLayer custom event tracking via SDK API and dataLayer methods

How to Use This Page

This page tests custom event tracking using two methods:

To debug:

SDK Source: services/collect/tracker/src/

SDK API Method

Direct ListenLayer tracking calls

_ll.track('my_event', { key: 'value' })

dataLayer Method

GTM-style events (captured by rules)

dataLayer.push({ event: 'my_event', ... })

Sections (8 Total)

1. SDK API - Basic Events 2. SDK API - With Properties 3. dataLayer - Exact Match (eq) 4. dataLayer - Starts With (sw) 5. dataLayer - Ends With (ew) 6. dataLayer - Contains (ct) 7. dataLayer - Parameter Extraction 8. Auto-Fire Events (Page Load)

Configured dataLayer Rules (from sidecar)

Rule ID Name Event Pattern Match Extract Params
dl_banner_impression Banner Impression custom_banner_impression eq -
dl_promo_click Promotional Click promo_click eq -
dl_video_engagement Video Engagement video_* sw video_title, video_duration, video_percent
dl_form_abandon Form Abandonment *_abandon ew -
dl_newsletter_signup Newsletter Signup newsletter ct -
dl_user_action User Action user_ sw action_type, action_value

1. SDK API - Basic Events

SDK API

Simple event tracking using the _ll.track() method with just an event name.

Code: _ll.track('event_name')

_ll.track('page_viewed')
_ll.track('button_clicked')
_ll.track('feature_used')
_ll.track('content_viewed')

2. SDK API - With Properties

SDK API

Event tracking with custom properties passed as the second argument.

Code: _ll.track('event_name', { property: 'value' })

_ll.track('product_viewed', { product_id: 'SKU-12345', product_name: 'Test Widget', price: 29.99, category: 'Electronics' })
_ll.track('search_performed', { query: 'test search', results_count: 42, filter_applied: true })
_ll.track('lead_generated', { source: 'contact_form', lead_type: 'demo_request', score: 85 })
_ll.track('download_started', { file_name: 'whitepaper.pdf', file_type: 'pdf', file_size: 2048 })

3. dataLayer - Exact Match (eq)

dataLayer eq

Events that match an exact event name. These trigger the dl_banner_impression and dl_promo_click rules.

Code: dataLayer.push({ event: 'exact_event_name' })

dataLayer.push({ event: 'custom_banner_impression', banner_id: 'hero-banner-1', banner_position: 'top' })
dataLayer.push({ event: 'promo_click', promo_id: 'summer-sale-2024', promo_name: 'Summer Sale', creative: 'banner-v2' })
dataLayer.push({ event: 'random_event_xyz', test: true }) // Should NOT match any rule

4. dataLayer - Starts With (sw)

dataLayer sw

Events that match a prefix pattern. These trigger the dl_video_engagement and dl_user_action rules.

Code: dataLayer.push({ event: 'video_*' }) or dataLayer.push({ event: 'user_*' })

dataLayer.push({ event: 'video_play', video_title: 'Product Demo', video_duration: 120, video_percent: 0 })
dataLayer.push({ event: 'video_progress', video_title: 'Product Demo', video_duration: 120, video_percent: 50 })
dataLayer.push({ event: 'video_complete', video_title: 'Product Demo', video_duration: 120, video_percent: 100 })
dataLayer.push({ event: 'user_login', action_type: 'authentication', action_value: 'email' })
dataLayer.push({ event: 'user_signup', action_type: 'registration', action_value: 'google_sso' })
dataLayer.push({ event: 'user_logout', action_type: 'session', action_value: 'manual' })

5. dataLayer - Ends With (ew)

dataLayer ew

Events that match a suffix pattern. These trigger the dl_form_abandon rule.

Code: dataLayer.push({ event: '*_abandon' })

dataLayer.push({ event: 'form_abandon', form_id: 'contact-form', form_name: 'Contact Us', fields_completed: 2 })
dataLayer.push({ event: 'cart_abandon', cart_id: 'cart-xyz', items_count: 3, cart_value: 149.99 })
dataLayer.push({ event: 'checkout_abandon', checkout_step: 2, payment_method: 'credit_card' })
dataLayer.push({ event: 'survey_abandon', survey_id: 'nps-q1-2024', questions_answered: 5 })

6. dataLayer - Contains (ct)

dataLayer ct

Events that contain a specific substring. These trigger the dl_newsletter_signup rule.

Code: dataLayer.push({ event: '*newsletter*' })

dataLayer.push({ event: 'newsletter_subscribe', email: 'newsletter.user@acmecorp.io', source: 'footer' })
dataLayer.push({ event: 'popup_newsletter_shown', popup_type: 'exit_intent', delay: 5000 })
dataLayer.push({ event: 'email_newsletter_optin', preference: 'weekly', topics: ['product', 'news'] })

7. dataLayer - Parameter Extraction

dataLayer

Rules configured with extract_params will pull specific properties from the dataLayer event and include them in the ListenLayer event.

Example: dl_video_engagement extracts: video_title, video_duration, video_percent

dataLayer.push({ event: 'video_milestone', video_title: 'Annual Report 2024', // extracted video_duration: 300, // extracted video_percent: 75, // extracted extra_param: 'ignored' // not extracted })
dataLayer.push({ event: 'user_preference_change', action_type: 'settings', // extracted action_value: 'dark_mode', // extracted other_data: 'not_extracted' // not extracted })
dataLayer.push({ event: 'video_error', video_title: 'Broken Video', // extracted // video_duration: missing // video_percent: missing error_code: 404 // not extracted })

8. Auto-Fire Events (Page Load) AUTO

These events fire automatically when the page loads. Check the Event Log below to see them.

Fired on DOMContentLoaded:

Status: Waiting for page load events...

Event Log

Events fired on this page will appear below.

[--:--:--] Waiting for events...