Accepted Solutions (1)
There are 3 components to Custom Event handling:
- Creating the Custom Event (latest browser versions use new CustomEvent(..), but you may need to use different syntax if you are looking for extended backwards compatibility)
- Dispatching (triggering) the Custom Event (latest browser versions use elem.dispatchEvent(event), but you may need to use different syntax if you are looking for extended backwards compatibility)
- Listening for the dispatched (triggered) Custom Event (this is where you attach an event listener to the DOM element, e.g. the rule you setup in DTM or Launch, or using elem.addEventListener(..) with javascript)
Here is a DTM example for using Custom Events. Below is a similar basic example for Launch. Both of which work for me. So as Jantzen.Belliston mentioned, you will need to provide more info about how you've set it up, including the code you use to create and dispatch the custom event.
For Launch:
This is a generic example, similar to the DTM example above, where I create a custom event listener to be attached to the DOM body. And within the Rule, I just do a simple console.log to show my rule triggered and executed something.
Go to Rules, and click + Add Rule.
For Event Configuration, Select:
Extension: Core
Event Type: Custom Event
(and whatever you want for Name and Order)
Then to the right, add the following:
Custom Event Type: MyCustomEvent
Select "specified elements"
Elements matching the CSS selector: body
(everything else default)
Next, under the THEN section, under Actions, click + Add.
Under Action Configuration, select:
Extension: Core
Action Type: Custom Code
Name: MyCustomEvent Custom Code
Then to the right, for Language, select Javascript, and click </> Open Editor. In the code box overlay, add the following:
console.log('LAUNCH: Custom Code Box: My Custom Code triggered!');
On the top right of the code box overlay, click Save, then on the bottom right, click Keep Changes.
Then, click Save (or Save to Library and Build if you have a Dev Library selected in the rule). Finally, you will need to go to the build/approval process to deploy to whatever environment(s) in order for the changes to take effect on your site.
This takes care of point #3 in the beginning, where we listen for the custom event.
In order for the Launch rule to actually trigger, your site must cover the first 2 points: creating and dispatching the custom event. The pure javascript version of this is just like the DTM example (or in the link Jantzen provided), which may vary depending on how browser backwards compatible your site wants to be. But point is, somewhere on your site, you should have:
// generic example for creating the custom event (point #1)
var MyCustomEvent = new CustomEvent('MyCustomEvent');
// generic example for dispatching (triggering) the custom event (point #2)
document.querySelector('body').dispatchEvent(MyCustomEvent);
.josh
