feat: add user_interaction trigger #243
Conversation
Add user_interaction trigger to publish click, hover (with minThresholdMs), and focus events via MessageBus and activate pages in
|
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
|
📝 Documentation updates detected! Updated existing suggestion: Document new page trigger types for Web Experiment |
|
|
||
| if (!success) { | ||
| // Invalid selector or elements don't exist yet - wait for element_appeared | ||
| this.messageBus.subscribe('element_appeared', () => { |
There was a problem hiding this comment.
Duplicate subscribers and DOM listeners are being added. Consider making registration idempotent: keep a registry keyed by selector + interactionType (include minThresholdMs for hover) so listeners attach once, and store unsubscribe handles to prevent accumulating element_appeared subscriptions across URL changes.
🚀 Reply to ask Macroscope to explain or update this suggestion.
👍 Helpful? React to give us feedback.
| minThresholdMs?: number, | ||
| ): boolean => { | ||
| try { | ||
| const elements = this.globalScope.document.querySelectorAll(selector); |
There was a problem hiding this comment.
This would fail if an element matching the selector is added to the DOM later, it won't have listeners attached. I'd suggest istead of attaching listeners to each element, attach one listener to document and check if the event target matches the selector:
| } else if (event.type === 'mouseleave') { | ||
| if (interactionStartTime !== null) { | ||
| const interactionDuration = Date.now() - interactionStartTime; | ||
| if ( | ||
| !minThresholdMs || | ||
| interactionDuration >= minThresholdMs | ||
| ) { | ||
| const interactionKey = `${selector}:${interactionType}:${ | ||
| minThresholdMs || 0 | ||
| }`; | ||
| this.firedUserInteractions.add(interactionKey); | ||
| this.messageBus.publish('user_interaction', { | ||
| selector, | ||
| interactionType, | ||
| }); | ||
| } | ||
| interactionStartTime = null; | ||
| } | ||
| } |
There was a problem hiding this comment.
This would mean hover won't trigger until mouseleave event is fired.
| } | ||
| }); | ||
|
|
||
| return true; |
There was a problem hiding this comment.
This always returns true even if elements.length is 0
| private setupUserInteractionListenersForSelector = ( | ||
| selector: string, | ||
| interactionType: 'click' | 'hover' | 'focus', | ||
| minThresholdMs?: number, |
There was a problem hiding this comment.
minThresholdMs is meant to be used for all interactionTypes and not just for hover.
minThresholdMs for click event can be interpreted in multiple ways (delayed trigger after click, click + linger, long click), so let's put a hold on to it for now .
For focus, it should be handled similarly to how hover is determined.
Summary
Implement
user_interactionpage trigger, which fires when the user either:clickon an elementfocuson an elementminThresholdMs)Checklist