AdPlugg.watch() Example

Use AdPlugg.watch to automatically fill new Ad Tags.

HTML

<div id="header-div">
</div>
<div id="content-div">
    <h1>AdPlugg Watch Demo</h1>
    <p>
        This fiddle shows you how to use AdPlugg.watch(). AdPlugg.watch() can be used to place and fill ads dynamically in a SPA (Single Page Application) or other JavaScript based WebPage.
    </p>
    <p>
      The fiddle loads the AdPlugg SDK and turns on AdPlugg.watch(). It then waits 2 seconds and drops an Ad Tag (empty div tag with certain parameters) into the header. AdPlugg.watch() should see the new Ad Tag and automatically fill it with an Ad.
    </p>
    <p>
        Get your own <a href="http://www.adplugg.com" title="ad server">ad
        server</a> at adplugg.com and try it out for yourself.
    </p>
</div>

CSS

html, body {
    margin: 2em;
    padding: 0;
    font-family: sans-serif;
    color: #333;
    line-height: 1.3;
}
#header-div {
  height: 100px;
}

JavaScript

(function() {
		// Set up the variables for our AdPlugg Account and Zone.
		var accessCode = 'A4827497';
    var zoneMachineName = 'jLs08wet';

		// Load the AdPlugg SDK.
    var fjs = document.getElementsByTagName('script')[0];
    var js = document.createElement('script');
    js.id = 'adplugg-adjs';
    js.src = '//www.adplugg.com/apusers/serve/' + accessCode + '/js/1.1/ad.js';
    //js.src = '//www.adplugg.com/serve/js/ad.js';
    fjs.parentNode.insertBefore(js, fjs);
    
    // Get a handle on the AdPlugg SDK.
    window.AdPlugg = AdPlugg=window.AdPlugg||[];
    var AdPlugg = window.AdPlugg;
    
    // Tell the AdPlugg SDK to watch for Ad Tags.
    // This uses `push` in case the AdPlugg SDK hasn't finished loading yet.
		AdPlugg.push({'command':'watch'});
    
    // Wait a couple of seconds and then add an Ad Tag (the tag should automatically be filled by AdPlugg.watch()).
    setTimeout(
   		  (function(accessCode, zoneMachineName) {
        	  var adTag = document.createElement('div');
        		adTag.setAttribute('class', 'adplugg-tag');
		        adTag.setAttribute('data-adplugg-access-code', accessCode);
    		    adTag.setAttribute('data-adplugg-zone', zoneMachineName);
            return function() {
	        			document.getElementById('header-div').appendChild(adTag);
            };
      	})(accessCode, zoneMachineName),
        2000 // Wait 2 seconds
    );
}());