Add string to url on page load with jQuery?

Question

I'm trying to add this specific string to the end of my url on page load:

?aa_campaign=f45632

(http://examplesite.com/test.html)

It's for marketing and tracking.

I've tried this:

if window.location.href.indexOf("http://examplesite.com/test.html") {
  window.location = "http://examplesite.com/test.html?aa_campaign=f45632";
}

That straight up didn't work but the idea is what I'm looking for. Any thoughts?

Solution 1

No need for jQuery, you can do this with pure JavaScript in most "modern" browsers, i.e.:

if (window.location.href  === "http://examplesite.com/test.html") {
    window.history.pushState("object or string", "Title", "http://examplesite.com/test.html?aa_campaign=f45632");
}

The pushState() method

pushState() takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL. Let's examine each of these three parameters in more detail:

state object — The state object is a JavaScript object which is associated with the new history entry created by pushState(). Whenever

the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object.

The state object can be anything that can be serialized. Because Firefox saves state objects to the user's disk so they can be restored

after the user restarts the browser, we impose a size limit of 640k characters on the serialized representation of a state object. If you pass a state object whose serialized representation is larger than this to pushState(), the method will throw an exception. If you need more space than this, you're encouraged to use sessionStorage and/or localStorage.

title — Firefox currently ignores this parameter, although it may use it in the future. Passing the empty string here should be safe

against future changes to the method. Alternatively, you could pass a short title for the state to which you're moving.

URL — The new history entry's URL is given by this parameter. Note that the browser won't attempt to load this URL after a call to

pushState(), but it might attempt to load the URL later, for instance after the user restarts the browser. The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL. The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception. This parameter is optional; if it isn't specified, it's set to the document's current URL.

SRC : https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Solution 2

You can add the string to window.location.search instead, for a more general solution.

if (location.origin + location.pathname === 'your url here') {
  location.search += 'additional data here';
}

The advantage of this approach is that you can apply this code to multiple pages with less changes to the same code.

Note that this will cause a page reload, which might not be optimal to user experience. Since you said you are doing this for tracking, you can instead ping the page by appending an image with the new url to DOM. Something like this:

var pinger = new Image(0,0); // keep the size of the image 0
pinger.src = 'changed url here, with the new query param appended';
document.body.appendChild(pinger); // ping sent
pinger.parentNode.removeChild(pinger); // remove the node when ping is sent

Hope that helps :)

Solution 3

This version will preserve any existing query string, and properly append your "aa_campaign=f45632" parameter string.

var w = window.location;
if (w.search.indexOf("aa_campaign") == -1) {
    window.location = w + (w.search.indexOf("?") == -1 ? "?" : "&") + "aa_campaign=f45632";
}

Example:

• http://example.com --> http://example.com?aa_campaign=f45632

• http://example.com/page.html?id=1 --> http://example.com/page.html?id=1&aa_campaign=f45632

Comments

[user3330820]

Thanks :) Worked perfectly!