Insert multiple ad spaces with one ad server request

Motivation

The main reason why you would want to insert multiple ad spaces with one ad server request is to get full de-duplication of advertisers for all of the ad spaces.

Setup

To insert two (or more) ad spaces with the same ad server request, you must:

Gather all the existing tags on the page
Combine the tags into one tag

Limitations

You can combine any number of normal ad space tags and any number of ad space tags using render templates, but you currently cannot combine a mix of ad space tags where some use render templates and some do not.

Suggested solution to combine render template with non-render template adspaces

Use the Example 8a - Using the default renderer to use custom render code and dispatch all other ads to the default render functionality.

You currently cannot use insertMultipleAdSpaces with templates hosted in other locations than on *.cxpublic.com domains.
You currently cannot use insertMultipleAdSpaces with just a render function. Either normal HTML responses or render templates must be used to render the ads.

Example

Here is an example of how this is done.

On a page, there are two ad space tags:

Tag 1:

<div id="insertAdSpaceBeforeThis_000000015ec0213d" style="display:none"></div>
<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>
<script type="text/javascript">
    var cX = cX || {}; cX.callQueue = cX.callQueue || [];
    cX.callQueue.push(['insertAdSpace', {
        adSpaceId:'000000015ec0213d'
    }]);
</script>

Tag 2:

<div id="insertAdSpaceBeforeThis_000000015ec259a8" style="display:none"></div>
<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>
<script type="text/javascript">
    var cX = cX || {}; cX.callQueue = cX.callQueue || [];
    cX.callQueue.push(['insertAdSpace', {
        adSpaceId:'000000015ec259a8'
    }]);
</script>

Each of the tags consist of three elements:

A target element
The code that inserts the ads at the target element
The loading of the cx.js script

To combine the two tags:

Put the first target element into the page where you want the first ad space to be rendered

<div id="insertAdSpaceBeforeThis_000000015ec0213d" style="display:none"></div>

Put the second target element into the page where you want the seconds ad space to be rendered

<div id="insertAdSpaceBeforeThis_000000015ec259a8" style="display:none"></div>

Copy the parameter blocks of the two tags into a new tag using the "insertMultipleAdSpaces" function, and insert this common tag after the two target tags in the HTML:

<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>
<script type="text/javascript">
    var cX = cX || {}; cX.callQueue = cX.callQueue || [];
    cX.callQueue.push(['insertMultipleAdSpaces', [
        {
            adSpaceId:'000000015ec0213d'
        },
        {
            adSpaceId:'000000015ec259a8'
        }
    ]
    ]);
</script>

It is important that this last code block is placed after all of the target elements in the HTML page. This is because all of the targets must exist when the script tries to look them up and insert ads at those positions.

Optional common arguments object

As the multiple ad spaces are now all served by just one ad server request, most of the single ad server options can't be set to different values for the different ad spaces. E.g. we can't set 'backend: sandbox' on one adspace and 'backend: production' on the other, because there is only one ad server request, and it can only go one place.

The per-request options must therefore be set in an optional common arguments object that is added as an extra paramter to the call:

<script type="text/javascript">
    var cX = cX || {}; cX.callQueue = cX.callQueue || [];
    cX.callQueue.push(['insertMultipleAdSpaces', [
        {
            adSpaceId:'000000015ec0213d'
        },
        {
            adSpaceId:'000000015ec259a8'
        }
    ],
    { // Optional common arguments
        backend: 'sandbox',
        ps: 2
    }
    ]);
</script>

The rule is that options that are set for each ad space must go into the settings object for the ad space in question. Options that are only possible to be set once per ad server request must go into the optional arguments object.

Note: There is no logic that distributes options set in the optional arguments object out to the individual ad space settings objects, thus even if two ad spaces use the same setting, it still must be set on the individual ad space settings objects and not on the common options object:

<script type="text/javascript">
    var cX = cX || {}; cX.callQueue = cX.callQueue || [];
    cX.callQueue.push(['insertMultipleAdSpaces', [
        {
            adSpaceId:'000000015ec0213d',
            renderTemplateUrl: 'common.html'
        },
        {
            adSpaceId:'000000015ec259a8',
            renderTemplateUrl: 'common.html'
        }
    ],
    { // Optional common options object
       // 'renderTemplateUrl:' can not be set here!
    }
    ]);
</script>

Last updated: January 19, 2022