Adzerk dynamic reloading

Test reloading of adOS ads as page is dynamically modified.

by medmunds

HTML

<h2>Lodging in Kauai</h2>
<div class="ad" id="azk28939"></div>
<p id="navigate">Wait for the ad to load, then <a href="#">click here</a> to &ldquo;navigate&rdquo; (which will reload the ad with new keywords).</p>

CSS

.ad {
    width: 250px;
    height: 250px;
    margin: 10px 0;
    background-color: #eee;
}

h2 {
    font-weight: bold;
    font-size: 120%;
}
p {
    margin-top: 1em;
}
body {
    padding: 20px;
}

JavaScript

// Load adOS:
var proto = "http:";
if (document.location.protocol == "https:") {
    proto = "https:"
}
var z = document.createElement("script");
z.type = "text/javascript";
z.async = true;
z.src = proto + "//static.adzerk.net/ados.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(z, s);

// Initialize placements
var ados = ados || {};
ados.run = ados.run || [];
ados.run.push(function() {
    // load placement for account: Planapple Adzerk, site: Planapple, size: 250x250 - 250x250, zone: Idea Finder: Top-Right Promo
    ados_setKeywords("lodging,kauai");
    ados_add_placement(1917, 15388, "azk28939", 18).setZone(3647);
    ados_load();
});

// onDomReady
$(function() {
    // Set up dynamic "navigation"
    $("#navigate").click(function(event) {
        event.preventDefault();
        $("h2").text("Tours in Boston");
        $("#navigate").text("Navigated... loading new ad");
        ados.run.push(function() {
            ados_setKeywords("tours,boston");
            // Note: you could clear the ad div here, but that creates some undesirable flashing
            // $("#azk28939").empty();
            ados_add_placement(1917, 15388, "azk28939", 18).setZone(3647);
            ados_load();
        });
    });
});