Using Qualaroo on Single Page Applications

If your site is a Single Page Application, there are two sections of the Qualaroo code you'll need to modify: The standard Qualaroo JavaScript, and the API calls used in your URL/Page change code. Some of this is a little general, and you may need to reconfigure things to work with how your site has implemented Qualaroo.

1. Changes to the standard Qualaroo JavaScript

The Qualaroo code generated for your site looks like this:

<!-- Qualaroo for test.com -->
<!-- Paste this code right after the <body> tag on every page of your site. -->
<script type="text/javascript">
  var _kiq = _kiq || [];
  (function(){
    setTimeout(function(){
    var d = document, f = d.getElementsByTagName('script')[0], s = d.createElement('script'); s.type = 'text/javascript';
    s.async = true; s.src = '//s3.amazonaws.com/ki.js/#####/xxx.js'; f.parentNode.insertBefore(s, f);
    }, 1);
  })();
</script>

First, you should add an API call to just below the var _kiq = _kiq || []; line which will disable Qualaroo's normal survey-loading code. This is because we're going to give it better instructions in Section 2, which will work better with your single page app.

Here is what the code looks like with this call, located on the 5th line:

<!-- Qualaroo for test.com -->
<!-- Paste this code right after the <body> tag on every page of your site. -->
<script type="text/javascript">
  var _kiq = _kiq || [];
  _kiq.push(['disableAuto']); //This prevents Qualaroo from automatically loading a survey
  (function(){
    setTimeout(function(){
    var d = document, f = d.getElementsByTagName('script')[0], s = d.createElement('script'); s.type = 'text/javascript';
    s.async = true; s.src = '//s3.amazonaws.com/ki.js/#####/xxx.js'; f.parentNode.insertBefore(s, f);
    }, 1);
  })();
</script>

The Qualaroo code snippet should be within the global scope whenever possible, so if you've made modifications to that effect, please just add the _kiq.push(['disableAuto']); line in the appropriate area, after the Qualaroo variable has been initialized.

2. Changes to your URL/Page change code

The call below will stop any survey being shown on a page once the URL changes, and then tells our system to show the correct survey. This will prevent surveys from continuing to show after the URL has changed, but will still allow the correct surveys to display on the pages they are supposed to. 

window.onpopstate = function () {
  window._kiq.push(['stopNudge']);
  window._kiq.push(['selectNudge']);
}

If this particular implementation doesn't work for your site, the following is the important part, which should be added to your URL/Page change code:

  window._kiq.push(['stopNudge']);
  window._kiq.push(['selectNudge']);

 

Have more questions? Submit a request
Powered by Zendesk