Connext + SPA + URL #fragament

[sframe]

Hey Dael,

I'm catching up with all the emails today and it appears that there was an issue discovered with one of our smaller sites that inherits the MySite + MC + Connext.

For SPA sites (like Member Center) we have a method updateConnext() that would re-init Connext with state change, but Connext appears to have some problems with SPA sites that use the URL fragment to track page changes.

Hi again Engagement of the Audience team!

Emily has detailed the issues she’s seeing with ConneXt and single page apps below.

From our conversations earlier in Slack, I think we all agree that just calling membercenter.sdk.updateConnext() is not sufficient to mimic a full page reload with ConneXt metering, specially when many of these pages use the hash fragment identifier to change pages.

Tim’s suggestion to execute window.history.replaceState({}, 'Winning', Date.now()) before changing the page does seem to work in terms of updating the meter modals and counts. But I’m not sure this is the solution we want to communicate back to the content leads.

BTW, is there any way to extend the membercenter.sdk with a function that updates the current ConneXt state regardless of what the current URL is? Something that would increment the meter count and hence the modals every time it’s called, even when the page hasn't change at all?

Should we schedule a brainstorming Hangout to come up with a clean solution?

Unfortunately, the example site is behind a password so I'll need to work out a demo site to help demonstrate the issue.

Fortunately, Tim sent a nice write up of what he assumes to be the issue.

To clarify, just running window.history.replaceState({}, 'Winning', Date.now()) was a way to demonstrate the problem. Definitely not a recommended solution.

There’s no publicly accessible Connext method that lets us update the page count, so there’s not much we can do in updateConnext right now. It’s possible we could figure something out that would work, but hacking a solution is usually a bad idea.

I see two options here:

1. Avoid #hash urls.
2. Explain the problem to MG2 and ask them to fix it. We can offer lots of detail and recommend a course of action, but it’s ultimately an issue on their end.

-Tim

[sframe]

@mg2dael I'll try to get more details for you on Monday.

[sframe]

Maysam suggested a URL that your team could investigate against.

I suggest using this one https://s3.amazonaws.com/ajc-authtest/index.html that doesn’t require a user/pass.

Keep in mind that the content leads might be actively changing these sites specially now that I suggested they try calling Connext.Utils.GetUrl = () => window.location.href to see if getting around the fragment identifier issue will resolve all the other single page app issues as well.

[ilayGithub]

Right now Connext ignores on the URL anything that is going after # or ? symbols. Issue can be solved by adding to Init function extra parameter, that will tell us whether we need to analyse on the URL Hash or Get parameters and even define exact list of those parameters (all other except defined will be ignored).

Example will look like

var mg2Connext = Connext.init({
    siteCode: 'XX',
    configCode: 'XXXX',
    urlParams: '#Page1,#Page2,?prm1' // this will be treated as 'Hash parameters with names Page1, Page2, and Get parameter with name prm1  will be considered as a part of unique URL. All other parameters except listed will be ignored.'
...
});

Another example will look like

var mg2Connext = Connext.init({
    siteCode: 'XX',
    configCode: 'XXXX',
    urlParams: '#*,?*' // this will be treated as 'Any hash and get parameter will be considered as a part of unique URL'
...
});

By default, If this parameter is empty it will ignore any Get or Hash parameter (as it works now)

[mg2dael]

@sframe Will what Ilya suggests above work for you guys?