Making Your Widget Ad Compliant
Introduction
If you are going to run your own ads in your widget and distribute it with Widgetbox you must make your widget ad compliant. We have agreements with different sites and users around advertising and we require widgets with ads to follow the same rules. Making your widget ad compliant is simple and will help us keep the Widgetbox experience more consistent.
JavaScript/HTML Widget
If you are making or made a hosted JavaScript/HTML widget, you only need to wrap your ad content between two new Widgetbox code snippets in the editor. The two new snippets are located in the “Insert Widget Setting” dropdown menu.
You place the ad content between the “start ad code” and “end ad code” snippets. The resulting code will look like this:
${wbx.startAdSnippet}
//Your Ad Here
${wbx.endAdSnippet}
If you are embedding Flash in your hosted JavaScript/HTML widget you need to be sure to set the “wmode” parameter to either “opaque” or “transparent”. For example:
<param name="wmode" value="transparent" />
Here is a sample JavaScript/HTML widget…
With Ads:
Without Ads:
This is the same widget running in two different environments, one with ads enabled and the other with ads disabled.
Flash Widget
If you are making or made a Flash widget, the widget needs to check for the widget_isAdFriendly flash variable (FlashVar) parameter and only show ads when widget_isAdFriendly is set to “true”.
Here is some sample code…
ActionScript 2:
var showAds = _root.widget_isAdFriendly;
if (showAds == "true")
{
//load and show an ad
}
else
{
//don't load and show an ad
}
ActionScript 3:
*be sure to import LoaderInfo (import flash.display.LoaderInfo;)
try
{
var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
var widgetAdFriendly = String(paramObj["widget_isAdFriendly"]);
if (widgetAdFriendly == "true")
{
//load and show an ad
}
else
{
//don't load and show an ad
}
}
catch (err:Error)
{
//Something went wrong getting LoaderInfo
trace (err);
}
Here is a sample Flash widget…
With Ads:
Without Ads:
This is the same widget running in two different environments, one with ads enabled and the other with ads disabled.
Remote Widget
If are you making or made a remote widget, the widget needs to check for widget.isAdFriendly on the query string and make sure widget.isAdFriendly is set to “true”. This will be different depending on what server-side scripting language you are using. You can also use JavaScript to parse the URL parameters if the widget is HTML.
Here is some sample code for a Remote HTML Widget using JavaScript
*if you copy this example, be sure to place the javascript after the ad div and before the closing body tag
<html>
<body>
<div id="myWidgetAds" style="display:none;">
<!-- AD GOES BETWEEN THIS -->
This is my ad
<!-- AND THIS -->
</div>
<script type="text/javascript">
function getQueryVar(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return null;
}
function controlAds(adElementId) {
if (getQueryVar("widget.isAdFriendly") != "true") {
var adElement = document.getElementById(adElementId);
adElement.style.display = "none";
} else {
var adElement = document.getElementById(adElementId);
adElement.style.display = "";
}
}
controlAds("myWidgetAds");
</script>
</body>
</html>
Here is a sample remote widget…
With Ads:
Without Ads:
This is the same widget running in two different environments, one with ads enabled and the other with ads disabled.
Preview & Testing
As you create and edit your widget you can test your ad compliance there is a toggle underneath the configuration setting in the widget studio editor.
