Previous page url value on SPA site

[VidhyaAk1]

How can we get previous page url when site is single page application

document.referral is not working in this case

[VidhyaAk1]

@Jennifer_Dungan 
Could you please help on this.

[Jennifer_Dungan · Accepted solution]

This is a fun one... 

You're absolutely correct that document.referral will not work. Just for reference for anyone who doesn't know why, this is because an SPA only loads the physical page once (initially), so the referrer that brought you to the site will be maintained throughout the entire visit. So if you were referred via Google, google will be set as the referrer on every page (which is bad because this will inflate your Referrer Instances, showing every page as being a direct link from the site), and if the site is opened directly, there will be no referrer set which will inflate your typed/bookmarked referral instances.

Now, typically, since the developers are driving the update content and updating the browser history, I would generally ask the developers to populate my data layer with Referral information, then use that instead of the standard document.referrer.

However, if this isn't an option, you will have to come up with your own solution... in this case, what I would do is to use some custom code. Inside the set variables action on my tracking rule, I would check if my own custom "referrer" variable in the session storage (something like customReferrer).

On the first page load, my session storage variable wouldn't exist, and if it doesn't, then I would read document.referral and I would populate the s.referrer manually with the result.

Something like:

s.referrer = sessionStorage.getItem("customReferrer") ? sessionStorage.getItem("customReferrer") : document.referrer;

Since this is the first page load, the customReferrer won't yet exist, document.referrer will be returned, whether it has a referrer, or is a direct open (no referrer).

After the beacon has been sent, within the same rule, I would add a custom code to set customReferrer with the current URL (make sure that your actions are run in sequence - "Wait Then", not "Then").

sessionStorage.setItem("customReferrer",document.location.href)

On the next page when the page view is triggered, the customReferrer should have a value (your previous site page), so now this value should be used since it exists.

If the user reloads the page, you should still retain the session storage value and that value should be picked up by your code.

Obviously you would want to test this all thoroughly... or like I said at the beginning, get your developers to do all this logic into your data layer so all you have to do is read from there.

[VidhyaAk1]

where i need to put this code ?
s.referrer = sessionStorage.getItem("customReferrer") ? sessionStorage.getItem("customReferrer") : document.referrer;

[Jennifer_Dungan]

Hi @VidhyaAk1,

I would add the first part of the code inside the "Custom Code" section of your Set Variables:

(note, you don't have to populate the referrer in your Set Variables, this should overwrite that anyway)

And then have a separate custom code to set the session storage after the beacon:

Your action sequence would look like this:

Which relies on this setting on your property:

And "wait to run next action" on each action in the sequence (this should be the default setting with sequencing enabled)

You could add the initial code to another custom code block, but I would just combine it with the Set Variables action... one less step, and a little easier to make sure this code takes precedence over something potentially set in the referrer in the standard interface.

[VidhyaAk1]

Hi @Jennifer_Dungan 

Its a websdk implementation.
When we refresh the page at that time we are getting the current page url value as referrer. Even for CTA clicks also we are getting the current page url as referrer 
How we can solve this ? 

Current Implementation :
We created data element : Referrer

sessionStorage.getItem("customReferrer") ? sessionStorage.getItem("customReferrer") : document.referrer;

we are mapping it under web.weReferrer.URL

We are adding the below code as custom code in the same rule

[Jennifer_Dungan]

Yes, unfortunately, refreshes will be impacted by this...

In a normal application, refreshing will maintain the current referrer... and that referrer gets overwritten on each subsequent page. There is no way to detect a refresh... so refreshes will track the current page rather than the page's original referrer.. however, one could argue that is more valid... since when the user refreshes, they did in fact come from the same page.

As for your actions, like Clicks... you shouldn't be tracking a referrer on clicks... referrers should really only be send on pages... 

For instance, when you are looking at your "referrer instances", if you have a page that was loaded from Google, then you click on a CTA... you should only have 1 referral instance... (the referrer "value" would be carried forward to the CTA Click, but this should not be setting an instance).... Setting the value on both the page and the click would result in tracking your Google Instances twice, which would inflate your values... which wouldn't be good at all.

[Ankit_Chaudhary]

Hi @VidhyaAk1 

you can use common web sdk plugins extension to create a data element with get previous value plugin.

[Jennifer_Dungan]

The problem with "previous value" in this scenario is also when to use the previous value, and when to use the actual referrer value. I suppose you could use this in a similar check for Previous Value, if not, use the Referrer...

But the code for the plugin, because it's trying to do so many things, is a lot more code and technically more inefficient then the simple code I posted, which is dedicated specifically to the use. I prefer cleaner code, but either would work, and both would work the same way (and have the same "refresh" issue... I see no way of making that work exactly like a standard website... the previous value would still pull back the current page, since that would now be the previous value)... 

But it would cause a new issue, if the use refreshes after the 30 mins are up, this solution would go back to saying the page was referred from the original referrer, which again would inflate those value artificially... the solution I posted would not.

[VidhyaAk1]

Hi @Jennifer_Dungan 

thanks for sharing this,

for relaod we can use below code and it solved our problem

if (document.location.href == sessionStorage.getItem("customURL"))
{}

else
{
sessionStorage.setItem("customReferrer",sessionStorage.getItem("customURL"));
sessionStorage.setItem("customURL",document.location.href);
}
return (sessionStorage.getItem("customReferrer") ? sessionStorage.getItem("customReferrer") : document.referrer);