adobe-client-data-layer Order of events being added to the adobeDataLayer array.

Is seems that the ACDL script is adding events to the adobeDataLayer array only after the callbacks of the events have completed. This leads to an odd ordering of the event entries in the adobeDataLayer array.

Consider the following script:

<!doctype html>
<html>
    <head>
        <script src="https://unpkg.com/@adobe/[email protected]/dist/adobe-client-data-layer.min.js" async defer></script>
        <script>
            window.adobeDataLayer = window.adobeDataLayer || [];

            window.adobeDataLayer.push(function (dl) {
                dl.addEventListener("one", function () {
                    logItemEvent("2: ", 0);
                    logItemEvent("2: ", 1);

                    dl.push({ event: "two" });

                    logItemEvent("3: ", 0);
                    logItemEvent("3: ", 1);
                });

                logItemEvent("1: ", 0);
                logItemEvent("1: ", 1);

                dl.push({ event: "one" });

                logItemEvent("4: ", 0);
                logItemEvent("4: ", 1);
                    
                function logItemEvent(prependText, item) {
                    if (dl[item] && dl[item].event) {
                        return console.log(prependText+"adobeDataLayer["+item+"].event = "+dl[item].event);
                    }
                    return console.log(prependText+"adobeDataLayer["+item+"] = "+dl[item]);
                }
            });
        </script>
    </head>
    <body></body>
</html>

The resulting log output is:

1: adobeDataLayer[0] = undefined
1: adobeDataLayer[1] = undefined
2: adobeDataLayer[0] = undefined
2: adobeDataLayer[1] = undefined
3: adobeDataLayer[0].event = two
3: adobeDataLayer[1] = undefined
4: adobeDataLayer[0].event = two
4: adobeDataLayer[1].event = one

But the expected output would have been:

1: adobeDataLayer[0] = undefined
1: adobeDataLayer[1] = undefined
2: adobeDataLayer[0] = one
2: adobeDataLayer[1] = undefined
3: adobeDataLayer[0].event = one
3: adobeDataLayer[1] = two
3: adobeDataLayer[0].event = one
3: adobeDataLayer[1] = two

It would be expected that the ACDL appends the event object to the adobeDataLayer array prior to calling the callbacks that have been registered to that event, and not after. Because otherwise, notice how the events one and two end up in the reverse order.

Jul 29 '22 13:07 gabrielwalt

This is indeed the case because the pushed items are processed first before they are pushed to the underlying array.

While reading the code I also mentioned that the [delete filteredArguments[key]] (https://github.com/adobe/adobe-client-data-layer/blob/master/src/dataLayerManager.js#L116) statements actually mutate the arguments array that is being iterated. This should be done differently to not cause any hard to trace side effects.

Ideally the procedure is reversed the following way:

Filter the given arguments (Array.filter) and push only data and event to the underlying array
Iterate over all the arguments again (no filter) and process the items