The goal of these documentations is to give you an idea on how the ad integration works and what you as a developer need to keep in mind.
Basically there are only three important steps to implement a basic ad integration:
Our AdLib is the heart of the ad delivery. There are many features and processes, that are done by the adlib and of course, you need to include the script on your page to get a working ad delivery. During the onboarding process we provide you a tailor-made version for your page that takes many different settings and special requirements of the site into account.
<html>
<head>
<title>Your great website</title>
+ <script type="text/javascript" src="cdn/pages/website.js"></script>
</head>
<body>
<div class="your-content">...</div>
<div class="your-content">...</div>
</body>
</html>Important: It is very important, that you do not load the adlib asynchronically! Otherwise this will lead to cumulative layout shifts and delay the headerbidding a lot, which will cost your page real money in unrealised profits.
Think of this part like a shopping cart - in the AdSSetup object, you define various settings. For example, you have to 'order' the type of Ads, you want to see on your page, like Mrecs, Billboards and Superbanners. But there are also some features, you can control via the AdSSetup object, like the appearance of the placeholders.
<html>
<head>
<title>Your great website</title>
+ <script type="text/javascript">
+ adSSetup = {
+ view: "d",
+ partners: true,
+ adPlacements: ["superbanner", "sky", "billboard", "mrec", "mrec_btf", "mrec_btf_2", "mrec_btf_3", "inpage"],
+ adSlotSizes: { ... },
+ gaiaSetup: { ... },
+ placeholder: { ... },
+ colorBg: true,
+ bgClick: true,
+ hasVideoPlayer: true,
+ isArticle: true,
+ pageName: "demo_story",
+ target: "value1;value2;value3;key1=value1,value2;key2=value1,value2;",
+ iabTax: "IAB2,IAB2-1,1,32"
+ }
+ </script>
<script type="text/javascript" src="cdn/pages/website.js"></script>
</head>
<body>
<div class="your-content">...</div>
<div class="your-content">...</div>
</body>
</html>Make sure, that the adSSetup Object is ready, when the adlib is loaded, so that we can use your configuration to make the call to the ad server.
You as publisher need to provide us a container for each ad, that you ordered via the adSSetup object. The delivered ads will be rendered in these Ad Slots, so it is very important that there is a container for each ad on the page. The Ad Slots will need the ad type as id and have to be completely unstyled. If you need styling around the ad, you can set a wrapper around the Ad Slot and style this wrapper instead.
<html>
<head>
<title>Your great website</title>
<script type="text/javascript">
adSSetup = {
view: "d",
partners: true,
adPlacements: ["superbanner", "sky", "billboard", "mrec", "mrec_btf", "mrec_btf_2", "mrec_btf_3", "inpage"],
adSlotSizes: { ... },
+ gaiaSetup: { ... },
placeholder: { ... },
colorBg: true,
bgClick: true,
hasVideoPlayer: true,
isArticle: true,
pageName: "demo_story",
target: "value1;value2;value3;key1=value1,value2;key2=value1,value2;",
iabTax: "IAB2,IAB2-1,1,32"
}
</script>
<script type="text/javascript" src="cdn/pages/website.js"></script>
</head>
<body>
<div class="your-content">...</div>
+ <div id="billboardWrapper">
+ <div id="billboard"></div>
+ </div>
<div class="your-content">...</div>
</body>
</html>And just like that, you already have a basic working ad integration on your page. If you would like to test the ad delivery, here you can set a cookie to receive some test ads via a test segment.
If you no longer want to receive the test ads, you can always remove the cookie via the 'Remove Testads' button on the same page.
Since the AdSSetup is a very important part of the ad integration on your page, it should be clear, what informations are included and what they mean.
| Attribute | Explanation | Sample Value | Required |
|---|---|---|---|
| view | Decides if the current page is on mobile (m) or desktop (d) viewport |
|
yes |
| partners | Enable programmatic demand |
|
yes |
| adPlacements |
List every ad that you order from the ad server. You can find a visual illustration for the adPlacements here. Important: Please make sure, that you provide an adSlot for each placement, that you define here. |
mobile [
"banner",
"mrec",
"mrec_btf",
"mrec_btf_2",
"mrec_btf_3",
"inpage"
]desktop [
"superbanner",
"sky",
"billboard",
"mrec",
"mrec_btf",
"mrec_btf_2",
"mrec_btf_3",
"inpage"
] |
yes |
| adSlotSizes | Specify the formats you like to have for each ad that you ordered in the
Read more about sizes here. |
adSlotSizes: {
"billboard": [{
"minWidth": 799,
"sizes": [[800, 250]]
}, {
"minWidth": 969,
"sizes": [[970, 250], [800, 250]]
}],
"mrec": [{
"minWidth": 1,
"sizes": [[300, 250], [300, 600]]
}],
"mrec_btf": [{
"minWidth": 1,
"sizes": [[300, 250], [300, 600]]
}]
} |
yes |
| gaiaSetup |
Overwrites adlib gaia defaults. Every property defined here will overwride the matching property defaulted by the adlib. (optional) |
gaiaSetup: {
"startCount": 10,
"fitSizeToSlot": true,
"sizes": {
"m": [[300, 50], [320, 50], [300, 75], [320, 75], [300, 80], [320, 80], [300, 150], [320, 150]],
"d": [[970, 250], [800, 250], [300, 250]]
},
"matchTagsBefore": [
"</h2>"
],
"matchTagsAfter": [
"</div>",
"</p>"
],
"ads": [
"teaser",
"regteaser",
"liveticker-ad"
],
"resetBy": [
"sas_.*",
"ANZEIGE"
],
"except": [
"<h3>Lesen Sie auch</h3>",
"video",
"<img",
"embed",
"iframe"
],
"article": [
"main[role='main']",
".hs-liveticker"
],
"textWrapper": [
"article",
".module-liveticker"
],
"wrapperCSS": "margin: 0 0 20px 0;",
"markerCSS": ".gaiaWrapper:after {
content: 'Anzeige'; font-size: .75rem; display: block; text-align: center;
text-transform: uppercase; color: #999; line-height: 2rem;
}",
"wrapperCSSmew": "margin: 0 0 15px 0;",
"markerCSSmew": ".gaiaWrapper:before {
display: block; content: 'Anzeige'; letter-spacing: normal;
font-family: ffmark,Helvetica Neue,Helvetica,Arial,sans-serif;
font-style: normal; font-weight: 200; font-size: 12px;
line-height: 16px; display: block; color: #787878; text-align: right;
}"
} |
yes |
| placeholders |
Our answer on Google's CLS. Learn more about that topic and the setup possibilities for the placeholder object here. |
placeholder: {
disablePlaceholders: false,
default: {
"border-color": "#EEEDE8",
"border": "5px dotted blue", // optional, replaces border-color
"background-color": "#F9F9F7",
"after": "{content: 'ADVERTISMENT'}", // optional, replace "ANZEIGE" by your own CSS
"before": "{...}}", // optional
"admarkPosition": "bottom right",
"color": "#BCBCBC",
"font-size": "12px",
"font-family": "Tahoma",
"clickUrl": "https://adtechnology.axelspringer.com" // optional
},
mrec: {
"background-color": "#FCBFFF"
}
} |
yes |
| colorBg | Allow or deny a change of the background color of your page by the ads |
|
yes |
| bgClick | Allow or deny the clickability of the background of the page controled by the ads |
|
yes |
| hasVideoPlayer | enable or disable partnerscripts like headerbiding for video |
|
yes |
| isArticle | it shows us if the page is an article |
|
yes |
| pagename | channel / article name from CMS - there has to be an existing pendant as 'Placement Group' in the ad server. |
|
yes |
| target | a list of key/values which are used for targeting |
|
yes |
| iabTax | explanation | sample | no |