Home
Support
Cookbook
Without Code
Using AdPlugg with the Without Code Quick Nav Feature

Using AdPlugg with the Without Code Quick Nav Feature

This cookbook recipe describes how to use AdPlugg on a Without Code site that utilizes Without Code's "Quick Nav" feature.

By default, with Quick Nav enabled, you may notice that AdPlugg only loads ads when you refresh the page. This post explains what is going on and provides a solution for how to fix the issue.

This recipe assumes that you have already set up AdPlugg on your Without Code site. If you haven't already taken this step, please check out this recipe before proceeding.

Quick Nav

Without Code has a cool feature called Quick Nav. Quick Nav allows you to speed up how fast secondary pages on your site load.

Without Quick Nav enabled, when you click the links on the nav bar, the browser will navigate to the other page causing a full page load/refresh. This can be slow.

With Quick Nav enabled, when you click the links in the nav bar, JavaScript on the page will modify the parts of the page that need to change to show the secondary page. Often, it is just a tiny fraction of the page that needs to change. With Quick Nav, the page change happens without calling the server or having to load the whole new page. As you can imagine, this is much faster than retrieving and rendering the whole new page from scratch.

Quick Nav and Third Party Scripts

Quick Nav is great but can be not-so-great for third party scripts and integrations (such as AdPlugg) that don't know that the page has changed. The third party systems expect the page to load in the traditional manner (as it would with the Quick Nav feature turned off).

Enter AdPlugg Watch

Luckily, AdPlugg has a feature that was designed for just this type of scenario. The feature is called AdPlugg "watch" and when you turn it on, AdPlugg will watch for changes to the page and the URL. If a change is detected, AdPlugg will load ads into any new Ad Tags that appear.

To enable AdPlugg watch, just add the watch command right above where you are loading the AdPlugg SDK. It should end up looking something like this:

<script>
    (AdPlugg=window.AdPlugg||[]).push({'command':'watch'}); // <== ENABLE ADPLUGG WATCH
    (function(ac) {
      var d = document, s = 'script', id = 'adplugg-adjs';
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id; js.async = 1;
      js.src = '//www.adplugg.com/serve/' + ac + '/js/1.1/ad.js';
      fjs.parentNode.insertBefore(js, fjs);
    }('YOUR ACCESS CODE HERE'));
</script>