Example 4b - Rendering without an IFrame - AJAX-loaded template
Motivation and background
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:
The benefit of the AJAX approach, is that the template can be loaded from the server, independently of the main page.
Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- Using jQuery here, but any AJAX library or custom code can be used to load the template -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<!-- The (invisible) template populated from AJAX data -->
<div id="template" style="display:none">
</div>
<!-- The ads are rendered into this div -->
<div id="target">
</div>
<!-- Ad tag begin -->
<script type="text/javascript">
var gotTemplate = false;
var gotAdData = false;
var adData = undefined;
var adContext = undefined;
var cX = cX || {}; cX.callQueue = cX.callQueue || [];
cX.callQueue.push(['insertAdSpace', {
adSpaceId: '000000005edab0da',
backend: 'sandbox',
sz: '955x150',
width: 955,
height: 150,
renderFunction: function(data, context) {
adData = data;
adContext = context;
gotAdData = true;
checkRender();
}
}]);
$.ajax({url: "template.html", success: function(result){
$("#template").html(result);
gotTemplate = true;
checkRender();
}});
function checkRender() {
if (gotAdData && gotTemplate) {
cX.renderTemplate('template', 'target', adData, adContext);
}
}
// Async load of cx.js
(function(d,s,e,t){e=d.createElement(s);e.type='text/java'+s;e.async='async';
e.src='http'+('https:'===location.protocol?'s://s':'://')+'cdn.cxense.com/cx.js';
t=d.getElementsByTagName(s)[0];t.parentNode.insertBefore(e,t);})(document,'script');
</script>
<!-- Ad tag end end -->
</body>
</html>
