In this tutorial, you will learn how you can redirect users on your website based on referrer URL using JavaScript. According to W3Schools, "document.referrer" returns a string, representing the URL of the document that loaded the current document. Returns the entire URL, including the protocol (like http://). If the current document was not opened through a link (for example, through a bookmark), an empty string is returned.
Important Note: This solution is quite far from being the most elegant approach. The return value in case of "document.referrer" is sent in client side request headers and technically it can be spoofed and manipulated. Using HTTP_REFERER is not very reliable because of the fact that the return value is dependent on the HTTP Referer header which is sent by the browser or a client application to the server and hence you cannot trust it on production.
But, in some case, this will get the job done! Hence, we are going to discuss a test scenario. Let's say you have a requirement in which you want to check, where the user (or site traffic) is coming from on a webpage. Based on the referrer URL, you want to navigate (or redirect) the user to a different location (site or webpage).
This solution can check if the user (site traffic) is coming from a specific webpage or a website URL and based on that it will redirect the users accordingly.
Here is a simple example of how to use document.referrer:
<script>
function myTestFunction() {
var referrer = document.referrer;
alert(referrer);
}
</script>
Now, according to our test scenario, based on the referrer URL, if you want to navigate (or redirect) the user to a different location (site or webpage). You will use this code:
<!DOCTYPE html>
<html>
<head>
<title>Striving Programmers Test Page</title>
<script>
var referrer = document.referrer;
if(referrer.indexOf("hello") > -1) {
window.location.replace("https://bing.com");
}
if(referrer.indexOf("hi") > -1) {
window.location.replace("https://google.com");
}
if(referrer.indexOf("") > -1) {
alert("NULL referrer");
}
</script>
</head>
<body>
<h1>Striving Programmers Test Page</h1>
</body>
</html>
The above code is basically looking for a term "hello" or "hi" in the referrer URL. If it matches then it will redirect the user to different locations / pages / sites and if the return referrer value is NULL then it will display an alert box.
You can add ELSE condition as well like this:
<!DOCTYPE html>
<html>
<head>
<title>Striving Programmers Test Page</title>
<script>
var referrer = document.referrer;
if(referrer.indexOf("hello") > -1) {
window.location.replace("https://bing.com");
}
if(referrer.indexOf("hi") > -1) {
window.location.replace("https://google.com");
}
else
{
alert("do nothing");
}
</script>
</head>
<body>
<h1>Striving Programmers Test Page</h1>
</body>
</html>
If you would like to DOUBLE check two things:
1) Previous (referrer) domain
2) Previous (referrer) value - any term or text in the URL
In that case, you can change the code like this:
<!DOCTYPE html>
<html>
<head>
<title>Striving Programmers Test Page</title>
<script>
var referrer = document.referrer;
if(referrer.indexOf("www.google.com") > -1) {
if(referrer.indexOf("hello") > -1) {
window.location.replace("https://bing.com");
}
if(referrer.indexOf("hi") > -1) {
window.location.replace("https://google.com");
}
else
{
alert("do nothing");
}
}
else
{
alert("User is not coming from google site");
}
</script>
</head>
<body>
<h1>Striving Programmers Test Page</h1>
</body>
</html>
In the above example, we are checking if traffic / user is coming from Google site:
- If YES, then check the text / word in the return URL
- If NO, display an alert box
I hope you find this small hack / solution useful. If you have any other solution / alternative method, please feel free to share!
Thanks, Beatty