Calling a Custom Event Without CSS Selector

[LeoS_Taco]

Hello,

I'm trying to create an event rule for a page where most events are driven by ReactVR objects, not by DOM API or CSS.

I know that I can create a custom event, and track a click that way. (I found the answer here) But, because there aren't any CSS selector to latch onto, I'd like to know if and how I can get around having to use the CSS selector or if there's a trick for that.

Thanks in advance!

[josh_donley · Accepted solution]

If you want to use this type of Event Based Rule, you can use body as the CSS selector:

I don't know how ReactVR works so I don't know what you do for creating/dispatching custom events, so here is a pure js example:

var myEvent = new CustomEvent('myEvent', { foo : 'bar' });
document.querySelector('body').dispatchEvent(myEvent);

Alternatively, you may consider creating a Direct Call Rule (DCR) instead.  A DCR takes a single string value as a condition, e.g. "foobar" (no quotes).  Then you simply call it like so:

_satellite.track("foobar");

[jantzen_b]

Leo Shvedsky

Does the previous reply answer your question? If so, would you mind marking it as the correct answer?

Cheers,
Jantzen

[Viddyw]

This worked for me within the context of just pure JS on an AEM site. There was an existing function that fired upon the site action I was trying to measure and I just added this event within that JS function. Listening for just the body worked great! One note is that it wasn't working until I checked the "apply event handler directly to element" check box