OptiMonk for Single Page Application (SPA)

If your website is a Single Page Application (SPA), then all you need to do is to insert the following code snippet next to the OptiMonk tracking code: 

(function (win) {
    var history = win.history
    var htmlTag = document.querySelector('html')
    if (htmlTag) {
        htmlTag.addEventListener('optimonk#ready', function () {
        if (win.OMHistoryOverrided) return
        var pushState = history.pushState
        var replaceState = history.replaceState
        history.pushState = function(state) {
            try {
                if (typeof history.onpushstate == "function") {
                    history.onpushstate({state: state});
                }
                return pushState.apply(history, arguments);
            } catch (e) {
                console.error('Ooops, push navigation error...', e)
            }
        }
        history.replaceState = function(state) {
            try {
                if (typeof history.onpushstate == "function") {
                    history.onpushstate({state: state});
                }
                return replaceState.apply(history, arguments);
            } catch (e) {
                console.error('Ooops, replace navigation error...', e)
            }
        }
        history.onpushstate = history.onpopstate = reloadOM;
        function reloadOM() {
            win.OMReloading = true
            try {
                for (var i = 0; i < OptiMonk.campaigns.length; ++i) {
                    var ca = OptiMonk.campaigns[i]
                    if (ca) {
                        if (ca.activated) ca.close()
                        for (var j = 0; j < ca.initiatedEvents; ++j) {
                            ca.initiatedEvents.removeHandlers()
                        }
                    }
                }
            for (var i = 0; i < OptiMonkRegistry.timeouts; ++i) {
              clearTimeout(OptiMonkRegistry.timeouts.pop())
            }
            for (var i = 0; i < OptiMonkRegistry.intervals; ++i) {
              clearTimeout(OptiMonkRegistry.intervals.pop())
            }
            OptiMonk.removeAllListeners();
            delete OptiMonk.preloadInitialized
            var holders = document.querySelectorAll('.om-holder')
            for (var i = 0; i < holders.length; i++) {
                holders[i].remove()
            }
            delete win.OptiMonk
            OptiMonkRegistry = {}
            var oldScriptTag = document.querySelector('script[src*="preload.js"]')
            var scriptTag = document.createElement('script')
  
            scriptTag.setAttribute('src', oldScriptTag.getAttribute('src'))
            oldScriptTag.remove()
            document.body.appendChild(scriptTag)
            } catch (e) {
                console.error('Ooops, error occured while reinitiating...', e)
            }
            win.OMReloading = false
        }
        win.OMHistoryOverrided = true
      })
    }
  })(window);

Have more questions? Submit a request

Comments