Code Creative Shells (Advanced DCO Ads)

To receive information from Adform:

You can create a dynamic ads spreadsheet and assign it to the banner. You can then edit banner elements by editing that spreadsheet. The spreadsheet could look like this:

For more information, see Build Version Spreadsheets for Dynamic Ads.

To build dynamic ad, form AdMessage and get an item from it:

Adform.AdMessage.build({
    domain: dhtml.getVar('domain', 'https://track.adform.net/banners/')
}).getItems([dhtml.getVar('gid', 0)], function (error, items) {
        if (!error && items && items[0]) {
            console.log(items[0]);
            // renderBanner(items[0]);
        } else {
            let item = {
                'travelDestination': 'Thailand',
                'image': 'https://images.com/thailand.jpg'
            }
            // renderBanner(item);
        };
    });

Or simply use getDefault:

Adform.AdMessage.build({
    domain: dhtml.getVar('domain', 'https://track.adform.net/banners/')
    }).getDefault(function (error, item) {
        if (!error && item) {
            console.log(item);

            /* will return something like:
            $id: 0
            $link: ""
            $name: "default"
            $pdata: ""
            travelDestination: "Thailand"
            image: "https://s1.adform.net/banners/images/1234/1234/1234.jpg"
            */

            // renderBanner(items[0]);
        } else {
            let item = {
                'travelDestination': 'Thailand',
                'image': 'https://images.com/thailand.jpg'
            };
            // renderBanner(item);
        };
    });

For product targeting banners, instead of getPage, use getItems and get item by gid (group id). Or get the default item with getDefault. For more information, see Build Product Targeting Banners.

You also don't need dcoEngineId as there are no product targeting rules. All the values can be default ones, so in Adform.Admessage.build you just need to define the domain if you want the banner to work on a local machine (if you are working in Studio, you can just pass an empty object).

In else statement, hardcode some values:

let item = {
    'travelDestination': 'Thailand',
    'image': 'https://images.com/thailand.jpg'
}
// renderBanner(item);

This allows the building of a banner on a local machine. It's also used when a banner is not uploaded to the system (or doesn't have a spreadsheet assigned). If the banner is running locally, getDefault or getItems will return an error as the banner doesn't have any "defaults" assigned to it. By defining the fallback values, you can still see what the banner looks like. It also allows for agreeing on variable names.

The same method also works for product targeting banners, if, for example, you haven't synchronized the advertiser's data with Adform yet (but you have to start working on the banner itself).

Adform.AdMessage.build({
    }).getDefault(function (error, item) {
        if (!error && item) {
            console.log(item);

            /* will return something like:

            $id: 0
            $link: ""
            $name: "default"
            $pdata: ""
            travelDestination: "Travel to Beautiful Thailand!",
            travelDestination_300x250: "Travel to<br>Beautiful Thailand!",
            travelDestination_300x50: "Thailand!",

            */

            renderBanner(item);
        } else {
            let item = {
                travelDestination: "Travel to Beautiful Thailand!",
                travelDestination_300x250: "Travel to<br>Beautiful Thailand!",
                travelDestination_300x50: "Thailand!",
            }
            renderBanner(item);
        };
    });

function renderBanner(item) {
    document.body.innerHTML = `${item[`travelDestination_${innerWidth}x${innerHeight}`] || item.travelDestination}`;
}