Cookbook
Mr. Pickles the AdPlugg Pug

Placing Ads Between Your Novi AMS Directory Categories

This recipe shows you how to place ads between the categories of a Novi AMS directory using AdPlugg.

The category listing is a more advanced spot for placing ads on a Novi AMS site. If you are new to AdPlugg, it's recommended that you start with one of the other Novi AMS recipes before attempting this one.

Create An Ad

If you haven't already done so, create an AdPlugg Ad.

  1. From within your AdPlugg account, create an Ad and upload an ad image (see the Ad Help Page).

Add the AdPlugg JavaScript SDK to Your Novi AMS Site

Next, we are going to add the AdPlugg JavaScript SDK to your Novi AMS Site. This allows you to run AdPlugg ads in the various places on your Novi AMS site. If you've already done this, you can skip this step.

  1. Log in to the Novi AMS admin.
  2. Click the gear icon in the top right and then choose Association Settings.
  3. From the left navigation menu, select the "Analytics/Scripts" tab.
  4. From within your account at adplugg.com, click "Download" and then "Snippet".
  5. Click the "Get The Snippet" button (at the bottom).
  6. Copy the AdPlugg SDK and paste it into the "Head tag script or markup" field (in the "Scripts" section).
  7. Save your changes.

Add an AdPlugg Ad Tag

Now, we are going to add an AdPlugg Ad Tag to the category listing for your Novi AMS Directory.

Note that in Novi AMS, the categories in the directory's category listing are loaded asynchronously using JavaScript. Because of this, we'll take an extra step to run AdPlugg once the categories have finished loading.

  1. Log into your Novi admin.
  2. Go to Members > Directories.
  3. Click the "View Frontend" link next to your directory.
  4. Switch to the Category View.
  5. Note that there is an Editable Content Region underneath each alphabetical section. Click on the editable region where you want an ad to appear. This will bring up the Frontend Content Editor
  6. From the menu at the top of the Content Editor, go to Tools > Source code (or click the source code icon: < >). This will allow you to make changes to the region's source code.
  7. From your AdPlugg dashboard, go to Download and then Snippet. Click the "Get the Snippet" button (at the bottom) and then copy the Ad Tag to your clipboard. Note that you can also get your Ad Tags from your Zones list.
  8. Paste the Ad Tag code that you copied above into the Source Code box in Novi AMS.
  9. Press the Save button to save the changes to the source code.
  10. Repeat the above steps to place ads in the Editable Content Region below any of the other categories as desired.

Important!

As mentioned above, Novi AMS loads the directory listing via JavaScript. Because AdPlugg might have already finished filling Ad Tags before the directory finishes loading, we are going to call AdPlugg.run when the directory finishes loading. To do so, edit the Editable Content Region below the "Z" category, and add the following code:

<script>
  // Call AdPlugg.run() (in a separate execution context) once the directories are loaded.
  setTimeout(function() {
    AdPlugg.run();
  }, 0);
</script>

Lastly, save your changes to the directory.

Adding More Ads!

Note that you can use Ad Zones to create a specific Zone for directory listing. You could make a Zone for each category or a use a single Zone.

See the Novi AMS docs here for a listing of other Editable Content Regions on the directory pages. You can easily run AdPlugg ads in any of these regions.

Take a look at the other recipes in the AdPlugg Cookbook for instructions on how to place ads into other areas of your Novi AMS site and to learn how to do other cool things with your ads including scheduling, rotation and more!