Change dataLayer Variable Name

[klcodanr]

Expected Behaviour

I may want to change the name of the dataLayer variable. For example, if an implementor already has Google Tag Manager implemented, and they are looking to implement an Adobe Client Data Layer, they will have to deal with a naming conflict between the Adobe Client Data Layer and GTM's built-in DataLayer. We have a few choices to fix this:

1. Rip & remove all GTM code
2. Rename GTM's DataLayer, then rewrite the server-side GTM push code and implement the Adobe Client Data Layer
3. Rename the Adobe Client Data Layer and initially keep the GTM code in place before sunsetting once the new tracking is fully implemented

To support option # 3, there would need to be some way to pass a new dataLayer name to the Adobe Client Data Layer.

Actual Behaviour

There appears to be no way to chage dataLayer variable name

Reproduce Scenario (including but not limited to)

N/A

Steps to Reproduce

N/A

Platform and Version

1.0.0.beta2

Sample Code that illustrates the problem

N/A

Logs taken while reproducing problem

N/A

[jckautzmann]

@klcodanr Now that we introduced support for pushing a function into the data layer, the adobeDataLayer object can be renamed myDataLayer as follows:

window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push(function(dl) {
    window.myDataLayer = dl;
});

[Aaronius]

@jckautzmann, that would only be useful if I don't need to push things onto window.myDataLayer until after the data layer library loads, correct?

A more flexible solution might be to allow the consumer to provide the name of the data layer on the script element itself. Here's an example, assuming you want to support multiple data layers:

<script>
  window.myDataLayer = [];
  window.myOtherDataLayer = [];
</script>
<script src="adobe-client-data-layer.min.js" async defer data-layers="myDataLayer,myOtherDataLayer"></script>

Then when the script loads, have the script pull the names of the data layers using document.currentScript.dataset.layers

[vladbailescu]

@Aaronius , I would rather put that data-layers attribute on the script element where the global objects are defined:

<script data-layers="myDataLayer,myOtherDatalayer">
  window.myDataLayer = [];
  window.myOtherDataLayer = [];
</script>

Then we could pull the names using document.querySelectorAll('[data-layers]').

[jckautzmann]

Also relates to https://github.com/adobe/adobe-client-data-layer/issues/44

[jckautzmann]

A proof of concept is available at: https://github.com/adobe/adobe-client-data-layer/tree/feature/create-copy-reset

By default the adobeDataLayer is created. The rename it, add the following HTML to your page head:

    <script data-adobe-client-data-layers="myDataLayer">
      window.myDataLayer = window.myDataLayer || [];
    </script>

For more details: https://github.com/adobe/adobe-client-data-layer/issues/44#issuecomment-625884455

[shraddhanegi]

how to include this nodemodule @adobe/adobe-client-data-layer/dist/adobe-client-data-layer.min.js into head.html of AEM site any documentation would help a lot, I wrote after installing package but it doesn't work even importing in publish.entry.js doesn't help it throw error e.function not defined when I do window.addDataLAyer.getState() something none of the helper function working

[jckautzmann]

@shraddhanegi The integration of the Data Layer with AEM is explained at: https://github.com/adobe/aem-core-wcm-components/blob/master/DATA_LAYER_INTEGRATION.md