definition created in live feed doesn't populate any data

Hi there, what does the Definition look like for the event you created? Sometimes the selector that is created automatically from Live View pulls in additional information that is unnecessary (like full domain) or the CSS selector points to dynamic values. Also if it’s a common event, looking at the Top Events view in Heap may point you towards a more general definition for the click.

@alexkale If the Live view is giving you these selectors now, currently, then that’s a bit concerning. But if they were created a while ago and are currently inactive you might want to try running a query over a longer period, like the past year, and see if there are results. It might be that your markup has changed, or there’s drift between your development environment and production environment.

As a general rule, keep your definitions as clean and simple as possible while still being accurate. Things like `.border-solid` and `.inline-flex` are pure aesthetic, rarely stable, and certainly semantically useless. A good definition should be stable, meaningful, and unambiguous. The data-testid and id attributes meet those conditions, so run with those.

Thanks for sharing that level of detail @alexkale. Given that, what’s probably happening is that all this cruft on one element was resulting in the event hierarchy getting dropped. Query params in request strings are generally kept to 1024 characters and that’s what we truncate the hierarchy to before sending over the wire. If you encode that button’s html/css it’s over 2800 characters. I’m very curious if the hierarchy was actually captured. 

encodeURIComponent('<button type="button" id="TEST-run-cashflow" data-testid="TEST_cashflow_run" aria-label="Run Cashflow" class="     border-solid     inline-flex     align-top     gap-xs     items-center     justify-center     group     border     transition-all     focus:outline-none     focus-visible:ring-1     focus-visible:ring-offset-1     dark:focus-visible:ring-offset-gray-250     text-[length:var(--component-button-font-size)]     disabled:cursor-not-allowed           h-6       py-[var(--component-button-size-medium-padding-top)]       px-[var(--component-button-size-medium-padding-right)]       rounded-[var(--component-button-size-medium-border-radius)]               dark:border-         dark:hover:border-[color:var(--component-button-primary-border-color-hover)]         dark:active:border-[color:var(--component-button-primary-border-color-active)]         dark:focus-visible:border-[color:var(--component-button-primary-border-color-focus)]         dark:focus-visible:ring-[color:var(--component-button-primary-border-color-focus)]         dark:disabled:border-[color:var(--component-button-primary-border-color-disabled)]         dark:bg-[color:var(--component-button-primary-background-color-base)]         dark:hover:bg-[color:var(--component-button-primary-background-color-hover)]         dark:active:bg-[color:var(--component-button-primary-background-color-active)]         dark:focus-visible:bg-[color:var(--component-button-primary-background-color-focus)]         dark:disabled:bg-[color:var(--component-button-primary-background-color-disabled)]         dark:text-[color:var(--component-button-primary-font-color-base)]         dark:hover:text-[color:var(--component-button-primary-font-color-hover)]         dark:active:text-[color:var(--component-button-primary-font-color-active)]         dark:focus-visible:text-[color:var(--component-button-primary-font-color-focus)]         dark:disabled:text-[color:var(--component-button-primary-font-color-disabled)]       "><span class="leading-none">Run Cashflow</span></button>').length

> 2816

This is a good learning. I’ve worked with customers using Tailwind but never seen elements that look like this so thanks for sharing what a maximal tailwind element looks like—very helpful.