We’ve migrated our documentation to a new site, which means some URLs have changed.
Audience
Audience
Breadcrumbs

Example 3 - Simple combo ad (image + text)

Output with four matching ads:

image2012-8-30 18_30_12.png

Ad tag to be placed on the publisher page:

<!-- Ad tag begin -->
<div id="adsTarget" style="display:none"></div>
<script type="text/javascript">
    var cX = cX || {}; cX.callQueue = cX.callQueue || [];
    cX.callQueue.push(['insertAdSpace', {
        adSpaceId:'<Todo: replace with your adSpace id here>',
        insertBeforeElementId: 'adsTarget',
        resizeToContentSize: true,
        renderTemplateUrl: 'Simple_Combo_644x290.html'
    } ]);
</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>
<!-- Ad tag end end -->

 Template code "Simple_Combo_644x290.html":

<!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>Simple Combo Ads 644x290 for four ads with 2 columns x 2 rows layout</title>
<style type="text/css">
    html, body { margin:0; padding: 0; background-color: White; }
    .adSpace   { width: 644px; height: 290px; overflow: hidden; }
    .adUnit    { width: 320px; height: 145px; overflow: hidden; margin: 1px; float: left; }
    .textBox   { width: 215px; height: 140px; margin: 0px 0px 0px 4px; float: left;}
    .adImage   { width: 90px;  height: 90px; border: none; float: left; margin: 0px 0px 0px 0px; }
    .title     { color: #08315F; font: bold   14px Arial, Helvetica, sans-serif; padding-bottom: 5px; }
    .content   { color: #000000; font: normal 12px Arial, Helvetica, sans-serif; padding-bottom: 3px; }
    .url       { color: #6992BD; font: bold 10px Georgia,arial,helvetica,clean,sans-serif;; }
    .template  { display: none; }
    a, a:hover, a:visited, a:active { text-decoration: none; }
</style>
</head>
<body xmlns:tmp="javascript:">
    <!-- 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="adSpace" class="adSpace">
        <!-- This is the invisible template that is used to instanciate the ad -->
        <div id="adsTemplate" class="template">
        <!--%
        hook();
        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 trackingImageSrc = null;
                    // Iterate over all content lines and read out the ad text.
                    // Note that the field names are the ones you gave in the combo creative, so they need to match what you set there:
                    var content = ad.creative.content;
                    for (var j = 0; j < content.length; j++) {
                        var contentItem = content[j];
                        if (contentItem.key.toLowerCase() === 'title')
                            titleText = cX.library.getAllText(contentItem.value);
                        if (contentItem.key.toLowerCase() === 'content')
                            contentText = cX.library.getAllText(contentItem.value);
                        if (contentItem.key.toLowerCase() === 'display url')
                            displayUrlText = cX.library.getAllText(contentItem.value);
                        if (contentItem.key.toLowerCase() === 'tracking image url')
                            trackingImageSrc = cX.library.getAllText(contentItem.value);
                    }
                    // Iterate over all images and select the one we want to show.
                    // Here too the field name is custom, so you need to match this field name against what you set in the combo creative.
                    var images = ad.creative.images;
                    var imageSrc = '';
                    for (var k = 0; k < images.length; k++) {
                        var image = images[k];
                        if (image.key.toLowerCase() === 'square image') { imageSrc = image.source; }
                    }
                    var clickUrl = ad.clickUrl;
                    %-->
                    <div class="adUnit">
                        <a tmp:href="{{clickUrl}}" target="_blank"><img class="adImage" tmp:src="{{imageSrc}}" width="90" height="90" alt=""/></a>
                        <div class="textBox">
                            <div class="title"><a class="title" tmp:href="{{clickUrl}}" target="_blank">{{titleText}}</a></div>
                            <div class="content"><a class="content" tmp:href="{{clickUrl}}" target="_blank">{{contentText}}</a></div>
                            <div class="url"><a class="url" tmp:href="{{clickUrl}}" target="_blank">{{displayUrlText}}</a></div>
                        </div>
                    </div>
                <!--%
                }
            }
        }
        %-->
        </div>
    </div>
    <!-- Insert AdSpace -->
    <script type="text/javascript">
        function hook() {
            return;
        }
        var cX = cX || {}; cX.callQueue = cX.callQueue || [];
        cX.callQueue.push(['insertAdSpace', {
            templateElementId: 'adsTemplate',
            targetElementId: 'adSpace',
            forwardHashArgs: true
        } ]);
    </script>
