Skip to content

Adobe Client DataLayer - Firing one rule on two events #147

@hassvk

Description

@hassvk

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

component event cmp:loaded
image

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')

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions