Events are being passed on next page in adobeDataLayer in SPA

[Parth_Gupta]

Hi All,

There are multiple pages in the journey - some pages load properly and some page don't load (acts like SPA).

Issue is when there are two page continuously which don't load (act as SPA), Events are being passed on next page from the previous page.

For Example -

Page A - event1 and event2

Page B - event1 only (but we see event2 as well passing in it).

if i check adobeDataLayer event2 is not populated in the data-layer but this is present in adobeDataLayer.getState().

Any solution to handle this situation? we have reset the data layer as well in action section of the rule.

[Ankit_Chaudhary]

Hi @Parth_Gupta 

From your screenshot it seems like you are using web sdk however few things to be noted the reset data layer action does not completely remove the data which is set previously during the push methods it just reset the data layer length.

also adobeDataLayer.getState() provide you the computed state there is no such difference in data which is available by calling either adobeDataLayer or adobeDataLayer.getState() it just the computed state treats it more like in a json format.

If you're getting event2 on calling  adobeDataLayer.getState() it most likely that you're developer passing it on the next page load as well, check with them once if there are any issues with the implementation of data layer on the SPA page.

[Jennifer_Kunz]

adobeDataLayer.getState() is different from just looking at the most recent event in adobeDataLayer... it can show things that aren't present in the most recent event. So if you have something like "event2:true" in your first page view event, and event2 isn't set at all in your second page view event, then getState will still show "event2:true", which is probably what we're seeing here. If a variable is not overwritten, it hangs around in getState indefinitely. 
But you're correct that using the reset data layer functionality may not help- that wipes out all the events, but not the computed state. 
You can either:
1. make sure that anything you don't want to persist gets overwritten (eg, set "event2:false" on pages where you don't want event2 set)
2. not rely on getState for your logic, but instead check only the most recent push to the data layer

[Damonwhall]

I agree with @Ankit_Chaudhary 's comments.  

Some additional considerations:

• if you are dealing with some pages that are SPA in nature, you can have your dev team ensure there is a "page load" or "page view" event that fires so that in your Launch rules you can have the default page view rule fire when that event occurs. 
• once the above is in place, then you should be able to treat your pages normally (in regards to events firing on their proper pages). 

This is something that we did on our site where a sub-domain was in essence a SPA.  all events and page views were happening on the initial page, and only when you left that web property did all related events and page views fire (and all at the same time).  

To address this, we created a page view or page load event that we were able to use in Launch for the default page view rule.  After this, all related events happened in their expected steps in the journey.  

[leocwlau]

As mentioned the reset datalayer action does not "empty" the datalayer but reduces it to the final state as one single element, with all persisting information. So if you have

adobeDataLayer.push({
    event: "pageview",
    page: {
        name: "page a",
        event1: 1,
        event2: 1,
    },
});

adobeDataLayer.push({
    event: "pageview",
    page: {
        name: "page b",
        event1: 1,
    },
});

The pageview tracking on page b should contain event2 as 1, which is the design of datalayer. After reset datalayer, the content datalayer could become a single item as the final getstate result.

[
    {
        "page": {
            "name": "page b",
            "event1": 1,
            "event2": 1
        }
    }
]

 This is problematic for SPA as there is page-specific information that should not carry over. The simplest approach is having the developer to push null to page before the normal data push on page b.

adobeDataLayer.push({
    event: "pageview",
    page: {
        name: "page a",
        event1: 1,
        event2: 1,
    },
});

// on the display of page b virtually
adobeDataLayer.push({
    page: null,
});

adobeDataLayer.push({
    event: "pageview",
    page: {
        name: "page b",
        event1: 1,
    },
});

You may refer to Home · adobe/adobe-client-data-layer Wiki · GitHub for the documentation that clears the attribute page from the datalayer so the event2 will be gone and not tracked with the second pageview.

Another interesting note on the adobeDataLayer is the eventInfo attribute, which will not be computed into the getState() so if there is any event-specific information, such as a button click event with the button label, the button label is better pushed under eventInfo instead of directly to the adobeDataLayer.