Using the plugin on a SPA reloads the page when going to a single product page

Hi,

I am usually open for any addition but in your case I will need some help.
How exactly should this code change in order to keep the original functionality but also to support SPA cases?

Basically this code is there in order to give time for GTM to execute all related tags when users click on a product in a list. I assume this is not needed for SPAs as the browser is not unloading the page, interrupting all running JS codes.

If that is the case, the only question left is how can the plugin detect that the site is a SPA?

Most of SPA libraries (if not all) use the History API to modify the URL on the browser. I thought to find an event in which is triggered every time the URL is changed by using history.pushState function. A similar property is WindowEventHandlers.onpopstate, but this event is not triggered when using pushState, but only functions like history.back(), history.go(2). Anyway, I managed to find a function modified to also work with pushState:

(function(history){
	var pushState = history.pushState;
	history.pushState = function(state) {
			if (typeof history.onpushstate == "function") {
					history.onpushstate({state: state});
			}
			
			return pushState.apply(history, arguments);
	};
})(window.history);

Now if we add this below:

window.onpopstate = history.onpushstate = function() { … }

an event is triggered every time the URL is changed using pushState function.

I added a new variable “var is_spa_site = false;” and if this event is triggered, I change the variable to true. This is triggered before your click event so when the code goes to your callBack, I make a check of is_spa_site variable, if it’s true, there’s no need to go into your callBack code.

All the code can be found here: https://gist.github.com/erip2/5ebbfd0ae0f9cafd08af09fee2b46635

P.S. I tried to add a <em>window.onpopstate = null</em> after the callback function in order not to trigger this event anymore since we know that this is a SPA with only one use of pushState, but I noticed that the JS file was being initialized again even on the new page, so it didn’t make any difference.