What we want to build in this example, is an ad that expands when the user moves his mouse over the ad image.
The ad starts out with a small image:
Then when user moves his mouse over the ad, it expands and shows a much larger ad image:
Live example page here. http://dev1.cxpublic.com/examples/expandingad.html
The steps you need to do to set this up:
Create a Combo product that includes all the media used in the rich media ad
Create an AdSpace to serve the product
Create a Campaign and an Ad with the required media
Add rendering code to the publisher page
You can do the same with expanding Flash ads, or combinations of expanding an image into a flash object or expanding flash into image.
The product setup should look like the following (note the presence of the combo creative template, with two image creative specifications (the default and expanded images):
Diagnostic search should look something like this: (note diagnostic search simply returns the Creative content, without any layout markup, hence you will see the two creatives that will form the default and expanded Ad)
Now create a render template with content similar to this:
<!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>Expanding Ad Example</title>
<style type="text/css">
body { margin: 0; }
#smallImageBox { float: right; position: relative; width: 200px; height: 200px; padding: 0; margin: 0; }
#largeImageBox { position: absolute; right: 0; width: 700px; height: 200px; padding: 0; margin: 0; display: none; }
#largeImageBox a, #largeImageBox a:hover, #largeImageBox a:visited, #largeImageBox a:active { border: 1 solid black; color: Black; }
#largeImageBox img { border: 1px solid black; }
</style>
</head>
<body xmlns:tmp="javascript:">
<!-- Include the cx.js script -->
<script type="text/javascript" src="https://scdn.cxense.com/cx.js"></script>
<!-- Ad template -->
<div id="smallImageBox" onmouseover="sendParentResizeMessage(700, 200); if ('postMessage' in window) { document.getElementById('largeImageBox').style.display = 'block'; }">
<!-- This is the invisible template that is used to instanciate the ad -->
<div id="AdsTemplate" style="display: none;">
<!--%
var ads = data.searchResult.spaces[0].ads;
for (var i = 0; i < ads.length; i++) {
var ad = ads[i];
var smallImageSrc = '';
var largeImageSrc = '';
var images = ad.creative.images;
for (var k = 0; k < images.length; k++) {
if (images[k].key === 'Small') { smallImageSrc = images[k].source; }
if (images[k].key === 'Large') { largeImageSrc = images[k].source; }
}
%-->
<div id="largeImageBox" onmouseout="sendParentResizeMessage(200, 200); document.getElementById('largeImageBox').style.display = 'none';">
<a tmp:href="{{ad.clickUrl}}" target="_blank">
<img id="largeImage" width="700" height="200" tmp:src="{{largeImageSrc}}" alt=""/>
</a>
</div>
<img width="200" height="200" tmp:src="{{smallImageSrc}}" alt=""/>
<!--%
}
%-->
</div>
</div>
<!-- Insert AdSpace -->
<script type="text/javascript">
var cX = cX || {}; cX.callQueue = cX.callQueue || [];
cX.callQueue.push(['insertAdSpace', {
adSpaceId:'00000000004c961a',
templateElementId: 'AdsTemplate',
targetElementId: 'smallImageBox',
backend: 'sandbox'
} ]);
</script>
<!-- Define function which sends the "resize" message to the parent -->
<script>
function sendParentResizeMessage(width, height) {
if (parent && parent.postMessage) {
var hashArgs = cX.library.parseHashArgs();
var parentElementId = hashArgs.parentElementId;
var message = 'method=updateAdSpace'
+ '&contentWidth=' + width
+ '&contentHeight=' + height
+ '&elementId=' + encodeURIComponent(parentElementId);
window.parent.postMessage(message, '*');
}
}
</script>
</body>
</html>
Finally, put code similar to this one on the publisher page (remember to update the "renderTemplateUrl" to reflect the template you created above):
<!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>Expanding Ad Example</title>
</head>
<body style="min-width:720px; margin: 10px; padding: 0; ">
<!-- Expanding Ad Tag Begin -->
<style type="text/css">
#expandingAdTarget {
position: relative;
height: 200px;
width: 200px;
float: right;
}
#expandingAdTarget iframe {
position: absolute;
right: 0;
top: 0;
}
</style>
<!-- The ads are inserted into this div: -->
<div id="expandingAdTarget"></div>
<!-- Insert AdSpace -->
<script type="text/javascript">
var cX = cX || {}; cX.callQueue = cX.callQueue || [];
cX.callQueue.push(['insertAdSpace', {
width: 200, height: 200, // The initial "small" size
resizeToContentSize: true, // Allow full resizing control from template
appendToElementId: 'expandingAdTarget',
renderTemplateUrl: 'ExpandingRenderTemplate.html'
}]);
</script>
<!-- Load cx.js -->
<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>
<!-- Expanding Ad Tag End -->
<h1>Main content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. (...)</p>
</body>
</html>
cX.cXqcelvb(
{
"searchResult": {
"pageNumber": 0,
"contentBaseURL": "http://c803413.r13.cf2.rackcdn.com/",
"actionBaseURL": "http://adserver.sandbox.cxad.cxense.com/adserver/action",
"previous": "",
"next": "",
"spaces": [
{
"id": "00000000004c961a",
"adUnitWidth": 700,
"adUnitHeight": 200,
"isVerticallyOriented": false,
"ads": [
{
"id" :"00000000004c9680",
"creative": {
"type": "com.cxense.cxad.plugin.combocreative.ComboCreativeFeature",
"formatVersion": "1.1",
"id": "00000000004c9743",
"title": ["Sierra"],
"content": [
],
"images": [
{
"key": "Large",
"contentServerId": "ceeba97060a9e47d13f8fbeebfb2c7f9d5df2a5ae80c6395dd622e15a681ade0.jpg",
"source": "http://c803413.r13.cf2.rackcdn.com/ceeba97060a9e47d13f8fbeebfb2c7f9d5df2a5ae80c6395dd622e15a681ade0.jpg",
"href": "http://c803413.r13.cf2.rackcdn.com/ceeba97060a9e47d13f8fbeebfb2c7f9d5df2a5ae80c6395dd622e15a681ade0.jpg",
"filename": "Sierra_700x200.jpg",
"height": 200,
"width": 700
}, {
"key": "Small",
"contentServerId": "0b364ec9ebc2bee8225b7068aabbff73765de60b3c2a477a105b301b629eea52.jpg",
"source": "http://c803413.r13.cf2.rackcdn.com/0b364ec9ebc2bee8225b7068aabbff73765de60b3c2a477a105b301b629eea52.jpg",
"href": "http://c803413.r13.cf2.rackcdn.com/0b364ec9ebc2bee8225b7068aabbff73765de60b3c2a477a105b301b629eea52.jpg",
"filename": "Sierra_200x200.jpg",
"height": 200,
"width": 200
} ],
"flashFiles": [
],
"destinationUrl": "http://gmc.com"
},
"contextToken": "AAAAAABMlhoAAAAAAEyWgAAAAAAATJdDK43QeB32R4aY5s0kTq9DsAAAAAABAAABOjFNAisAAAAA",
"clickUrl": "http://adserver.sandbox.cxad.cxense.com/adserver/click/AAAAAABMlhoAAAAAAEyWgAAAAAAATJdDK43QeB32R4aY5s0kTq9DsAAAAAABAAABOjFNAisAAAAA"
}
]
}
]
}
}
);
Last updated: January 19, 2022
