Configure events in the dashboard
Every category, field, and action available in Events.
Choose which website actions to measure without adding a JavaScript call for each event. First install the Pixel and connect consent.
Open configuration
- Open Setup → Pixels, select your Pixel, and go to Events.
- Under Configured events, review every event's name, trigger, and summary. Use search to find an event and select it to edit it.
- Add event opens the default trigger. The current Control Center does not let you select a different trigger for a new manual configuration: use the AI plan for a reviewable proposal, or keep an existing event to edit.
- To follow its configuration, select Flow: the diagram shows the expected path, not delivery proof.
- To enable Outbound links, Bot detection, Web Vitals, or Error tracking, open Settings → Automatic tracking. These switches save immediately; see Additional signals.
Add, edit, and remove
- Select an event for the trigger to configure, for example Click. Its editor shows all configurations for that trigger.
- Enter a recognizable Event Name, such as
richiesta_demo_click. - Fill the fields below. An asterisk marks required fields; some optional fields are needed for the intended behavior.
- Use Add another… for multiple configurations of the same trigger. Select an entry to edit it.
- Optionally configure Send to using the Meta and GTM guide.
- Select Save. Cancel closes without saving. To remove an entry, press its trash icon and Save; after removing every entry, confirm with Remove. Add one restores an entry in an empty editor.
- Reload the website and repeat the action in Installation & test → Live verification.
A new Pixel includes page_view. Under Configured events, Page Load is an event like the others: check its name and any destinations carefully before changing it.
The current snippet does not need reinstalling after changes. Settings refresh when the page loads.
Page: visits and navigation
Page Load (pageload) sends the configured event on loading. The Pixel also detects pushState, replaceState, and popstate. A changed path or query restarts configured page events, including scrolling, timers, and visibility.
A #fragment change alone is not a new page. Disabling Page Load removes that trigger, not other events. See trackPage for details.
DOM: element actions
Event Name and CSS Selector (selector, string) are required. A selector identifies elements: #richiedi-demo matches an ID and .cta-demo a class. Multiple matching elements are all tracked.
| Control | Trigger | When detected |
|---|---|---|
| Click | click | Element clicked. |
| Submit | submit | A form's submit event. |
| Focus | focus | Element receives focus. |
| Blur | blur | Element loses focus. |
| Change | change | Value change committed. |
| Input | input | Value edited while typing. |
| Touch Start | touchstart | Touch begins. |
| Touch End | touchend | Touch ends. |
| Mouse Enter | mouseenter | Pointer enters the element. |
| Mouse Leave | mouseleave | Pointer leaves the element. |
| Context Menu | contextmenu | Context menu opens. |
| Key Down | keydown | Key pressed on the element receiving the event. |
| Key Up | keyup | Key released. |
Example — request a demo: have your developer assign richiedi-demo as the button ID. Open DOM → Click, enter richiesta_demo_click and #richiedi-demo, save, reload, and click the button. Check the real-time event name.
For Focus/Blur, select the input itself: a child receiving focus does not focus its parent container. Clicking a nested icon may report the icon's details. Events include tag, ID, optional href, and up to 100 text characters.
Form: completion and submission
Select an actual <form>, such as #contatti, not just its button.
| Control | Trigger | Fields and behavior |
|---|---|---|
| Form Start | form_start | CSS Selector required. First focus in the form, once per binding. |
| Form Progress | form_progress | CSS Selector required; Progress Thresholds accepts comma-separated percentages from 0 to 100. No thresholds means no progress events. |
| Form Submit | form_submit | CSS Selector required. Detects submit, not server confirmation. Thresholds shown in the form do not affect this trigger. |
Example — progress: configure Form Progress, name contatti_progress, selector #contatti, Progress Thresholds 25,50,75,100. Save, reload, and fill the fields. Each reached threshold sends once; the current payload reports formId, not the reached percentage. Progress counts inputs, textareas, and selects with nonempty values. It is not required-field validation and may count prefilled or hidden values.
Inject Identity (optional) shows Customer ID Selector (cidSelector) and Session ID Selector (sidSelector). Both selectors are required by the contract when this object is supplied. The current Form tracker does not apply these fields: do not rely on automatic filling. Use getIdentity to populate hidden fields manually.
Form Submit does not automatically collect names, emails, and answers. Use trackLead after successful submission.
Media: video and audio
CSS Selector is required and must identify <video> or <audio>, such as #video-demo. A YouTube/Vimeo iframe is not a directly accessible HTML media element for this tracker.
| Control | Trigger | When detected |
|---|---|---|
| Play | play | Start or resume. |
| Pause | pause | Pause. |
| Ended | ended | Playback ends. |
| Time Update | timeupdate | Progress; use thresholds to limit events. |
| Seeked | seeked | Seeking completes. |
| Error | error | Media error. |
| Volume Change | volumechange | Volume or mute changes. |
| Rate Change | ratechange | Playback rate changes. |
Optional Playback Thresholds (thresholds, number array from 0–100) only affects Time Update. Omitted thresholds can produce many events; an empty array produces no progress events. Other actions ignore thresholds.
Example — video at 50%: configure Time Update, name video_demo_50, selector #video-demo, threshold 50. Save, reload, and play halfway. The result includes threshold, progress, title, source, duration, and current position. Seeking forward can also reach thresholds; this is not necessarily actual watch time.
Current limitation: the ordinary tracker marks media after applying its first configuration. Multiple configurations on the same element may not all attach. Use one configuration per media element for a reliable initial test. fancyboxLinkSelectors is an optional selector array supported in code for links opening lightbox videos, but the current dashboard has no editor for it.
Scroll: page depth
Scroll Depth (scroll) requires Scroll Threshold (threshold, number 0–100). The percentage measures the bottom of the viewport against page height and is evaluated on a scroll event, not immediately on opening the page.
Example: name lettura_75, threshold 75, Save. Reload and scroll beyond 75% to receive an event with threshold and percentage. Each configuration fires once per page lifecycle.
Timer: time on page
Timer (timer) requires a duration. Time on page displays seconds from 1 to 3600; configuration field duration uses milliseconds.
Example: name permanenza_30s, adjust the control to 30 sec, save, and reload. After 30 seconds, the timer can send if the session has not changed. It does not exclusively measure foreground time. Give different timers distinct names: the same name replaces the previous timer.
Intersection: section visibility
Intersection (intersection) requires CSS Selector. Optional Visibility Ratio (visibility) ranges from 0 to 1 and defaults to 0.5. Current code also treats 0 as 0.5. Optional Min View Time (minViewTime) is in milliseconds and defaults to 0; the control goes up to 10000.
Example: name prezzi_visibili, selector #prezzi, ratio 0.5, time 1000 ms. Save, reload, and bring at least half the section into view. Each element stops being observed after sending. The timer is canceled when it fully leaves the viewport; current code does not guarantee the requested percentage throughout the interval.
Performance: browser measurements
Performance (performance) requires Web Vitals Metric (metric): lcp for largest content appearance, fid for first input delay, cls for layout shifts, or ttfb for time to first byte.
Enter a name such as tempo_primo_byte, choose the metric, save, and reload. There is no speed threshold to configure. Availability depends on the browser and when the Pixel loads: observations may already have occurred; CLS sends on exit. Use the separate Web Vitals switch for aggregate measurements including INP; it uses a different channel.
Selectors, dynamic elements, and embedded forms
The editor includes Selector of the element and Download extension (.zip). Follow the CJM extension installation guide, select an element, and press Copia selector in the website overlay. Paste the reference into CSS Selector. You can also configure and save the event from the extension. Check that the selector still finds the intended element after website updates.
- DOM and Intersection locate elements when configured. Later additions may be missed. Consider HTML attributes for dynamic clicks.
- Form observes dynamically added forms and open shadow roots. Media observes added video/audio elements, subject to the multiple-configuration limitation above.
- HubSpot and GoHighLevel have specific identity support with different submission tracking limits, explained below. This does not allow unrestricted access to every iframe.
tagsanddataexist in the event contract but have no editor in this dialog. They are not dashboard controls.
For missing events, check saving, reloading, selectors, and consent using the verification guide. Avoid overlapping HTML attributes, DOM events, and manual calls unless separate events are intended.
Connect HubSpot and GoHighLevel forms
To connect a visit to a form, prepare cjm_cid and cjm_sid fields in the form service and verify that your CRM integration receives and uses them. The Pixel does not create CRM fields. cjm_cid requires adStorage; cjm_sid requires analyticsStorage.
- Install the Pixel on the page containing the form and connect the consent banner.
- Publish the form with the matching fields. For HubSpot, the Pixel attempts to fill fields accessible in the page and adds parameters to recognized form and Meetings URLs. For GoHighLevel, it recognizes
/widget/form/embeds and the/js/form_embed.jsscript, rewrites URLs, and answers the embed's query-parameter request. - Reload, express a choice in the banner, and submit a test form. Check the values received by the service as well as CJM events. Seeing a field on the page is not sufficient.
- Repeat with refusal and withdrawal. Embedded integrations do not guarantee clearing values already copied into fields or URLs: have the website/form handle that cleanup too.
HubSpot: the Pixel listens for hs-form-event:on-submission:success and generates form_submit, with provider: 'hubspot' and embedded: true in nested data. Embeds that do not emit this event are not covered by that detection. Contact data does not automatically become a trackLead.
GoHighLevel: the code supports recognizing submission messages through ghl.submitMessageMatchers, but the current snippet's remote configuration does not include this option and the default list is empty. Do not expect automatic form_submit merely because the iframe is recognized. If you control a reliable submission confirmation, use trackLead for the contact or track for the action. Adding properties to the snippet does not enable this support.
The GoHighLevel embed must be present or detectable when the Pixel initializes; an embed appearing only later may not activate the integration. Synchronization can reload the iframe: verify the flow before collecting real responses.