Home

Support

Examples of installing static ad units

Home

Support

Examples of installing static ad units

Campaign

Examples of installing static ad units

Discover practical examples for integrating static ad blocks – from simple integration to advanced asynchronous implementation with multiple ad spaces.

Overview

In this article, you will find various examples of how to integrate Static ad units.

If you have not yet set up the basics, we recommend reading the article "How do you integrate a Static ad unit?" first.

Asynchronous integration (recommended)

Asynchronous integration is the recommended method because it improves the performance of your website and supports additional features such as events and callbacks.

Example: Two ad units on one page

Step 1: Create HTML containers

Place a unique container for each ad unit in the desired positions on your website.

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

Step 2: Load JavaScript API

Load the AdUp JavaScript API once and then initialise the desired ad units.

<script>window.uAd_init = function () {    window.uAd.embed("adup1", {        placementkey: "b438218268aff398aa44332004a8d78a",        responsive: false,        query: "Italien"    });    window.uAd.embed("adup2", {        placementkey: "c826aad8837fe2bd34f4aadde2cb222f",        responsive: false,        mincpc: 1.15,        lazy: 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: "b438218268aff398aa44332004a8d78a",        responsive: false,        query: "Italien"    });    window.uAd.embed("adup2", {        placementkey: "c826aad8837fe2bd34f4aadde2cb222f",        responsive: false,        mincpc: 1.15,        lazy: 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: "b438218268aff398aa44332004a8d78a",        responsive: false,        query: "Italien"    });    window.uAd.embed("adup2", {        placementkey: "c826aad8837fe2bd34f4aadde2cb222f",        responsive: false,        mincpc: 1.15,        lazy: 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>

Advanced asynchronous integration

This example is particularly suitable for more complex websites.

The initialisation is outsourced to a global function. As a result, the API is only loaded once and can then be used as often as desired.

This makes sense if:

  • ads are reloaded dynamically

  • multiple components contain ads

  • single-page applications are used

  • ad blocks only appear after user interaction

Step 1: Integrate helper function

Place the following code in the <head> of your website.

<script>function adup(callback) {    if (window.uAd) {        callback();    } else if (window.uAd_init) {        const oldCallback = window.uAd_init;        window.uAd_init = function () {            oldCallback();            callback();        };    } else {        window.uAd_init = callback;        (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>function adup(callback) {    if (window.uAd) {        callback();    } else if (window.uAd_init) {        const oldCallback = window.uAd_init;        window.uAd_init = function () {            oldCallback();            callback();        };    } else {        window.uAd_init = callback;        (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>function adup(callback) {    if (window.uAd) {        callback();    } else if (window.uAd_init) {        const oldCallback = window.uAd_init;        window.uAd_init = function () {            oldCallback();            callback();        };    } else {        window.uAd_init = callback;        (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>

Step 32: Initialise ad unit

You can then load each ad unit independently of the others.

<div id="adup1"></div><script>adup(function () {    window.uAd.embed("adup1", {        placementkey: "b438218268aff398aa44332004a8d78a",        responsive: false,        query: "Italien"    });});<
<div id="adup1"></div><script>adup(function () {    window.uAd.embed("adup1", {        placementkey: "b438218268aff398aa44332004a8d78a",        responsive: false,        query: "Italien"    });});<
<div id="adup1"></div><script>adup(function () {    window.uAd.embed("adup1", {        placementkey: "b438218268aff398aa44332004a8d78a",        responsive: false,        query: "Italien"    });});<

Further ad units can be integrated in the same way.

Synchronous integration

For simple websites, you can also integrate Static Ads synchronously.

The script is executed directly at the desired position.

<scriptsrc="https://s.d.adup-tech.com/ads/display.js?placementkey=ee3f328127873b8fc0174d84b235087b&query=Fl%C3%BCge;USA"></script>

Example with additional parameters

Optional parameters such as lazy or skip can also be passed directly via the URL.

<scriptsrc="https://s.d.adup-tech.com/ads/display.js?placementkey=058c43c27f6f563e09ddde3c26b54042&query=Fl%C3%BCge;USA&lazy=1&skip=5"></script>

Which integration type is suitable and when?

Asynchronous

Synchronous

Recommended for most websites

Suitable for simple integrations

Loads ads after page load

Loads ads directly during page load

Supports events and callbacks

No event support

Ideal for multiple ad units

Ideal for individual ad units

Better performance

Simplest implementation

Best Practices

Load API only once

Even if multiple ad units are integrated, the AdUp JavaScript API should only be loaded once.

Prefer asynchronous integration

Asynchronous integration improves your website's performance and offers additional features for complex integrations.

Use unique containers

Each ad unit requires a unique container ID.

Example:

  • adup1

  • adup2

  • sidebar-ad

  • footer-ad

Use Lazy Loading

Enable lazy loading for ads that are outside the immediately visible area.

This optimises loading time and impression tracking.

Common sources of error

API integrated multiple times

The JavaScript API should only be loaded once per page.

Duplicate container IDs

Use a unique ID for each ad unit.

Invalid placement key

An incorrect or missing placementkey prevents ads from being delivered.

Ad unit initialised before API

Ensure that window.uAd.embed() is only executed after the API has fully loaded.

You might also be interested in this

5 min read

How do you integrate a static ad unit?

Integrate Static Ads quickly and reliably on your website. Learn which integration method is suitable, which parameters are available, and how to configure ads optimally.

Publisher