adplugg:noContentAvailable Event Demo

This demo shows you how to watch for "adplugg:noContentAvailable" events. AdPlugg will dispatch this event if no ads are currently available for a given Ad Tag.

by AdPlugg

HTML

<script async src="//www.adplugg.com/serve/js/ad.js"></script>
<div id="header-div">
    <div class="adplugg-tag" id="my-adplugg-ad-tag-id" data-adplugg-zone="k57a6u3b"></div>
</div>
<div id="content-div">
    <h1>'adplugg:noContentAvailable' Event Demo</h1>
    <p>
        This fiddle shows you how to listen for the 'adplugg:noContentAvailable' event. This is useful for if you may or may not have ads available in your AdPlugg account and want to perform an action if no ads are available.</p>
    <p>
      The fiddle registers an event listener and then loads the AdPlugg SDK. The AdPlugg SDK attempts to fill the Ad Tag. When no ads are found for the ad tag, the SDK will dispatch the 'adplugg:noContentAvailable' event to the Ad Tag's div element. The listener will hear the event and then display a popup message.
    </p>
    <p>
       In a real world scenario the event listener could just exit quietly, call another ad system, etc.
    </p>
    <p>
        Get your own hosted <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

// Get a handle on the AdPlugg SDK.
window.AdPlugg = window.AdPlugg||[];

// Initialize the AdPlugg SDK with our AdPlugg Access Code.
AdPlugg.push({'command':'init', 'accessCode': 'A4827497'});
    
// Get a handle on our ad tag.
var adTag = document.getElementById('my-adplugg-ad-tag-id');
    
// Declare what we want to happen when the event is heard.
var action = function() {
		// DO SOMETHING HERE.
    // For now we'll just output a message.
    var msgTag = document.createElement('h3');
	  msgTag.innerHTML = 'This message is being displayed because no ad was found.';
    document.getElementById('header-div').appendChild(msgTag);
};
    
// Register the 'adplugg:noContentAvailable' event listener on the Ad Tag
// and set the action to be performed.
AdPlugg.push(['on', adTag, 'adplugg:noContentAvailable', action]);

// Tell the AdPlugg SDK to fill all ad tags by calling the 'run' command.
AdPlugg.push({'command':'run'});