Adobe Client DataLayer - Firing one rule on two events

[hs_vk]

Hi,

I have a dev/stage & prod environments set up on adobeaemcloud.com where I am tracking page load & component click rules. We have ACDL implemented here so events like cmp:show, cmp:click & cmp:loaded are triggered on page load, component clicks or when a certain component on page loads.

We have a component that loads on all pages & returns some location-based information. This component triggers cmp:loaded event.

Also when the page datalayer is ready it triggers cmp:show. 

I have below custom code added to the events section of the rules to fire rules on cmp:show.

I believe that cmp:loaded for the component is triggered a few secs after cmp:show. See below images where cmp:show is in array 0 and cmp:loaded is in array 290

page event cmp:click

     

component event cmp:loaded

I have two separate rules for each event - page load rule & component load rule both firing on every page. However I am looking to have just one page load rule with below logic:

Trigger rule when both cmp:show & cmp:loaded (for the specific component) are triggered

If cmp:loaded is not available (less likely scenario), trigger rule on cmp:show 

Once this is done, I would use Set Variables action to collect the data passed within both the page & above component

Page Load Rule Event custom code (Adobe Recommended)

var pageShownEventHandler = function(evt) {
// defensive coding to avoid a null pointer exception
if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
//trigger Launch Rule and pass event
console.debug("cmp:show event: " + evt.eventInfo.path);
var event = {
//include the path of the component that triggered the event
path: evt.eventInfo.path,
//get the state of the component that triggered the event
component: window.adobeDataLayer.getState(evt.eventInfo.path)
};

//Trigger the Launch Rule, passing in the new `event` object
// the `event` obj can now be referenced by the reserved name `event` by other Launch data elements
// i.e `event.component['someKey']`
trigger(event);
}
}

//set the namespace to avoid a potential race condition
window.adobeDataLayer = window.adobeDataLayer || [];
//push the event listener for cmp:show into the data layer
window.adobeDataLayer.push(function (dl) {
//add event listener for `cmp:show` and callback to the `pageShownEventHandler` function
dl.addEventListener("cmp:show", pageShownEventHandler);
});

I believe there is a way to combine both events through JS but I am not  great at coding & not completely sure if there are any other ways to implement this.

Thanks

[yuhuisg · Accepted solution]

In short, you will need to set your own flag (i.e. true/false variable) when the "cmp:show" event has been triggered, so that when the "cmp:load" event gets triggered, you check if this flag is set, and if so, then fire your page load actions.

However, I don't think there's a way to fire your page load actions when "cmp:show" alone has been triggered. This is because "cmp:load" comes after "cmp:show", so you don't know if "cmp:load" will ever trigger.

...Or maybe you do know when "cmp:load" gets triggered. In that case, you can have a rule with just the "cmp:show" event and set appropriate conditions in that rule for the situations where you know that "cmp:load" won't trigger.