Example 2a - Simple image ad with collapsing (unit resizing)
This example renders a single banner image ad. But in contrast to the previous example, it collapses the ad space if there are no hits.
This is very often the wanted behavior. If the ad space did not collapse, the publisher would be left with a blank space where the ad was supposed to go.
Output with matching ad:
Output with no matching ad without collapsing (what we don't want):
Output with no matching ad and collapsing ad space (what we want):
<!-- Ad tag begin -->
<div id="insertAdSpaceBeforeThis_000000000077eca4" style="display:none"></div>
<script type="text/javascript">
(function() { try { var scriptEl = document.createElement('script'); scriptEl.type = 'text/javascript'; scriptEl.async = 'async';
scriptEl.src = ('https:' == document.location.protocol) ? 'https://scdn.cxense.com/cx.js' : 'http://cdn.cxense.com/cx.js';
var targetEl = document.getElementsByTagName('script')[0]; targetEl.parentNode.insertBefore(scriptEl, targetEl); } catch (e) {}; }());
</script>
<script type="text/javascript">
var cX = cX || {}; cX.callQueue = cX.callQueue || [];
cX.callQueue.push(['insertAdSpace', {
adSpaceId:'000000000077eca4',
renderTemplateUrl: 'TemplateExample2.html'
}]);
</script>
<!-- Ad tag end end -->
Template code "TemplateExample2.html":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image ad template example</title>
<style type="text/css">
html, body { margin: 0; padding: 0; }
.template { display: none; }
</style>
</head>
<body xmlns:tmp="javascript:">
<!-- Include the cx.js script -->
<script type="text/javascript" src="http://cdn.cxense.com/cx.js"></script>
<!-- The ads are inserted into this div: -->
<div id="adSpace">
<!-- This is the invisible template that is used to instanciate the ad -->
<div id="adsTemplate" class="template">
<!--%
var ads = data.searchResult.spaces[0].ads;
for (var i = 0; i < ads.length; i++) {
var ad = ads[i];
%-->
<a class="url" tmp:href="{{ad.clickUrl}}" target="_blank">
<img tmp:src="{{ad.creative.source}}" border="0" width="728" height="90" alt=""/>
<</a>
<!--%
}
%-->
</div>
</div>
<!-- Callback to parent window to resize this IFRAME now that the ad count is known: -->
<script type="text/javascript">
function sendParentResizeMessage(event, data, context) {
if (context && context.parentElementId) {
var message = 'method=updateAdSpace'
+ '&matchedAdCount=' + data.searchResult.spaces[0].ads.length
+ '&isVerticallyOriented=' + data.searchResult.spaces[0].isVerticallyOriented
+ '&elementId=' + encodeURIComponent(context.parentElementId);
// It's safe to use '*' as targetOrigin here, because the message content is not secret.
cX.postMessageToParent(message, '*');
}
}
</script>
<!-- Insert AdSpace -->
<script type="text/javascript">
var cX = cX || {}; cX.callQueue = cX.callQueue || [];
cX.callQueue.push(['insertAdSpace', {
templateElementId: 'adsTemplate',
targetElementId: 'adSpace',
forwardHashArgs: true,
onImpressionResult: sendParentResizeMessage
}]);
</script>
</body>
</html>
