Adding a Parameter to Url with javascript

Question

I am trying to add the parameter "referer=" to my url corresponding to the trafic referer of a new session.

I used some of the code from this topic... but it keeps reloading the page in a loop... then the url is like :

https://example.com?refere=facebookreferer=facebookreferer=facebook

Note:

I have been using this solution 1 :

function addOrUpdateUrlParam(name, value)

{
  var ref = document.referrer;
  var refsplit = ref.split(".")[1];
  var href = window.location.href;
  var regex = new RegExp("[&\\?]" + name + "=");
  if(regex.test(href))
  {
    regex = new RegExp("([&\\?])" + name + "=\\d+");
  {

  else
  {
    if(href.indexOf("?") > -1)
      window.location.href = href + "&" + name + "=" + value;
    else
      window.location.href = href + "?" + name + "=" + value;
  }
  if (refsplit != "example") {
  return addOrUpdateUrlParam("referer", refsplit);
}
}

And this solution 2:

function () {
  var ref = document.referrer;
  var refsplit = ref.split(".")[1];
  if (refsplit != "example") {
return location.search += "referer=" + refsplit;
}
}

Edit 1: Thanks to Prasanth I improved the code to :

function  () {
  var ref = document.referrer;
  var refsplit = ref.split(".")[1];
  var currentUrl = location.href;
  var url1 = currentUrl += "?referer="+refsplit;
  var url2 = currentUrl += "&referer="+refsplit;

   if(currentUrl.indexOf("?") < 0) {
    return window.location = url1;
   } else {
    return window.location = url2;
   }
}

However, it is returning both conditions :

https://example.com/?referer=facebook&referer=facebook

Edit 2: So after many attempts, I achieved it by working with the parameters of the url (location.search) instead of the full url (location.href) :

function addRefererParam () {
var ref = document.referrer;  //Get Referrer
var refDomain = ref.match(/[^(?:http:\/\/|www\.|https:\/\/)]([^\/]+)/i)[0]; //Extract Referrer Domain name for better readability
var params = location.search; //Get Url parameters

  if (refDomain.match(/mydomain|null|undefined/i)) { //check if domain not null or own domain. 
    return params ;
} else {
    return params += "utm_source=" + refDomain; //create new query string with referrer domain
}
}

However, it is no making a persistent query string through browsing... how can I make the new parameters persistent ?

Prasanth Ganesan · Answer 1 · 2019-02-12T05:23:31.617

1

Obtain the url of the current window and after the domain name just concat your url with &referer=value.

var currentUrl = location.href;
var paramsInUrl = currentUrl.split('&');
var flag = true;
for(var i in paramsInUrl)
{
    if(!paramsInUrl[i].includes('referer=')
    {
        continue;
    }
    else
    {
        flag = false;
        break;
    }
}
if(flag)
{
    currentUrl += '&referer='+value;
    window.location = currentUrl; 
}

edited Feb 12 '19 at 05:23

answered Feb 11 '19 at 11:29

Prasanth Ganesan

541
4
14

It almost works... in fact, sometimes the current url does not have any parameter yet... so I modified it with... but it is adding both conditions like : http://www.example.com/&referer=facebook?referer=facebook – B4b4j1 Feb 11 '19 at 12:47
1

Store the url in a variable and split it using &. Now you will have all the parameters along with the value in an array. Convert the array to string using toString() method. now check (!if(parameters.includes("referer)). If this condition returns true then insert my answer below the if statement – Prasanth Ganesan Feb 11 '19 at 13:12
1

Thanks... Looks great and I am pretty sure It should work.. but the site keeps looping the parameter and I don't know why : – B4b4j1 Feb 11 '19 at 17:09
1

May be the problem is in the server side. This code will send GET request to the server and if you did not handle get requests in the server side, problems may arise. Try to send a request to the server from postman and check if it goes correctly. If this went fine then comment the status code you are getting. – Prasanth Ganesan Feb 12 '19 at 05:25
If this worked then please mark my answer as verified. Ty – Prasanth Ganesan Feb 14 '19 at 06:56

score 1 · Answer 2 · answered Mar 15 '20 at 00:04

For what it's worth (because the more generic question of just how to do this generally is what lead me to this post), I've made a 178 byte helper function that takes in an object of the query parameters you want to add to a url for a GET request (in similar format for how you might add headers to a request) and made an npm package for it here: https://www.npmjs.com/package/add-query-params-to-url

Hopefully this is helpful to some.

Adding a Parameter to Url with javascript

2 Answers2