Adobe Data Layer Implementation (EDDL Approach)

[Tanika02]

Hello All - 

I was working on one of the Data Layer requirements and while I went through the Adobe documentation I learned we can primarily push the data to Analytics in two essential ways : 

1. Pushing an Event Object (Push an Event Object/Data)

window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push({
    "page": {
        "title": "Getting Started"
    }
});

2. Pushing a Function (Callback Approach)

window.adobeDataLayer = window.adobeDataLayer || [];
var myHandler = function(event) {
    console.log(event);
};
window.adobeDataLayer.push(function(dl) {
    dl.getState();
    dl.addEventListener("click", myHandler);
});

Now, as far as I have seen we have been using the (2) approach whenever there is a "click" or other HTML events are performed. But Yet, I could not understand the utility of the (2) as in why we would write a callback function? 

I did scanned through https://github.com/adobe/adobe-client-data-layer/wiki#architecture completely.

Thanks,

Tanika
 

[nitesh_kumar]

Hi @Tanika02 ,

It follows the same pattern as we have with any callback function in Javascript. This would help to tie an event to a function that would be called when it's invoked in the future. Since you basically push it to the async object of DL window.adobeDataLayer.

https://developer.mozilla.org/en-US/docs/Glossary/Callback_function 

For instance, It would help to write some custom logic, like filtering, etc.

An example of that has been explained here, if you haven't already then please check this out.

https://experienceleague.adobe.com/docs/experience-manager-learn/sites/integrations/adobe-client-dat... 

Hope this helps!

Regards,

Nitesh

[Tanika02]

Hello @nitesh_kumar - 

Thankyou for your response !

I understand that we can push the a callback function and the data layer would asynchronously process it from the queue. (as & when)

But Let's say, If user clicked on a CTA and I wanted to capture the ID & name of the CTA clicked by the user.

If I simply push the data just by doing window.adobeDataLayer.push(..) from a method/Click Event Listener. That is also possible right?

Then in that case why would we do something like lets say this - 

window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push(function (dl) {
dl.addEventListener("cmp:show", pageShownHandler);
});

function pageShownHandler(event) {
var dataObject = getDataObjectHelper(event, {"@type": "wknd/components/page"});
if(dataObject != null) {
console.log("Page Shown: " + dataObject['dc:title']);
console.log(dataObject);
}
}

[Tanika02 · Accepted solution]

• So, I think @nitesh_kumar what you said is valid that we should be leveraging the callback function approach when we would like to push some data to the data layer whenever an HTML/JavaScript Event (Click,toggle,etc..) is fired.
• Additionally, if let's say there exists an event listener already listening to a given HTML/JavaScript Event we can also push the data to the data layer from within as well.