Hey there. The short answer to your question has to do with AEM.
ACDL is an event driven data layer that is managed and created by AEM 6.5+,
Meaning, if you're using an AEM CMS, the 'adobeDataLayer' JS Object will automatically be available. It will list out all the AEM components that make up the web page AND it will include 'events', like cmp:show and cmp:click to tell Adobe Data Collection when to fire and what rules to fire.
EDDL is pretty much the same thing, but it is independent from AEM. It's when your website developers add event listeners to the user experience and trigger 'events' when appropriate. Each event must be added manually by the dev team, which is why ACDL is so appealing, in my opinion.
As for integrating ACDL with Adobe Data Collection & Adobe Analytics... there are two approaches. Adobe's documented approach - https://experienceleague.adobe.com/docs/experience-manager-learn/sites/integrations/analytics/collect-data-analytics.html?lang=en - does work. But it requires you to add 'custom code' to your rule events / triggers. Not the end of the world, but not the best.
The 2nd approach is to use the ACDL Extension, by Adobe Consulting services. This enables you to use the GUI to trigger your rule events. You simply have to identify which AEM event you want to trigger your rule (e.g., cmp:show, cmp:loaded or cmp:click).
You should know, that neither case supports the AA Extension. Meaning the Global Variables will not work at all. You'll have to add all your global variables to your individual rules. Plus the AA extension custom code section has NO access to the 'event payload' coming in from AEM. This means if you want to use the AA Extension custom code section you'll have to either reference a Data Element or reference the adobeDataLayer specifically. PLUS you'll have to add your custom code to the 'doPlugins' section otherwise you'll get inconsistent results in your props and evars.
I recommend you use the ACDL extension, as I did find that easier to use. But unfortunately I was never able to figure out how to use the ACDL Extension to create Data Elements. I just used custom code to do all that. For example, to capture the 'dc:title' on a 'cmp:show' event (aka page load event), I used this script
try {
if( event && event.message && event.message.eventInfo.path ){
var a = adobeDataLayer.getState(event.message.eventInfo.path);
return a['dc:title'];
}
} catch(err) {}
the event - refers to the payload event coming from AEM
the event.message is an object given to you when you implement the ACDL extension
the eventInfo.path is the unique identifier for the AEM component that was associated with the event, in the case of a page load it would be the page component id, in the case of a button click it would be the link component id.
then using the getState method, you can pass the 'eventInfo.path' into the method to access the information about that specific component at that moment in time.
As I mentioned earlier and per my own testing, the 'event' data is only available to the rule that gets triggered and the data elements called in that rule. This is different than other installs. Normally data elements are refreshed on a page load and don't have to be used to get updated. With the ACDL, the data elements will NOT update unless they are included in your rule. I'm still assessing the implications of that for my specific scenarios.
I don't have any screenshots and I've just started working with this myself, but I hope that gives you some direction to start with.