Capability to reset the data layer

[gabrielwalt]

For web applications like SPA, it should be possible to simulate a reset of the data layer as when a new page is loaded. This is especially important in cases the Data Layer holds a lot of information and triggers many events because the array can then quickly become massive if a visitor actively browses around for a few minutes or more.

For example: adobeDataLayer.reset();

A more detailed example:

adobeDataLayer.push({ one: "some data" });
adobeDataLayer.length;
// 1
adobeDataLayer.getState();
// { one: "some data" }

adobeDataLayer.reset();
adobeDataLayer.length;
// 0
adobeDataLayer.getState();
// {}

[gabrielwalt]

Given that we want to allow instantiating a new data layer (see #44), we could also use that to reset the data layer.

Here's an example of how that could work for an SPA that wants to reset the data layer each time the visitor gets routed to a different URL:

window.addEventListener("popstate", function (event) {
    window.adobeDataLayer = new AdobeDataLayer();
    // Register again your event listeners here.
});

This has been documented here: https://github.com/adobe/adobe-client-data-layer/wiki/Adobe-Client-Data-Layer#reset-data-layer

[bennet-roy]

When a view change happens in SPA, the Data Layer does not always change in its entirety, So it will be good to give flexibility for the developers to decide what should be reset and what should be retained when a reset is called on the Data Layer.

For instance, when a user authenticates, the User object of the data layer will be populated. Further view change on the same session can retain this User object. Resetting the Data Layer completely will require the developers to pull user data from backend on every view change.

it will be great if developers can call reset with a an object and array list of events to retain.

Example of how the API could potentially look:

// Example for clearing/resetting everything
adobeDataLayer.reset({}, []); 

// retain user and navigation component object and reset all other data.
// retain "click" and "view-change" event handlers and remove all other event handlers.
adobeDataLayer.reset({ 
"component" : {
  "navigation" : adobeDataLayer.getState("component.navigation")
 },
 "user": adobeDataLayer.getState("user")
 },
 ["click", "view-change"]
); 

[jckautzmann]

We could introduce a keepOptions argument for the reset() method with 2 properties, paths and events, which are arrays defining the paths and events to keep. E.g.:

  const keepOptions = {
    paths: ["page", "component.carousel.carousel1"],
    events: ["click"]
  };
  dataLayer.reset(keepOptions);

WDYT? @bennet-roy @gabrielwalt

[bennet-roy]

Sounds good. Just to add more flexibility, Can we add a flag which can tell whether to keep or remove whatever is in the Array?

//For removing
const options = {
    paths: ["page", "component.carousel.carousel1"],
    events: ["click"],
    action : remove
  };
  dataLayer.reset(keepOptions);

//For keeping
const options = {
    paths: ["page", "component.carousel.carousel1"],
    events: ["click"],
    action : keep
  };
  dataLayer.reset(options);

[jckautzmann]

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

It works as follows:

// For keeping
const options = {
  keep: {
    paths: ["component.carousel.carousel4"],
    events: ["click"],
    history: true // will keep the data layer items history
  }
};
adobeDataLayer.reset(options);

// For removing
const options = {
  remove: {
    paths: ["component.carousel.carousel4"],
    events: ["click"],
    history: true // will remove the data layer items history
  }
};
adobeDataLayer.reset(options);

[sorenhoyer]

How's the status for adding this functionality?

[charltoncraig]

This capability exists in the 'Adobe Client Data Layer' Launch extension, but I can't find any evidence of it being added here?

[s10-steve]

Is there any update on this issue? It would be very useful.