</body>
</html>

 JSON wire data:

{
    "searchResult": {
        "pageNumber": 0,
        "contentBaseURL": "http://c803411.r11.cf2.rackcdn.com/",
        "actionBaseURL": "http://adserver.cxad.cxense.com/adserver/action",
        "previous": "",
        "next": "",
        "spaces": [
                         
            {
                "id": "0000000000f88496",
                "adUnitWidth": 468,
                "adUnitHeight": 60,
                "isVerticallyOriented": true,
                "ads": [
                    {
                        "id" :"00000000c809f898",
                        "creative": {
                            "type": "com.cxense.cxad.plugin.combocreative.ComboCreativeFeature",
                            "formatVersion": "1.1",
                            "id": "00000000c809f8d7",
                            "title": ["Genesis_coche_Seguros_V1_pmedio 0,5_no access"],
                            "content": [
                                                         
                                { "key": "Content", "value": ["Premiamos a los buenos conductores. ¡Ahora hasta un 40% de ahorro! Calcúlalo en solo 2min"]}
                                ,                           
                                { "key": "Display url", "value": ["www.genesis.es"]}
                                ,                           
                                { "key": "Title", "value": ["Calcula tu seguro en 2min"]}
                                                             
                            ],
                            "images": [
                                                                                                                            {
                                        "key": "Rectangle image",
                                        "contentServerId": "7bba4d3a920f84b6ca1be4159ba337f11c59ab21e5080edb762133e39e9fc3bd.jpg",
                                        "source": "http://c803411.r11.cf2.rackcdn.com/7bba4d3a920f84b6ca1be4159ba337f11c59ab21e5080edb762133e39e9fc3bd.jpg",
                                        "href": "http://c803411.r11.cf2.rackcdn.com/7bba4d3a920f84b6ca1be4159ba337f11c59ab21e5080edb762133e39e9fc3bd.jpg",
                                        "filename": "Genesis_Cinturón_120x90.jpg",
                                        "height": 90,
                                        "width": 120
                                    },                                                                                                                                {
                                        "key": "Square image",
                                        "contentServerId": "06000c17255fadcdaa2fb8bb5f15d121e53892e4d9b31fa35318d0e099881b33.jpg",
                                        "source": "http://c803411.r11.cf2.rackcdn.com/06000c17255fadcdaa2fb8bb5f15d121e53892e4d9b31fa35318d0e099881b33.jpg",
                                        "href": "http://c803411.r11.cf2.rackcdn.com/06000c17255fadcdaa2fb8bb5f15d121e53892e4d9b31fa35318d0e099881b33.jpg",
                                        "filename": "Genesis_Cinturón_90x90.jpg",
                                        "height": 90,
                                        "width": 90
                                    },                                                                                                                                {
                                        "key": "Wide image",
                                        "contentServerId": "a9d0d6fbfb8d6f9b8140da2fefeef27072c70873ee5ce3ccdb512e4279de6d6c.jpg",
                                        "source": "http://c803411.r11.cf2.rackcdn.com/a9d0d6fbfb8d6f9b8140da2fefeef27072c70873ee5ce3ccdb512e4279de6d6c.jpg",
                                        "href": "http://c803411.r11.cf2.rackcdn.com/a9d0d6fbfb8d6f9b8140da2fefeef27072c70873ee5ce3ccdb512e4279de6d6c.jpg",
                                        "filename": "Genesis_Cinturón_160x90.jpg",
                                        "height": 90,
                                        "width": 160
                                    }                                                                                        ],
                            "flashFiles": [
                            "destinationUrl": "http://bs.serving-sys.com/BurstingPipe/adServer.bs?cn=tf&c=20&mc=click&pli=4811010&PluID=0&ord=[timestamp]"
                        "contextToken": "AAAAAAD4hJYAAAAAyAn4mAAAAADICfjXXl*Z8jJvQMGIbQxHLCTogg4wHzAuMTUwMDAwH0VVUgAAAAEAAAE5eFKYEQAAAAA(",
                        "clickUrl": "http://adserver.cxad.cxense.com/adserver/click/AAAAAAD4hJYAAAAAyAn4mAAAAADICfjXXl*Z8jJvQMGIbQxHLCTogg4wHzAuMTUwMDAwH0VVUgAAAAEAAAE5eFKYEQAAAAA("
                    }                   
                ]
            }           
        ]
    }
}


Last updated: