Adobe Data Layer Implementation (EDDL Approach) | Community
Skip to main content
Tanika02
Tanika02
Level 7
April 25, 2023
Solved

Adobe Data Layer Implementation (EDDL Approach)

  • April 25, 2023
  • 3 replies
  • 6362 views

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
 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Tanika02
  • So, I think @nitesh_kumar-1 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.

3 replies

nitesh_kumar-1
Adobe Employee
nitesh_kumar-1Adobe Employee
Adobe Employee
April 25, 2023

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-data-layer/data-layer-overview.html?lang=en 

 

Hope this helps!

 

Regards,

Nitesh

    Tanika02
    Tanika02Author
    Level 7
    April 25, 2023

    Hello @nitesh_kumar-1 - 

     

    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
      Tanika02AuthorAccepted solution
      Level 7
      April 25, 2023
      • So, I think @nitesh_kumar-1 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.
        Terms & ConditionsAccessibility statement

        Loading footer...