Preview & Debug

Test and debug your ListenLayer installation in real-time

Preview Mode lets you test your ListenLayer configuration in real-time, watching events flow as you interact with your website.

Quick Links: Launch Preview Mode • Preview Parameters • Console Debugging • Cross-Domain Preview

---

Launch Preview Mode

From the Dashboard

1. Log in to ListenLayer

2. Go to your account dashboard

3. Click Preview Mode or Debug

4. Your website opens in a split-screen view with real-time event monitoring

From URL Parameters

Add _ll_preview=1 to any page URL to enter preview mode:

https://example.com/products?_ll_preview=1

To exit preview mode:

https://example.com/products?_ll_preview=0

Enable Preview Mode (One-Time Setup)

Preview mode loads your site in an iframe. Your site needs to allow this by adding a Content Security Policy header:

Content-Security-Policy: frame-ancestors 'self' *.listenlayer.com;

Platform-Specific Instructions

Platform	How to Add
Apache	.htaccess: Header set Content-Security-Policy "frame-ancestors 'self' *.listenlayer.com"
Nginx	add_header Content-Security-Policy "frame-ancestors 'self' *.listenlayer.com";
Cloudflare	Transform Rules or Workers
Vercel	vercel.json headers config
Netlify	_headers file

This is secure. The frame-ancestors directive only allows your site to be embedded by ListenLayer's preview tool—nowhere else.

Getting "Refused to frame" errors? The CSP header isn't configured yet. Add it using the instructions above.

---

What You Can See

In preview mode, you can monitor:

Category	Details
Events	Every event as it fires (pageviews, clicks, forms, etc.)
Identity	Device ID, Person ID, and how visitors are identified
Consent	Current consent state and CMP detection
Attribution	UTM parameters, referrer, and traffic source
Triggers	Which triggers matched and when they fired
Performance	Core Web Vitals and page timing

---

URL Parameters

ListenLayer uses these URL parameters for preview and debugging:

Parameter	Purpose
_ll_preview	Enter (1) or exit (0) preview mode, or join a specific session (prv_...)
_ll_preview_salt	Ensures consistent anonymous IDs during testing (16-char hex)
_ll_mock_geo	Override geo location for testing (country, region, city)
_ll_debug	Enable verbose console logging

Preview Session IDs

When you launch preview mode from the dashboard, a unique session ID is created:

prv_m1abc_d4e5f6g7

This ID allows:

• Multiple browser tabs to share the same preview session

• Cross-domain tracking to maintain the preview session

• Real-time event streaming to the dashboard

---

Console Debugging

For deeper debugging, enable console logging in your browser's developer tools.

Enable Debug Mode

Add the debug parameter to your URL:

https://example.com/products?_ll_debug=1

Or call it from the console:

_ll.debug(true);

What's Logged

With debug mode enabled, you'll see:

[LL] Pageview: /products (pv_abc123)
[LL] Click: button#add-to-cart (clk)
[LL] CrossDomain: Decorated link → shop.example.com
[LL] Form: Started interaction (fs) - contact-form
[LL] Identity: Possible person detected (pp) - form submission

Debug Specific Categories

Debug individual tracking categories:

_ll.debug('forms');      // Form tracking only
_ll.debug('clicks');     // Click tracking only
_ll.debug('crossdomain'); // Cross-domain linking
_ll.debug('identity');   // Identity detection
_ll.debug('consent');    // Consent changes

---

Cross-Domain Preview

When testing cross-domain tracking, preview mode automatically passes session information between your domains.

How It Works

When you click a link to another domain in your cross-domain group, these parameters are added:

https://shop.example.com/products?_ll_xd=eyJk...&_ll_preview=prv_m1abc_d4e5f6g7&_ll_preview_salt=a1b2c3d4e5f6g7h8

Parameter	Purpose
_ll_xd	Standard cross-domain payload (device ID, timestamp, etc.)
_ll_preview	Your preview session ID (maintains the session)
_ll_preview_salt	Consistent anonymous fingerprints during testing
_ll_mock_geo	Preserves mock geo settings across domains

Testing Cross-Domain Setup

1. Enter preview mode on your primary domain

2. Click links to your other domains

3. Verify the same Device ID appears on each domain

4. Check that events from all domains appear in your preview session

Pro tip: The preview dashboard shows events from all domains in your cross-domain group in a single timeline, making it easy to verify the visitor journey is being tracked correctly.

---

Troubleshooting

Preview mode not working

Site won't load in preview iframe

Your site's Content Security Policy is blocking embedding. Add the required header:

Content-Security-Policy: frame-ancestors 'self' *.listenlayer.com;

See Enable Preview Mode for platform-specific instructions.

Events not appearing in real-time

1. Check that ListenLayer is installed correctly (_ll object exists in console)

2. Verify you're in the correct preview session

3. Check for JavaScript errors in the console

4. Ensure your browser isn't blocking the connection

Cross-domain preview not linking

1. Verify both domains are in your cross-domain group

2. Check that the _ll_preview parameter is being passed in links

3. Ensure ListenLayer is installed on both domains

4. Check for any script errors on the target domain

Console not showing logs

Debug logs not appearing

1. Ensure you've enabled debug mode: _ll.debug(true)

2. Check that the console filter isn't hiding logs

3. Look for [LL] prefix in the output

4. Try refreshing the page after enabling debug mode