Overview
No-code events let you track user interactions with specific elements on your website without writing any code. Using the UserGuiding Chrome Extension, you visually select an element, choose an interaction type, and UserGuiding's SDK automatically fires the event whenever users interact with that element.
Creating a No-Code Event
- Navigate to Settings > Data > Events.
- Click + New Event and select No-Code Event.
- Enter the URL of the page where the element exists and click Open the page.
- The Chrome Extension opens in element picker mode. Click on the element you want to track.
- In the configuration form, you'll see the CSS selector auto-filled. You can refine it if needed.
- Choose a Track Type from the dropdown: Click, Hover, Focus, or Input Filled.
- Set Page Targeting rules to control which pages this event fires on (pre-filled with the current URL).
- Give your event a name and code name, then click Save.
Track Types
- Click — Fires when the user clicks the element.
- Hover — Fires when the user hovers over the element (mouseenter).
- Focus — Fires when the element receives focus.
- Input Filled — Fires when the user leaves an input element after entering a value (blur).
Editing a No-Code Event
To edit an existing no-code event, click the settings gear icon next to the event in the Events table. This opens a slider where you can update the name, code name, CSS selector, track type, and page targeting.
How It Works (SDK)
When the SDK loads your container configuration, it attaches DOM event listeners based on your configured no-code events. If the target element is added dynamically (e.g., by a single-page app framework), the SDK detects it automatically and attaches the listener. Events fire in real time and are recorded in user-storage.