Adobe Employee

Solved

Previous page url value on SPA site

Forum|Forum|1 year ago
May 24, 2024
3 replies
4013 views

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

document.referral is not working in this case

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Jennifer_Dungan

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.

V

VidhyaAk1

Author

Adobe Employee

@jennifer_dungan
Could you please help on this.

Jennifer_Dungan

Accepted solution

Community Advisor and Adobe Champion

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.

V

VidhyaAk1

Author

Adobe Employee

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

Jennifer_Dungan

Community Advisor and Adobe Champion

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.

Ankit_Chaudhary

Community Advisor

Hi @vidhyaak1

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

Jennifer_Dungan

Community Advisor and Adobe Champion

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.

V

VidhyaAk1

Author

Adobe Employee

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);

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded