How do I implement a responsive ad unit?

To display AdUp promotional media on your website, you must first:

1. have created your website in your publisher account

2. have created an ad block

3. have selected the integration type “Responsive Ads” in the layout

Responsive ad blocks adapt automatically to different screen sizes and are therefore particularly suitable for modern, mobile-optimised websites.

How Responsive Ads work

AdUp promotional media are loaded within an iFrame at the desired position on your website. The size and arrangement of the ads are based on the HTML container that you define on your page.

Therefore, it is important that:

The surrounding HTML container always requires a valid width and height specification.

This is the only way our responsive logic can scale and optimise the ad correctly.

If the available space is smaller than the originally configured layout, AdUp automatically adapts the ad. For example, this may involve:

• reducing font sizes

• hiding individual elements

• arranging ads differently

• scaling down images or buttons

This ensures that the promotional media are still displayed neatly even on smaller devices.

Available integration types

Responsive ad blocks can be integrated in two ways:

• Asynchronous (recommended)

• Synchronous

Asynchronous integration offers the best performance and should be used preferentially.

Asynchronous integration (recommended)

With asynchronous integration, the website is displayed independently of the loading of the advertisement. This improves the loading time of your page.

The integration takes place in two steps:

1. Define the HTML container on the website

2. Load the AdUp JavaScript API asynchronously

This method is particularly suitable when:

• multiple ad blocks are used on one page

• events such as onClick or onNoAds are to be used

• maximum performance is desired

Step 1: Create the HTML container

First, place a container with a unique ID as well as a defined height and width:

<div id="adup1" style="width:100%;height:250px;"></div>

<div id="adup1" style="width:100%;height:250px;"></div>

<div id="adup1" style="width:100%;height:250px;"></div>

Alternatively, you can also define the sizes via CSS:

<style>
#adup1 {
    width: 100%;
    height: 250px;
}
</style>

<div id="adup1"></div>

<style>
#adup1 {
    width: 100%;
    height: 250px;
}
</style>

<div id="adup1"></div>

<style>
#adup1 {
    width: 100%;
    height: 250px;
}
</style>

<div id="adup1"></div>

Step 2: Load the AdUp API and integrate the ad block

<script>
window.uAd_init = function() {
    window.uAd.embed("adup1", {
        placementKey: "YOUR_PLACEMENT_KEY",
        responsive: true
    });
};

if (typeof window.uAd === "object") {
    window.uAd_init();
} else {
    (function(d, t) {
        var g = d.createElement(t),
            s = d.getElementsByTagName(t)[0];

        g.src = "https://s.d.adup-tech.com/jsapi";
        g.async = true;

        s.parentNode.insertBefore(g, s);
    }(document, "script"));
}
</script>

<script>
window.uAd_init = function() {
    window.uAd.embed("adup1", {
        placementKey: "YOUR_PLACEMENT_KEY",
        responsive: true
    });
};

if (typeof window.uAd === "object") {
    window.uAd_init();
} else {
    (function(d, t) {
        var g = d.createElement(t),
            s = d.getElementsByTagName(t)[0];

        g.src = "https://s.d.adup-tech.com/jsapi";
        g.async = true;

        s.parentNode.insertBefore(g, s);
    }(document, "script"));
}
</script>

<script>
window.uAd_init = function() {
    window.uAd.embed("adup1", {
        placementKey: "YOUR_PLACEMENT_KEY",
        responsive: true
    });
};

if (typeof window.uAd === "object") {
    window.uAd_init();
} else {
    (function(d, t) {
        var g = d.createElement(t),
            s = d.getElementsByTagName(t)[0];

        g.src = "https://s.d.adup-tech.com/jsapi";
        g.async = true;

        s.parentNode.insertBefore(g, s);
    }(document, "script"));
}
</script>

Important Parameters

Example with multiple ad blocks

<div id="adup1" style="width:100%;height:250px;"></div>
<div id="adup2" style="width:300px;height:600px;"></div>

<script>
window.uAd_init = function() {
    window.uAd.embed("adup1", {
        placementKey: "PLACEMENT_1",
        responsive: true
    });

    window.uAd.embed("adup2", {
        placementKey: "PLACEMENT_2",
        responsive: true
    });
};

if (typeof window.uAd === "object") {
    window.uAd_init();
} else {
    (function(d, t) {
        var g = d.createElement(t),
            s = d.getElementsByTagName(t)[0];

        g.src = "https://s.d.adup-tech.com/jsapi";
        g.async = true;

        s.parentNode.insertBefore(g, s);
    }(document, "script"));
}
</script>

<div id="adup1" style="width:100%;height:250px;"></div>
<div id="adup2" style="width:300px;height:600px;"></div>

<script>
window.uAd_init = function() {
    window.uAd.embed("adup1", {
        placementKey: "PLACEMENT_1",
        responsive: true
    });

    window.uAd.embed("adup2", {
        placementKey: "PLACEMENT_2",
        responsive: true
    });
};

if (typeof window.uAd === "object") {
    window.uAd_init();
} else {
    (function(d, t) {
        var g = d.createElement(t),
            s = d.getElementsByTagName(t)[0];

        g.src = "https://s.d.adup-tech.com/jsapi";
        g.async = true;

        s.parentNode.insertBefore(g, s);
    }(document, "script"));
}
</script>

<div id="adup1" style="width:100%;height:250px;"></div>
<div id="adup2" style="width:300px;height:600px;"></div>

<script>
window.uAd_init = function() {
    window.uAd.embed("adup1", {
        placementKey: "PLACEMENT_1",
        responsive: true
    });

    window.uAd.embed("adup2", {
        placementKey: "PLACEMENT_2",
        responsive: true
    });
};

if (typeof window.uAd === "object") {
    window.uAd_init();
} else {
    (function(d, t) {
        var g = d.createElement(t),
            s = d.getElementsByTagName(t)[0];

        g.src = "https://s.d.adup-tech.com/jsapi";
        g.async = true;

        s.parentNode.insertBefore(g, s);
    }(document, "script"));
}
</script>

Synchronous Integration

With synchronous integration, the ad block is loaded directly via an integrated script.

This method is simpler, but offers less flexibility and can affect the loading time of your website.

<script
    src="https://s.d.adup-tech.com/ads/display.js?p=YOUR_PLACEMENT_KEY&r=1"
    async>
</script>

<script
    src="https://s.d.adup-tech.com/ads/display.js?p=YOUR_PLACEMENT_KEY&r=1"
    async>
</script>

<script
    src="https://s.d.adup-tech.com/ads/display.js?p=YOUR_PLACEMENT_KEY&r=1"
    async>
</script>

Using Responsive Ads optimally

For the best display, we recommend:

• flexible widths (width:100%)

• sufficient height for the selected layout

• no nested containers with fixed minimum sizes

• mobile optimisation of the surrounding website

Responsive Ads are particularly well-suited for:

• mobile websites

• responsive layouts

• dynamic content areas

• article and magazine pages

Common Sources of Errors

Ads are not displayed

Check:

• whether the placementKey is correct

• whether the container has a height

• whether JavaScript is enabled on the page

Ad has incorrect size

Check:

• CSS rules of the container

• parent container with display:none

• dynamic size changes by frameworks

Multiple ads do not load correctly

Use asynchronous integration and assign unique container IDs.