Example 8b - Custom rendering for one ad type and default rendering for all other ad types
Sometimes you want the default rendering of all ad types, except for one particular type that you want to do a custom rendering of.
This example renders all kinds of ads using the default ad renderer, and a custom rendering for an image ad:
Ad tag to be placed on the publisher page:
<!-- 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: 'TemplateExample8b.html',
width: 728, height: 90
}]);
</script>
<!-- Ad tag end end -->
Template code "TemplateExample8b.html":
<!DOCTYPE html>
<html>
<head>
<title>One custom rendering and the rest default</title>
<style type="text/css">
html, body { margin: 0; padding: 0; }
.template { display: none; }
</style>
</head>
<body>
<!-- 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 adSpace = data.searchResult.spaces[0];
for (var i = 0; i < adSpace.ads.length; i++) {
var ad = adSpace.ads[i];
if (ad.creative.type.indexOf('ImageCreativeFeature') > -1) {
// For image ads, we want this rendering:
%-->
<a class="url" tmp:href="{{ad.clickUrl}}" target="_blank">
<img tmp:src="{{ad.creative.source}}" border="0" width="728" height="90" alt=""/>
</a>
<!--%
} else {
// Use the default renderer for all other ad types
cX.defaultAdRenderer(adSpace, ad);
}
}
%-->
</div>
</div>
<!-- Insert AdSpace -->
<script type="text/javascript">
var cX = cX || {}; cX.callQueue = cX.callQueue || [];
cX.callQueue.push(['insertAdSpace', {
templateElementId: 'adsTemplate',
targetElementId: 'adSpace',
forwardHashArgs: true
}]);
</script>
</body>
</html>
