Expand my Community achievements bar.

Applications for the 2024-2025 Adobe Experience Manager Champion Program are open!
SOLVED

Adobe Data Layer Implementation (EDDL Approach)

Avatar

Community Advisor

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
 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor
  • 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.

View solution in original post

3 Replies

Avatar

Employee Advisor

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

Avatar

Community Advisor

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);
}
}

Avatar

Correct answer by
Community Advisor
  • 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.