How do I apply an experience to all views in a SPA?

[Michael_Wills]

So I have a page with two key sections on it - stuff above this nav and stuff below it. 

If I interact with the nav, the contents of the page below the nav change, while the contents above that nav do not.

The page (on initial load) defaults to showing the "Overview" nav item contents, and our current implementation is such that adobe.target.triggerView("Overview"); will fire at this point in time. 

The problem however is, lets say I want to change that image above the nav. When I load the page up in the VEC, the modifications pane says that my current view is "Overview" because of the defaulting described above. This means that any modification made under that circumstance, needs to wait until a call is made to pull in any modifications for the "Overview" view... which is not ideal from a page display timing issue perspective.

Is there a better way to do this so that I apply this modification at a more global state (i.e. not triggered by a single view)?

[Ryan_Roberts_ · Accepted solution]

Hi @Michael_Wills,

If I understand correctly the SPA on view change does NOT change/update the content above the nav. The content above the nav is only loaded by the pageload. If so, one thing that might help in your situation is loading the page in the Visual Experience Composer (VEC) and then making the modification. As you noted, the VEC will automatically detect that the current view is, "overview" in your case. Once you've made the modification if you hover over it in the modification pane you'll see an icon that will let you "move" the modification to a different view or the pageload. Move the modification to the pageload.

If you make multiple modifications move all the appropriate modifications. Then make sure your page delivery template rule applies appropriately to all the different URLs of your SPA. For example, if a visitor's pageload can happen on the "how to apply" page and you want that to also qualify for the new experience.

Hope that helps!

-R

[Michael_Wills]

Awesome! Thank you! That was totally not obvious to me haha. Exactly what I was looking for.

[Sean_Hearn]

Hi Ryan

I have a similar (but not completely the same) issue I could use your assistance with. 

The SPA site has global next.js header and footer elements, but the screens content is dynamically changed based on screen view.

Using XF's to personalise the content in the 'page' section works BUT not if a user navigates to another screen and then returns to the page the activity is set to drop the XF on. So, XF's load on page load, but not after navigation to other pages. 

I'm using a "landing page query contains" logic for audience targeting, where CID codes are being used to identify users from a specific marketing channel. 

As we're using form based builder (XF) there isn't the option to move to a different view (which Im familiar with from other experiences).

Is there anything you cna recommend to check so that the XF's are persistent during navigation? 

Thanks

Sean