Select a Trip
Loading trips...
Currently Impacted (live from API)
Loading...
Simulated Trip Planner Results
Select a trip to render DOM elements with NJT's exact CSS class names.
The step--is-{abbrev} classes are what surveys.js would target.
← Select a trip to simulate
Pulse Insights Tag (Active)
Demo account PI-49948395 is loaded on this page. surveys.js is evaluating targeting rules.
Check browser console for Pulse Insights activity.
Pulse Insights Debugger
Intercepts pi() calls, monitors network, inspects survey config
surveys.js
checking...
pi() function
checking...
PulseInsightsObject
checking...
Surveys loaded
checking...
Pulse Debugger initializing...\n
Live Targeting Flow
What happens when a rider loads the trip planner — replayed step by step
1
Page loads, Pulse tag evaluates
The Pulse Insights script loads and checks if this page matches any survey's URL targeting rules.
surveys.js fetches survey config → evaluates URL triggers → if match, queues survey with delay timer
2
Impression callback fires
Before the survey appears, our callback code runs. This is our window to decide: should this rider see the alert agent?
onimpression fires → callback has ~3 seconds before the widget renders (delay_seconds configured in Pulse admin)
3
Extract trip routes from DOM
We read the page to find which train lines or bus routes are in this rider's trip results.
Query
li[class*="step--is-"] → extract abbreviation from CSS classes (rail/light rail) and badge text (bus)4
Fetch active alerts from API
We ask our alert pipeline: which NJ Transit lines currently have active service advisories?
GET
/api/active-abbreviations → returns { rail: [...], bus: [...], all: [...] }5
Compare: does this trip overlap with active alerts?
We compare the rider's trip lines against lines with active alerts. Any match means this rider's trip is impacted.
tripLines.filter(l => activeAlerts.includes(l)) → overlap array
6
Decision: show or suppress the agent
If there's overlap, the alert agent appears after the delay. If no overlap (or API error), we hide it — the rider never sees it.
overlap.length > 0 → let widget render | overlap.length === 0 || fetch error → widgetContainer.style.display = 'none'
7
Rider clicks "Show me the alerts" → dynamic content loads
When the rider engages, the Custom Content card fetches their specific alerts from our API and renders personalized messaging.
GET
/api/alerts-for-trip?lines={overlap} → renders rider_message for top 2 matching alerts inside the Pulse widgetWaiting for rider to click "Show me the alerts"...
DOM Extraction Debug
Manual tools — click each to run that step independently
Run Extraction — reads trip lines from the DOM |
Fetch Active Alerts — gets live alert data from the Worker API |
Check Overlap — runs both and compares
// Click "Run Extraction" to see what the DOM query finds