Change the url without need to reload the page

Question

I try to change the url of a page without need to reload the page. If I try this in console the URL is changing:

if (localStorage.getItem('product') !== null) {
    storedVariable = localStorage.getItem('product');
    url = window.location.href;
    url += '?product=' + storedVariable;
}
window.history.pushState("", "", url);

However when I put this code to google tag manager the URL of my page is the default. How can I fix it?

Answer 1

Maybe related to : mdn History_API

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.