Site Intercept - Single Page Application | Qualtrics

Single Page Application

Introduction

By default, Site Intercept code runs as soon as a web page loads. However, in a single page environment, you will need the ability to specify when the Site Intercept code is evaluated, typically after a specified event has occurred. By using JavaScript API requests to run or load your Site Intercept code, you can control when Site Intercept code is evaluated.

This page outlines two alternative techniques to implement Site Intercept code using JavaScript API requests.

Attention: The following documentation is provided as-is and requires programming knowledge to implement. Our support team does not offer assistance or consultation on custom coding.  If you’d like to know more about our custom coding services, please contact your Qualtrics Account Executive.

Implementing Manually with JS API

 

This first method outlines how to switch your Site Intercept code to run manually.  This means that the Site Intercept Code won’t run or evaluate the associated Intercept Display Logic until the appropriate JavaScript API request is initiated.

To implement manually

  1. Navigate to the Zones tab.
  2. Under the Manage Zones dropdown, select Zone Options and then enable the Manually Load Zone option. (If Manually Load Zone is not selected, the Zone will load immediately on page load.)image01
    Qtip: If you’ve decided to place an Intercept Code on your website instead of Zone Code, you’ll need to enable Manually Load Intercept. Navigate to Intercepts, then Change Options, and then select Manually Load Intercept.image00
  3. Ensure that the Intercept Display Logic is properly set up.
    Qtip:  We recommend that you set up the logic to be run based off of HTML on the website, a JavaScript expression, Cookies, or Event Tracking. For more information, see our Other Conditions support page.
  4. Place the Zone Code into your website, preferably in a global header or footer so that it loads on all pages.
  5. Add the appropriate JavaScript API requests based on how many times you want your website to reference the intercept.

JavaScript Requests

In addition to our Site Intercept JavaScipt API documentation, here are basic guides for which requests should be used in which circumstances.

If you want Qualtrics to evaluate your Zone or Intercept once, use these two requests:

  1. QSI.API.load();

    This previous request loads the Site Intercept code for any defined Intercepts or Creatives

  2. QSI.API.run();

    This starts the Intercept code evaluation.

If you want Qualtrics to evaluate your Zone or Intercept a second time or more, on the same page, repeat the follow three steps each time:

  1. QSI.API.unload();

    This previous request removes the Site Intercept code for any defined Intercepts or Creatives

  2. QSI.API.load();

    This loads the Site Intercept code for any defined Intercepts or Creatives

  3. QSI.API.run();

    This starts the intercept code evaluation.

 

Implementing Automatically with JS API

Rather than manually running your Site Intercept code on every webpage, instead you can select to have your Site Intercept code will automatically run on each webpage that it’s placed on. Then if needed you can use JavaScript API requests to Unload and Load your Site Intercept code.  Using these requests, you can have Site Intercept Display Logic reevaluated within a single web page. This method is outlined below.

Qtip: This is commonly used to reevaluate Site Intercept Display logic, after a user interacts with your web page, but their interaction doesn’t lead to a new web page.

If you are using this method within an Angular JavaScript environment, the Site Intercept code will automatically run on the first page, but not on your subsequent “virtual” pages, until you use the Unload and Load JavaScript API requests.

To implement automatically with JS API

  1. Place the Zone Code into your website, preferably in a global header or footer so that it loads on all pages.
  2. Ensure that the Intercept Display Logic is properly set up.
    Qtip: We recommended that you set up the logic to be run based off of HTML on the website, JavaScript expression, Cookies, or Event Tracking. For more information, see our Other Conditions support page.
  3. Do not select the Manually Load option for Zone or Intercept!
  4. Use the Unload and then Load JavaScript API requests.
    • QSI.API.unload();

      This previous request removes the Site Intercept code for any defined Intercepts or Creatives.

    • QSI.API.load();

      This request loads the Site Intercept code for any defined Intercepts or Creatives and will reevaluate your Intercept Display Logic.

    • QSI.API.run();

      This starts the intercept code evaluation.