How do I install a responsive ad unit?_
In order to use AdUp ads on your website, you must have created a page and a corresponding ad unit in your publisher account.
In order for Responsive Ads to behave correctly, make sure that the "Type of integration" in the ad unit layout form is set to "Responsive Ads".
How it works
The ad media is loaded within an iFrame at the position on your website where you position our embed code or the placeholder HTML container. The number and design of the ads can be freely configured by you via the ad unit layout form in the publisher frontend.
In contrast to Static-Ads, however, it is important that the surrounding HTML container has the correct height and width specifications, as our ads will later be dynamically aligned accordingly. Responsive-Ads are therefore particularly suitable for websites that are optimised for different screen sizes.
If the size of the surrounding HTML container is not sufficient, so that the ads do not fit with your originally configured design, then our Responsive logic automatically tries to modify them to fit:
- Texts or elements are scaled smaller
- Individual elements are hidden (e.g. ad link, button or image)
- Ads are rearranged within the ad unit
Embedding types
There are two ways to integrate Responsive-Ads on your website.
In contrast to Static-Ads, it is important for Responsive-Ads that the surrounding HTML container always has the correct height and width specifications, as our ads are later aligned accordingly!
Asynchronous (Recommended)
Through the asynchronous integration, your website is loaded independently of the advertising call of our ads. First, you place the desired HTML containers at the locations on your website where advertisements are to appear. The containers must have a unique ID and correct height and width specifications. Then, our delivery API is loaded once and asynchronously using a dynamic <script> tag. Once the API has finished loading, a global callback function is executed which stores your actual embedding logic.
This type of integration is especially useful if you want to place multiple AdUp ads on your site. Through the programmatic definition of the ad units, you also have various events available here to which you can react accordingly (e.g. "onClick" or "onNoAds").
<!-- 1. Definieren des HTML-Container mit einer eindeutigen ID
und korrekter Höhe- & Breite -->
<div id="adup1" style="width:90%;height:200px;">
<!-- 2. Laden unserer Javascript-API und Ersetzen des HTML-Platzhalters durch
die gewünschten Werbemittel im Callback sobald die API verfügbar ist -->
<script type="text/javascript">
window.uAd_init = function() {
window.uAd.embed("adup1", {
param1: "value1",
param2: "value2"
...
});
};
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
With synchronous integration, a <div> tag with the desired width and height specifications is first placed at the position on your website where the ad is to appear. Within the <div> tag, a <script> tag with the corresponding URL parameters is placed. When your website loads, the script is then executed automatically (synchronously) and creates an iFrame with our ads at the appropriate position.
This is the easiest way to integrate AdUp ads. However, due to the definition of the ad unit per URL parameter, not all options are available to you here in contrast to the asynchronous integration.
<!-- Das gewünschte Werbemittel erscheint an der Stelle Ihrer Website,
an der Sie dieses Script positionieren -->
<div style="width:90%;height:200px;">
<script type="text/javascript"
src="https://s.d.adup-tech.com/ads/responsive.js?param1=value1¶m2=value2...">
</script>
</div>Required parameters
| Name | Description | Example |
|---|---|---|
| placementkey | The unique placement key of your ad unit. | |
| responsive | Activates/deactivates the Responsive-Ads feature for the ad unit. Note: For "Static-Ads" in the asyncrhonous integration, the parameter must always be set to "false"! |
Optional parameters
Events / Callbacks
Problem solving
The Responsive-Ad is too small, too large, not displayed, or overlaps other elements.
The HTML container does not have explicit size specifications, but these are required.
There are other elements inside the HTML container besides the script tag.
Fewer ads are displayed via Responsive-Ads than via Static-Ads or the number of ads does not match.
The "Type of integration" in the ad unit layout form was not set to "Responsive-Ads".
The "Number of ads" in the ad unit layout form has not been configured correctly.
The Responsive-Ads are not displayed correctly in mobile browsers (smartphones/tablets).
In order for our "Responsive-Ads" to be readable in mobile browsers, it is necessary that the meta tag "viewport" is set correctly on your website.
The layout of the ads (rows/columns) does not match the preconfigured layout.
The Responsive logic decides itself which layout fits best based on the current size of the HTML container and always tries to display the layout with the largest font size and the largest ad image (if available).
The displayed font size does not match the preconfigured font size.
The font size is automatically scaled down as soon as the ad with the configured font size does not fit into the given HTML container.
In order for our "Responsive-Ads" to be readable in mobile browsers, it is necessary that the meta tag "viewport" is set correctly on your website.
The ad images are too small or do not fill the available space
Depending on the layout selected, the ad images will always scale proportionally with the height or width of the ad, while always maintaining the aspect ratio.
However, ad images will never scale larger than the (maximum) image size preconfigured in the ad unit layout form.
Ad images, text or links will not be displayed
If the HTML container is so small that even scaling down the text is not enough to display the ad properly, our Responsive logic will try to hide individual elements (link, text, button or ad image) in the last step to save space.
In this case, the layout of your ad unit should be designed in a more space-saving way (e.g. smaller font sizes or spacing).