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. Define a HTML placeholder with a unique ID and correct width & height -->
<div id="adup1" style="width:90%;height:200px;">
<!-- 2. Load our JavaScript API and replace the placeholder with
the placement in the callback as soon as the API is available -->
<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.
<!-- Your desired placement will appear on your website at the location
where you place this script -->
<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>Optional parameters
| Name | Description | Example |
|---|---|---|
| query | Keywords by which the ads should be filtered. Multiple keywords can be separated by a semicolon. | |
| responsive | Activates the Responsive-Ads feature for the placement.
| |
| mincpc | This is the minimum price you want to earn for a click. Generally, the lower the minimum price, the more campaigns you will be presented with and the more money you can earn due to greater competition for the position.
| |
| pageurl | The current URL of the page on which the advertisement is played. Should always be set if our ads are embedded within one or more nested iFrames, so AdUp may then no longer be able to determine the correct url.
| |
| skip | Number of ads to be skipped during delivery. This is useful if you have multiple placements on your page and want to avoid duplicate or repetitive ads.
| |
| lazy | Activates the "Lazy Loading" feature. This means that the ad will only be loaded (and thus the impression will only be tracked) as soon as it is visible for the user.
| |
| lazyoffset | By default, "lazy loaded" ads are only displayed when they gets visible for the user. The “lazyoffset” option allows you to define an additional offset (in pixels). This means that the ads load a little earlier, as soon as they come “close” to the visible area.
| |
| colormode | By default, the color mode used for placements is based on the user-defined color scheme of the operating system (Light/Dark) – not on the design mode of the respective website. If a website does not support native dark mode, a placement configured specifically for this mode may appear visually inappropriate on a light page. Here you have the option to force a color mode:
| |
| placeholdervalues | Values for dynamic ads placeholders can be transferred here. | |
| flyin | Activates the "Fly-In-Ads" feature for the ad unit. For more information and options, see the Fly-In Ads documentation. | |
| adtest | Impressions and clicks are not tracked when activated. Should only be used for test purposes!
| |
| gdpr | Usually, AdUp determines the required GDPR information automatically using the TCF API built into the website. If this is not available, or if it is not possible to use it for technical reasons, you have the option to manually provide the GDPR data.
| |
| gdpr_consent | Usually, AdUp determines the required GDPR information automatically using the TCF API built into the website. If this is not available, or if it is not possible to use it for technical reasons, you have the option to manually provide the IAB consent string (base64url-encoded).
|
Events / Callbacks
FAQ
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).