Example 4a - Rendering without an IFrame - Inline template
There are many benefits to using an IFrame, and we recommend that you do that by default.
If for some reason you cannot use IFrames, there you can use rendering templates without IFrames too. Just copy the contents of the template into the parent page and combine the two "insertAdSpace" calls like this:
Output of the below code showing a 100% wide image combo ad:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>No-iframe test page</title>
<style type="text/css">
html, body, div, p { font-family: Arial; }
</style>
</head>
<body>
<div>
<h1>Some normal content here</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
<!-- 100% wide ad begin -->
<!-- Define styles for the ad -->
<style type="text/css" media="screen">
.ad-container { background: #f1f1f1; padding: 5px; }
.ad-image-container { }
.ad-image-container img { width: 100%; border: none; padding-right: 5px; }
.ad-content-container { height: 85px; }
.ad-title { color: #2B388F; font-size: 1.1em; font-family: 'helvetica neue', helvetica, arial, sans-serif; text-decoration: underline; }
.ad-content { font-family: 'helvetica neue', helvetica, arial, sans-serif; font-size: 0.75em; color: #333; line-height: 18px; }
.ad-type { font-family: helvetica; color: #AAA; font-weight: normal; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; float: right; display: block; }
</style>
<!-- Include the cx.js script -->
<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>
<!-- The ads are inserted into this div: -->
<div id="adArea">
<!-- This is the invisible template that is used to instanciate the ad -->
<div id="adsTemplate" style="display: none;">
<!--%
if (data && data.searchResult && data.searchResult.spaces && data.searchResult.spaces[0] && data.searchResult.spaces[0].ads) {
var ads = data.searchResult.spaces[0].ads;
for (var i = 0; i < ads.length; i++) {
var ad = ads[i];
if (ad.creative && ad.creative.content && ad.creative.content.length && ad.creative.images && ad.creative.images.length) {
var imageSrc = '';
var titleText = '';
var contentText = '';
var displayUrlText = '';
var content = ad.creative.content;
for (var j = 0; j < content.length; j++) {
var contentItem = content[j];
if (contentItem.key === 'Title')
titleText = cX.library.getAllText(contentItem.value);
if (contentItem.key === 'Body')
contentText = cX.library.getAllText(contentItem.value);
}
var images = ad.creative.images;
var imgSrc = '';
for (var k = 0; k < images.length; k++) {
var image = images[k];
if (image.key === 'Icon') { imgSrc = image.source; }
}
%-->
<div class="ad-container">
<span class="ad-type">Advertisement</span>
<a tmp:href="{{ad.clickUrl}}" class="ad-image-container" target="_top">
<img tmp:src="{{imgSrc}}" width="100%" alt="" />
</a>
<div tmp:id="{{ad.id}}" style="ad-content-container">
<b>
<a tmp:href="{{ad.clickUrl}}" class="ad-title" target="_top">{{titleText}}</a>
</b><br>
<div class="ad-content">{{contentText}}</div>
</div>
</div>
<!--%
}
}
}
%-->
</div>
</div>
<!-- Insert AdSpace -->
<script type="text/javascript">
var cX = cX || {}; cX.callQueue = cX.callQueue || [];
cX.callQueue.push(['insertAdSpace', {
// TODO: Insert the correct production AdSpaceId here:
adSpaceId: '00000000005a88a5',
templateElementId: 'adsTemplate',
targetElementId: 'adArea'
// TODO: Remove these two lines before use on production
,k: 'Zoo2',
baseAdDeliveryUrl: 'http://adserver.sandbox.cxad.cxense.com/adserver/search'
} ]);
</script>
<!-- 100% wide ad end -->
<div>
<h1>Some more normal content here</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
</body>
</html>
