This script has to be somewhere on the page, but is only required once. This part makes sure cx.js is loaded, and the same code is used for both cxad and analytics:
The div in line 1 can have any name, the same name must be use in line 6. All divs on a page must have unique names.
The adSpaceId in line 5 must match the ad space id in cxad, in many cases this will be the only change you need to do for different ad spaces.
The renderTemplateUrl in line 9 can override all rendering variables, and is typically used to set layout parameters: Font sizes, colors, positioning, which image to show from a combo ad and so on.
Showing multiple adspaces in a single tag.
If you want to show combo ads and display ads with the same tag, this can be done by extending the normal javascript tag a bit. It works by first requesting ads from the primary ad space, and then if no results show up, request ads from the secondary ad space instead:
Show ads from adspace 0000000000ef7570 if any are available, and from 0000000000ef7408 if not.
<div id="ppnAd_300x250" style="display:none"></div>
<script type="text/javascript">
var cX = cX || {}; cX.callQueue = cX.callQueue || [];
function ppnAd300x250onImpressionResult(event) {
if (event.matchedAdCount < 1) {
cX.callQueue.push(['insertAdSpace', {
adSpaceId: '0000000000ef7408',
insertBeforeElementId: 'ppnAd_300x250',
width: 300, height: 250,
ps: 1, // One ad
renderTemplateUrl: 'http://cdn.cxpublic.com/Swiss_Combo_300x250.html'
} ]);
}
}
cX.callQueue.push(['insertAdSpace', {
adSpaceId: '0000000000ef7570',
insertBeforeElementId: 'ppnAd_300x250',
width: 300, height: 250,
ps: 1, // One ad
renderTemplateUrl: 'http://cdn.cxpublic.com/Swiss_Banner_300x250.html',
onImpressionResult: ppnAd300x250onImpressionResult
} ]);
</script>
The new code is on line 23, which specifies what to do after receiving the results from the first ad request, and lines 5..15, which requests ads from a second ad space if the first ad request had zero hits.
Backfill with ads from a different ad system.
This example is somewhat similar to the previous, but instead of backfilling from Cxense Advertising, we can also backfill from any other system.
The use case is:
First, check if we have any ads in Cxense Advertising
If there were no matching ads, backfill with ads from another system.
The steps required to do this:
Get the ad tag for the external system
Add an "onImpressionResult" handler to the Cxense Advertising ad tag
Write out the ad tag for the external system in the onImpressionResult handler.
Sample code:
<div id="adsTargetEl" style="display:none"></div>
<script type="text/javascript">
var cX = cX || {}; cX.callQueue = cX.callQueue || [];
// This function will be called when Cxense Advertising responds with it's result
function myOnImpressionResult(event) {
if (event.matchedAdCount < 1) {
// There was no matching ads.
// Todo: Insert code to output the ad tag of the external system here.
}
}
// First try to find ads in Cxense Advertising:
cX.callQueue.push(['insertAdSpace', {
adSpaceId: 'XXXXXXXXXXXXX',
insertBeforeElementId: 'adsTargetEl',
width: 300, height: 250,
ps: 1, // One ad
onImpressionResult: myOnImpressionResult
} ]);
</script>
(replace the adSpaceId, adUnits, width and height values in the above script with the values for your setup).
Backfill with ads from different ad system, where external ads render with synchronous tag
When the external tag renders synchronously (e.g. uses document.write()), we cannot just insert that tag into the page. The reason is that the page document stream is typically closed at this point, and a new call to "document.write" will reopen the stream and replace all content (i.e. replace the entire page with just this ad). So we need to create a new open document stream, and we can do that with an iframe:
<div id="adsTargetEl" style="display:none"></div>
<script type="text/javascript">
var cX = cX || {}; cX.callQueue = cX.callQueue || [];
// This function will be called when Cxense Advertising responds with it's result
function myOnImpressionResult(event) {
if (event.matchedAdCount < 1) {
// Create an iframe to host the 3rd party ad
var iframeElement = document.createElement('iframe');
iframeElement.frameBorder = 0;
iframeElement.width = 300;
iframeElement.height = 250;
// Add the iframe to the page
var targetElement = document.getElementById('adsTargetEl');
targetElement.parentNode.insertBefore(iframeElement, targetElement);
// Write the 3rd party ad tag into the iframe
var contentDoc = iframeElement.contentDocument || iframeElement.contentWindow.document;
contentDoc.open();
contentDoc.write('<!DOCTYPE HTML>\n'); // Write a proper DOCTYPE, so that we avoid Quirksmode in IE
contentDoc.write('<html>\n');
contentDoc.write('<head>\n<title></title>\n');
contentDoc.write('<style type="text/css">html, body, div { margin:0; padding: 0; }</style>\n');
contentDoc.write('</head>\n<body style="overflow:hidden;">\n');
contentDoc.write(thirdPartyAdTag); // <-- TODO: Write tag here
contentDoc.write('\n</body>\n</html>\n');
// contentDoc.close();
// Cannot close the stream b/c of old IE bug where closing a streamed document that itself does document.write(..) hangs the browser
// This also means that the onload event might not fire in the child iframe, so the third party ad tag must not depend on onload
}
}
// First try to find ads in Cxense Advertising:
cX.callQueue.push(['insertAdSpace', {
adSpaceId: 'XXXXXXXXXXX',
insertBeforeElementId: 'adsTargetEl',
width: 300, height: 250,
ps: 1, // One ad
onImpressionResult: myOnImpressionResult
} ]);
</script>
