adobe / adobe/adobe-client-data-layer

Adobe Client DataLayer - Firing one rule on two events

Open
#147 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
122
Forks
28
PR merge metrics
No merged PRs in 30d

Description

### Expected Behaviour
Adobe Launch rule to fire on both events cmp:show (for page load) & cmp:loaded (for component load)

### Actual Behaviour
Rule does not fire for below code within launch events & conditions section

### Reproduce Scenario (including but not limited to)
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
![image](https://user-images.githubusercontent.com/118403855/202318587-415b1ca3-2122-4ca2-b019-7b266fbbcfe1.png)

component event cmp:loaded
![image](https://user-images.githubusercontent.com/118403855/202318627-ecaa5935-7e91-40d7-85c4-d83c88655f95.png)

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

#### Sample Code that illustrates the problem
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 || [];
window.onload=function(){
//push the event listener for cmp:show into the data layer
window.adobeDataLayer.push(function (dl) {
dl.addEventListener("cmp:show", pageShownEventHandler);
console.log("cmp:show listened")

});
window.adobeDataLayer.push(function (dl) {

dl.addEventListener("cmp:loaded", pageShownEventHandler);
console.log("cmp:loaded listened")
});
}

Error in console:
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.