Integrating "MetaTag"
Introduction
The AdTag Management System simplifies the integration of ad server JavaScript Tags by means of a central library. Instead of integrating multiple AdTags into the HTML documents of your site individually, it assumes the function of the deployment and control of the AdTags based on predefined parameters.
By way of an example, the present documentation will guide the reader through a complete integration process for the system. You can use code examples from this documentation in a test site at any time.
Glossary
This documentation will use some recurring technical terms.
AdSlot/Slot
This term describes a location on an HTML site which can be filled with advertising media. The ad slot will have a name assigned to it depending on its position on the website. This name (which is often an abbreviation consisting of a few letters only) is the same for all ad slots throughout the website which are placed in the same way. Example: An ad slot is placed centrally preceding the content and even preceding the navigation structure. The ad slot will receive the abbreviated designation of “banner” (short for “Superbanner”). Independently of whether it will be placed on the homepage of the website or in articles, this slot will always be named “banner”.
AdServer
A web server whose function is the administration and delivery of advertising campaigns. The ad server waits for a user request, often based on additional information such as the website visited, user interests and so forth, and responds by delivering a suitable advertising campaign for that user.
AdTag
Refers to a request of the ad server, usually via JavaScript. After communication with the ad server, the AdTag delivers the content for the ad slot in which the AdTag was placed. MetaTag will automatically generate all the AdTags for the different ad slots on the basis of different kinds of information, without any additional assistance from the website.
Advertising format
An advertising format is composed of one or two media (Image- Flash, Video) of a particular size. The sizes are, as a rule, standardized, which means that a medium of a certain size is always designated to be a certain advertising format. Example: An image of a pixel size of 728x90 is designated as a “Leaderboard”. A combined format consisting of the sizes 728x90 and 160x600 pixels placed next to each other is known as a “Hockeystick” or a “Wallpaper”. A list of all bookable formats can be found in our Ad Format Specifications
HeaderBidding
When using a so called "HeaderBidder", all ad slots of a page will be analyzed by an auction in realtime, before the slots are fully loaded. Advertisers have the possibility to decide how much money the display of an ad on the site is worth to them and place a bid accordingly. This leads to a better, targeted utilization of all possible ad slots and improves the loading speed of the site and all displayed ads.
Single Request Architecture (SRA)
Instead of sending a separate request for each ad slot to the ad server, SRA will use a single, bundled request for all ad slots at once. This will improve the load speed of the website and decrease the workload on the device and browser of the user caused by ads. SRA is incompatible with a few advertising formats, therefore usage of SRA should be discussed up front with us, so we can depict any negative impact clearly.
Integration of metaTag.min.js
Please implement the provided JavaScript file (ending in metaTag.min.js) in the <HEAD> tag of your website. The file either can be served by the domain of your website or be loaded directly from our CDN.
The library is created for each website individually and will only work correctly on this specific site.
Request from our CDN (Content Delivery Network)
You will receive the path to the file from a Partner Manager responsible for your account (and, as a rule, with the same E-Mail as this documentation).
<!-- Integrating metaTag.min.js into the <head> of your website -->
<!DOCTYPE html>
<html>
<head>
<script async src="https://cdn.stroeerdigitalgroup.de/metatag/live/beispielseite/metaTag.min.js" type="text/javascript" fetchpriority="high"></script>
</head>
<body>
...
</body>
</html>
Cache time of file: 900 sec Size: ~ 25 kB Employed CDN: Cloudfront Server locations used: closest to user, see map Compression: gzip, brotli
For integrations via javascript it could look like this:
(function() {
var channel = !!document.location.href.match(/sdgmt=preview/i) ? 'preview' : 'live';
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.setAttribute('fetchpriority', 'high');
script.src = 'https://cdn.stroeerdigitalgroup.de/metatag/' + channel + '/beispielseite/metaTag.min.js';
document.head.appendChild(script);
})();
You can view the human-readable version of our code by enabling “source maps” in your preferred browsers “Development tools”. Please see your browsers documentation on how to enable this. The library will receive new features and updates regularly. Please see our Release Log for in-depth information about those changes.
Hosting on your domain
For performance and data-privacy reasons, it might be beneficial to host all MetaTag2 files on your own domain. Examples on how to update MetaTag2 files regularly and host on your CDN, can be found in our documentation: Metatag2 hosting on a publisher webserver
Integration of Ads.txt file
In order to participate safely in an automatic (programmatic) auctioning network environment, it is possible to lodge an additional file in the domain of the website. This file contains a list of all approved and certified parties, that are eligible for the sale of advertisements on your website. During the auction process, advertisers can scan the file and check if they are negotiating with an authorized party. This assures that the relation between seller, buyer, and the website is established. In addition, unauthorized parties will be strictly excluded.
We offer a prepared file ready to use via the following URL https://cdn.stroeerdigitalmedia.de/Ads/adstxt/ads.txt
Please download this file and place it in the root domain of your website, for example mydomain.com/ads.txt
Make sure this file stays updated. We recommend a synchronization every 24 hours (e.g. via Cronjob). This guarantees that changes will be applied as soon as possible for your website. A missing or faulty file, will result in revenue loss.
Feel free to add further entries to this file, e.g. if you like to include any of your own marketing partners. Please make sure that on automatic retrieval of our version of ads.txt, your changes are applied regularly to your version of the file. You can check your version of the file for errors or problems, with several freely available, online validators.
For example:
Further Information about Ads.txt can be found on the website of the Interactive Advertising Bureau, initiator of the Ads.txt initiative.
Configuration of your website
In order to be able to allocate the correct AdTags to your website, our library requires further information. This information varies depending on which HTML page the advertisements are being called from. For instance, the library needs different information for the start page of your website than for an article in the category “Fashion”.
There are several JavaScript methods available, which you can call and fill with information, to allow our TagManager to render the correct AdTags to your website. See “Publisher Api” further below for a list of available methods.
In order to fill the functions with content, we will provide a file detailing the marketing structure of your website in table form. You should have received this with the same e-mail as your documentation, or you may request this table from your Ströer Partner Manager.
SDG.cmd
cmd: Array<Function => void>
Reference to MetaTag command queue for asynchronous execution of interface methods.
Will be initialized as an empty JavaScript array, exposing cmd.push with standard Array.push method.
Wrap all your commands send to MetaTag inside a function, pushing it into cmd.
<script>
window.SDG = window.SDG || {};
window.SDG.cmd = window.SDG.cmd || [];
window.SDG.cmd.push(function() {
SDG.Publisher.setZone('homepage');
SDG.Publisher.setPageType('rubrik');
});
</script>
SDG.Publisher
A reference to the PublisherApi, containing all interface methods to interact with metaTags.
Returns <PublisherApi>
| Functions | Description |
|---|---|
| setZone | Sets the zone for all ad slots of the HTML page to the same indicated value. |
| addKeywords | Transfers multiple words to the ad server for which specific advertising media can be booked. |
| addKeyword | Transfers a word in the form of a string, for which specific advertising media can be booked, to the ad server. |
| removeKeywords | Removes multiple previously added “keywords”. |
| removeKeyword | Removes a single previously added “keyword”. |
| addKeyValue | Transfers a key and a single value assigned to it to the ad server. |
| addKeyValues | Transfers a key and multiple values assigned to it. |
| removeKeyValue | Removes a key and all of the assigned values. |
| removeKeyValues | Removes multiple keys and all their assigned values. |
| registerSlot | Creates a new ad slot on the HTML page. |
| finalizeSlots | Should be executed as soon as all relevant ad slots of a page have been registered. |
| unregisterSlot | Removes a specific ad slot from the page. |
| unregisterAllSlots | Removes all ad slots from the page. |
| loadSlot | Requests new advertising media from the ad server for a particular ad slot and displays them on the page. |
| loadMultipleSlots | Request new ad media from the ad server for a given amount of ad slots and displays them on the page. |
| loadAllSlots | Requests new ad media for all existing ad slots on the page from the ad server and displays them on the page. |
| generateVastUrls | Requests VAST-Adtags from the video ad server. |
| generateVastUrlsPromise | Request VAST-AdTags and return them as a Promise. |
| setAdServerConsent | Will notify the tag manager if you, as the Publisher of your website, object to using personalized advertisments on your site. This can be used if the content of the page (texts, url) will allow to draw privacy sensitive conclussion from the users (ex: illnesses, religious or sexual orientation). |
| transitionAdvertisements | Allows “Interstitial” ads to be loaded when the user is navigating the website. |
SDG.Publisher.setZone( zone )
setZone(zone: string): boolean
Sets the AdTag Zone for the HTML page. A zone allows ad systems to differentiate the current section of your website, making it possible to target ad campaigns to one or more specific zones/sections.
For a detailed view, which zones can be used on your website, please consult the “marketing structure” file.
zone: string | The zone for the matching website category from the marketing structure provided in table form. |
boolean | true if successful, otherwise false. |
- Example
SDG.Publisher.setZone('homepage');
SDG.Publisher.addKeywords( keywords )
addKeywords(keywords: Array<string>): boolean
Transfers multiple keywords to the ad server. These can be used to describe the content of a website. Be it keywords for optimizing the search engine, or specific information contained in your site (such as the ingredients for a recipe displayed on the site).
Please bear in mind that keywords may not contain any special characters, blanks or vowel mutations and must be completely written in lower-case letters. Vowel mutations have to be changed into ae, ue and oe and blanks and special characters into underscores.
keywords: string[] | An array in which keywords are arranged one after the other in the form of a string, separated by commas. It can consist of 15 words maximum. |
boolean | true if successful, otherwise false. |
- Example
SDG.Publisher.addKeywords(['auto','auto_news','naesse','reifen']);
SDG.Publisher.addKeyword( keyword )
addKeyword(keyword: string): boolean
Transfers a single keyword to the ad server.
Please bear in mind that keywords may not contain any special characters, blanks or vowel mutations and must be completely written in lower-case letters. Vowel mutations have to be changed into ae, ue and oe and blanks and special characters into underscores.
keyword: string | The keyword to be transferred. |
boolean | true if successful, otherwise false. |
- Example
SDG.Publisher.addKeyword('autobahn');
SDG.Publisher.removeKeywords( keywords )
removeKeywords(keyword: Array<string>): boolean
Removes multiple previously added keywords. Useful in Single-page-applications, where the content (and its descriptive keywords) change on user navigation.
keywords: string[] | Array in which the keywords are arranged one after the other in the form of a string, separated by commas. It can consist of 15 words maximum. |
boolean | true if successful, otherwise false. |
- Example
SDG.Publisher.removeKeywords(['auto','auto_news','naesse','reifen'])
SDG.Publisher.removeKeyword( keyword )
removeKeyword(keyword: string): boolean
Removes a single previously added keyword.
keyword: string | The keyword to be deleted. |
boolean | true if successful, otherwise false. |
- Example
SDG.Publisher.removeKeyword('autobahn')
SDG.Publisher.addKeyValue( key, value )
addKeyValue(key: string, value: string): boolean
Transfers a pair of parameters consisting of a key and a value to the ad server. You can use so-called “key values” to transfer further information to the ad server.
These can be data referring to the website or to the user, such as the interests of the user or the location of a request for a weather forecast.
Please consult your Partner Manager before using this function. The data to be used should be coordinated before the implementation, and should be in conformity with current data protection laws.
Please note that keys and values may not contain any special characters, blanks or vowel mutations and must be completely written in lower-case letters. Vowel mutations have to be changed into ae, ue and oe and blanks and special characters into underscores.
key: string | The key to be transferred. |
value: string | The value to be `transferred` for the keyword. |
boolean | true if successful, otherwise false. |
- Example
SDG.Publisher.addKeyValue('stadt','hamburg')
SDG.Publisher.addKeyValues( keyValues )
addKeyValues(keyValues: Object<string, string[]>): boolean
Transfers a pair of parameters to the ad server which consists of a key and multiple words surrounded by a JavaScript Literal-Object. The values are arranged in a sequence in an array and separated by commas. A maximum of 15 values can be transferred at a time. You can use so-called “key values” to transfer further information to the ad server. These can be data referring to the website or to the user, such as the interests of the user or the location of a request for a weather forecast.
Please consult your Ströer representative before using this function. The data to be used should be coordinated before the implementation and should be in conformity with data protection laws of your country and the country of your users.
Note that the keys and values may not contain any special characters, blanks or vowel mutations and must be completely written in lower-case letters. Vowel mutations have to be changed into ae, ue and oe and blanks and special characters into underscores before the transfer.
keyValues: Object<string, string[]> | An object of keys consisting of arrays, each containing multiple values as string. |
boolean | true if successful, otherwise false. |
- Example
SDG.Publisher.addKeyValues({
'interessen': ['finanzen', 'autosport', 'mode', 'kosmetika']
});
SDG.Publisher.removeKeyValue( key )
removeKeyValue(key: string): boolean
Removes a previously added key and all its assigned values.
key: string | The key to be removed. |
boolean | true if successful, otherwise false. |
- Example
SDG.Publisher.removeKeyValue('age')
SDG.Publisher.removeKeyValues( keys )
removeKeyValues(keys: Array<string>): boolean
Removes multiple previously added keys and all of their assigned values.
keys: string[] | A chain of key names as Array. |
boolean | true if successful, otherwise false. |
- Example
SDG.Publisher.removeKeyValues(['age', 'interests', 'segments'])
SDG.Publisher.registerSlot( slotname, container )
registerSlot(slotname: string, container: string | HTMLElement): PublisherSlotApi | null
Creates a new ad slot in the container indicated.
The container can be any HTML element capable of accepting multiple further child elements. For the best results, <div> elements are recommended as containers.
When executing the method registerSlot, the container does not have to be rendered fully by the browser.
In the section Integration of the different advertising formats, we have provided a summary of the best practice for creating the different containers dependent on the advertising format.
We recommend to register the slots as early as possible, ideally in the <head> of the site. In this case, the container of the ad slot might not been fully loaded/rendered by the browser. Instead of passing the container as DOM-Node, you can also pass the "ID" of the future container as string. Please make implicitly sure that the "ID" passed is correct and will be used at some point in the page. Otherwise errors might occur in the page.
An ad slot can only be registered once per HTML page. Example: If the ad slot with the Name “mrec” has already been registered, the same name cannot be registered a second time. Should you need multiple advertising media of the same advertising format on you site, we can provide you with additional ad slots (such as "rectangle2", “rectangle3”, and so on).
Please consult the marketing structure available to you for your website. There you will find all available ad slot names for the categories existing in your website. Not all slot names are available in each category.
This method only serves to register the slot with the system. To enable the slot to start requesting an advertising medium from the ad server afterward, please use the slot methods or the Publisher methods loadSlot() and loadAllSlots().
slotname: string | The name for the desired slot. |
container: string | HTMLElement | The container for the slot either as string of its "ID" attribute, or as a DOM Node (such as using document.getElementById(), document.querySelector(), etc.) |
PublisherSlotApi | null | If successful, this method will return an interface object, allowing further interaction with the created AdSlot via ``PublisherSlotAPI``. In case of an error, the return value will be null. |
- Example
SDG.Publisher.registerSlot('banner', 'myBannerContainerId');
SDG.Publisher.registerSlot('sky', document.getElementById('mySkyContainerId'));
SDG.Publisher.registerSlot('rectangle', document.querySelector('.myCssClass'));
SDG.Publisher.finalizeSlots()
finalizeSlots(): boolean
Will signal the system that the most important ad slots for page have been registered and marked for loading.
Using this command allows you to optimize the ad delivery performance on your site, especially if many AdSlots are employed. By registering your most important AdSlots (usually those in the initial view of the user), and finalizing them, will start ad delivery immediately. MetaTag will not wait for later AdSlots, forcing your most important slots to show ads as soon as possible.
You can register additional slots, even after executing finalizeSlots(). Additional slots will execute their ad delivery as soon as they receive a load command.
- Example
//Slots "banner", "sky", "rectangle" should load as fast as possible. "rectangle2" to "rectangle4" will not be waited for.
SDG.Publisher.registerSlot('banner', 'myBannerContainer').load()
SDG.Publisher.registerSlot('sky', 'mySkyContainer').load()
SDG.Publisher.registerSlot('rectangle', 'myRectangleContainer').load()
SDG.Publisher.finalizeSlots();
SDG.Publisher.registerSlot('rectangle2', 'myRectangleContainer2').load()
SDG.Publisher.registerSlot('rectangle3', 'myRectangleContainer3').load()
SDG.Publisher.registerSlot('rectangle4', 'myRectangleContainer4').load()
SDG.Publisher.unregisterSlot( slotName)
unregisterSlot(slotName: string): boolean
Deletes a specific ad slot from the page. This will free up the ad slot, making it available for re-registering if needed.
slotname: string | The name for the slot to be deleted. |
boolean | true if successful, otherwise false |
- Example
SDG.Publisher.unregisterSlot('sky');
SDG.Publisher.loadSlot( slotName )
loadSlot(slotName: string): boolean
Initiates a request to the ad server for a single, previously registered ad slot. This method serves to load an ad slot at a later point in time after registration, for example if the user has interacted with the site and a single slot should display new ads. When using this method, the ad slot will be loaded independently of all other slots on the page. It might miss additional features like competitor exclusions or lack functionality to display ads spanning over multiple slots.
slotname: string | The name for the slot to be loaded anew. |
boolean | true if successful, otherwise false |
- Example
SDG.Publisher.loadSlot('sky');
SDG.Publisher.loadMultipleSlots( slotNames )
loadMultipleSlots(slotNames: string[]): boolean
Initiates request to the ad server for all stated and registered ad slots. You can use this method to load ad slots at a later point in time after registration. For example, if the user has interacted with the site and multiple slot should display new ads.
All slots loaded via this method will act together. They can use additional features like competitor exclusions or use functionality to display ads spanning over multiple slots.
The order of the slotNames inside the array has a direct influence on the load sequence of the slots.
Please make sure to consider our "Guidelines for integrating ad slots" and the recommended load sequence within.
slotnames: string[] | The names of the slots to load anew. |
boolean | true if successful, otherwise false |
- Example
SDG.Publisher.loadMultipleSlots(['banner', 'sky', 'rectangle']);
SDG.Publisher.loadAllSlots( redoLoadedSlots )
loadAllSlots(redoLoadedSlots: boolean): boolean
Initiates a request to the ad server for all hitherto registered ad slots. This method serves to load all ad slots at a later point in time after registration, for example in SinglePage Web-applications, as soon as the user is provided with new content.
This method will automatically load the slots in correct sequence and lets all slots act together. Additional features like competitor exclusions and the ability to display ads spanning over multiple slots are provided.
redoLoadedSlots: boolean | If true, all ad slots will be loaded, even if they have already been loaded previously. Already existing advertising media will be deleted from the page and new ones will be delivered by the ad server. Will be automatically assigned the value “false” by default. |
boolean | true if successful, otherwise false |
- Example
SDG.Publisher.loadAllSlots(true);
SDG.Publisher.generateVastUrls( options )
generateVastUrls(options: VastOptions): VastReturns
This method returns a JSON formatted object, containing a VAST-Adtag for each requested video ad format.
VAST (short for Video AdServing Template) is a XML based interface between a video player and ad servers. Video players that support VAST can process and display a variety of video formats. For each format the video player needs a different URL, which will be provided by this method.
Parts of these URLs are created dynamically and for each user differently, therefor resulting in time-consuming developments in your Content/Video Management System (CMS) if inserted and managed by your CMS. Instead, Metatag will create these URLs and provide them on run-time for your website, for you to pass directly to the video player. Please see the documentation of your video player on how to pass VAST URLs on run-time.
Some example documentations for the most used VAST-components or publicly available players. Your video player might differ, please contact your player provider in case of questions or problems.
- Google IMA SDK: Get started | IMA SDK for HTML5 | Google for Developers
- JW Player: Schedule VAST ads (Web Player)
Please do not insert the returned URLs statically in your CMS/VMS. All VAST-URLs generated are coined to the current visitor of your webpage and will be different for each visited page and for each user.
If you like to test your video player with an PreRoll ad, you can call the generateVastUrls() method with these arguments:
SDG.Publisher.generateVastUrls({'preroll':true,'videozone':'test'})
options: VastOptions | The formats you wish to get VAST-adTags for. |
interface VastOptions {
preroll? : boolean, //requests a VAST Tag for "PreRoll" ad format
midroll?: boolean, //requests a VAST Tag for "MidRoll" ad format
postroll?: boolean, //requests a VAST Tag for "PostRoll" ad format
overlay?: boolean, //requests a VAST Tag for "Overlay" ad format
videozone: string, //defines the zone / section / subsection of the current page of your website
}
VastReturns | Returns a JSON formatted object with the position names as values and the corresponding VAST-adTag as keys which were passed within the argument. |
interface VastReturns {
preroll? : string,
midroll?: string,
postroll?: string,
overlay?: string,
}
- Example
SDG.Publisher.generateVastUrls({
'preroll': true,
'midroll': true,
'postroll': true,
'videozone': 'news-contentPartnerA'
});
SDG.Publisher.generateVastUrlsPromise( options )
generateVastUrlsPromise(options: VastOptions): Promise<VastReturns>
Returns a Promise resolving into a JSON formatted object, containing a VAST-Tag for each requested video ad format. To learn about the way promises work and how you can use them, we advise you to read MDNs - Using promises first.
A common good practice for displaying a video player with ads:
- Insert your video player in the website and let it render.
- Disable autoplay, so the user needs to start the video player by clicking on a “Play” button.
- As soon as user wants to start video, use generateVastUrlsPromise()
- When Promise resolves, use returned VAST Urls and configure your video player accordingly.
- Please see the documentation of your video player on how to pass VAST URLs on run-time.
This ensures good loading performance for your player and enables continuous functionality in case of errors.
When using Promises, always implement a fail-over to handle potential errors. At minimum, we recommend a timeout which rejects the Promise after a given time.
If you like to test your video player with an PreRoll ad, you can call the generateVastUrlsPromise() method with these arguments:
await SDG.Publisher.generateVastUrlsPromise({'preroll':true,'videozone':'test'})
options: VastOptions | The formats you wish to get VAST-adTags for. |
interface VastOptions {
preroll? : boolean, //requests a VAST Tag for "PreRoll" ad format
midroll?: boolean, //requests a VAST Tag for "MidRoll" ad format
postroll?: boolean, //requests a VAST Tag for "PostRoll" ad format
overlay?: boolean, //requests a VAST Tag for "Overlay" ad format
videoZone: string, //defines the zone / section / subsection of the current page of your website
}
Promise<VastReturns> | Returns a JSON formatted object with the position names as values and the corresponding VAST-adTag as keys which were passed within the argument. |
interface VastReturns {
preroll? : string,
midroll?: string,
postroll?: string,
overlay?: string,
}
- Example with fail-over
- Example without fail-over
window.SDG = window.SDG || {};
window.SDG.cmd = window.SDG.cmd || [];
Promise.race([
new Promise((resolve, reject) =>
SDG.cmd.push(() =>
SDG.Publisher.generateVastUrlsPromise({
'preroll': true,
'midroll': true,
'postroll': true,
'videozone': 'news-contentPartnerA'
})
.then(resolve)
.catch(reject)
)
),
new Promise((resolve, reject) => setTimeout(reject, 3000)),
])
.then(vastUrlsObject => configureYourVideoPlayer(vastUrlsObject))
.catch(() => console.log('no VAST-Urls after 3000 ms'))
const vastUrls = await SDG.Publisher.generateVastUrlsPromise({
'preroll': true,
'midroll': true,
'postroll': true,
'videozone': 'news-contentPartnerA'
});
SDG.Publisher.setAdServerConsent(personalizedAdsAllowed)
setAdServerConsent(personalizedAdsAllowed: boolean): void
Will notify the tag manager that you, as the Publisher of your website, reject the usage of personalized user data in the delivery process of advertisements.As a default, we assume your permission.
Site visitors can allow the usage of personalized data on their own through a Consent Management Platform(CMP).However, you as the publisher can digress from this decision and mark the content of the page as especially relevant for protection of data privacy and explicitly forbid the usage of personalized data.
This can be useful if the content of your site(texts, URL, etc.) allows drawing privacy - sensitive conclusions from the visitor(ex: illnesses, religious or sexual orientation). While the visit of a user to such content will never be directly or permanently linked to the profile of the user, visited URLs and content keywords might be used in the selection of personalized ads as long as the user visits the page.
If you wish to object to personalized ads, please execute this method as your very first command to the tag manager.
- Example
SDG.Publisher.setAdServerConsent(false)
SDG.Publisher.transitionAdvertisements()
transitionAdvertisements(): boolean
Enables interstitial advertisement to be displayed on both mobile and desktop environments depending on user device type.
- Example
SDG.Publisher.registerSlot('banner', 'myBannerContainer').load()
SDG.Publisher.registerSlot('sky', 'mySkyContainer').load()
SDG.Publisher.registerSlot('rectangle', 'myRectangleContainer').load()
SDG.Publisher.transitionAdvertisements();
SDG.Publisher.finalizeSlots()
Example for a complete configuration
In this example, three ad slots "banner", "sky" and "mrec" will be registered directly in the< head > of the page, after all relevant site parameters have been configured.We know these ad slots should always be loaded, no matter how the user interacts with the site.Therefor, we execute the finalizeSlot() method as soon as all "save" ad slots are registered.During registration, we mark all ad slots for loading, via.load().Slots will only be loaded as soon as their respective containers are rendered by the browser.The ads will not interfere with the loading of the site, since all slots are loaded "asynchronous", meaning parallel, to the site.
The user has furthermore the possibility to load further content, if he clicks on the site.This content should also include ads, but it might happen that the content is never loaded by the user.It makes no sense to send the content(as well as the ads) to the user, as long as he / she does not wish so.Suitably, we only register the 4th slot "posterad", after the user has clicked the content.
Additionally, the ads should be reloaded after 60 seconds.This would never be done in a live environment, but illustrates the use of the Publisher.loadAllSlots() method for this example.
<head>
<script>
window.SDG = window.SDG || {};
window.SDG.cmd = window.SDG.cmd || [];
window.SDG.cmd.push(function() {
SDG.Publisher.setZone('beauty');
SDG.Publisher.addKeywords(['auto','auto_news','naesse','reifen']);
SDG.Publisher.addKeyValue('gender', 'woman');
SDG.Publisher.addKeyValues({ 'interest' : ['finance', 'automotive', 'fashion'] });
SDG.Publisher.registerSlot('banner', 'headerBeforeNavigation').load();
SDG.Publisher.registerSlot('rectangle', 'adInContent').load();
SDG.Publisher.registerSlot('sky', 'adInSidebar').load();
SDG.Publisher.transitionAdvertisements();
SDG.Publisher.finalizeSlots();
});
</script>
<script async src="https://cdn.stroeerdigitalgroup.de/metatag/live/beispielseite/metaTag.min.js" type="text/javascript" fetchpriority="high"></script>
</head>
<body>
<div id="contentWrapper">
</div>
<script type="text/javascript">
//This function registers and loads the adlot "posterad", as soon as the user has loaded additional content successfully.
function showContentAndAds() {
loadAsychronContent().set('isContentLoaded', true);
if(isContentLoaded){
window.SDG.cmd.push(function() {
SDG.Publisher.registerSlot('posterad', document.getElementById('adInAsynchronContent')).load()
});
}
}
//after 60 seconds all ad slots will be loaded anew. Since all slots were already loaded once, we pass true as argument.
window.setTimeout(function() {
window.SDG.cmd.push(function() {
SDG.Publisher.loadAllSlots(true)
});
}, 60000);
</script>
</body>
PublisherSlotApi
A collection of methods available on each AdSlot. To access, save the return of the .registerSlot() method.
const mySlot = SDG.Publisher.registerSlot('sky', 'mySkyContainer');
mySlot.setTargeting({'interesse': ['sport','finanzen']}).load();
All methods of PublisherSlotApi will return the PublisherSlotApi.
You can chain PublisherSlotApi methods one after the other.
SDG.Publisher.registerSlot('sky', 'mySkyContainer')
.setTargeting({'interesse': ['sport','finanzen']})
.load()
| Slot.load() | Will start the call to the ad server for this specific ad slot. |
| Slot.setTargeting( object ) | Passes a given key and its value/s just to this ad slot. |
| Slot.removeTargeting( object ) | Removes a key value pair from this ad slot. |
| Slot.blockFormats( formatList ) | Excludes an amount of formats from this ad slot. |
| Slot.configure( configObject ) | Change settings for this ad slot. |
| Slot.nativeBackfill( fallbackAd ) | Will render an advertisement when no ad is returned from the adserver. |
Slot.load()
load(): AdSlotClass
Initiates a request to the ad server for a single ad slot, as soon as the container of the slot is rendered by the browser. The purpose of this method is to mark the ad slot for loading directly upon registration.
You don't have to send any further commands for the slot to load. It will automatically monitor the page and only send the request to the ad server as soon as the container becomes available. If the container is already present on the site, the slot will start the request at once. Therfore, you can use this method already in the <head> of the page. Neither the slot will be loaded (until the container is available), nor the site be influenced negatively.
Should you want to load the slot again, for example because the content of the site was changed and, the user should receive new ads, you can either call .load() again or use the PublisherApi methods loadMultipleSlots() or loadAllSlots().
AdSlotClass | The ad slot for calling up further methods of the slot |
- Example
SDG.Publisher.registerSlot('sky', 'mySkyContainer').load()
Slot.setTargeting( keyValues )
setTargeting(keyValues: Object<string, string[]>): AdSlotClass
Transfers a pair of parameters to the ad slot which consists of a key and multiple words bracketed by a JavaScript Literal-Object. The values are arranged in sequence in an array and separated by commas. A maximum of 15 values can be transferred at a time.
You can use key values to transfer further information to the ad server. These can be data referring to the website or to the user, such as the interests of the user or the location of a request for a weather forecast.
As opposed to the method Publisher.addKeyValues() the pair is only transferred to the respective slot.
Please consult your Ströer representative before using this function. The data to be used should be coordinated before the implementation and should be in conformity with data protection laws of your country and the country of your users.
Note that the keys and values may not contain any special characters, blanks or vowel mutations and must be completely written in lower-case letters. Vowel mutations have to be changed into ae, ue and oe and blanks and special characters into underscores before the transfer.
- Example
SDG.Publisher.registerSlot('sky', document.getElementById('mySkyContainer'))
.setTargeting({'technicalData': ['fotoshow','stickyEnabled']})
keyValues: Object<string, string[]> | An object consisting of multiple keys as arrays, each containing multiple values as string. |
AdSlotClass | The ad slot for calling up further methods of the slot |
Slot.removeTargeting ( key, value )
removeTargeting(key: string, value:string?): AdSlotClass
Removes a key value pair from an ad slot.
Should you pass a key and value, only the given value will be removed from the key. Should you pass only a key, without the value argument, the whole key including all values will be deleted.
key: string | the key you like to edit / remove. |
value: string? | [optional] - the value that should be removed |
AdSlotClass | The ad slot for calling up further methods of the slot |
- Example 1
- Example 2
SDG.Publisher.registerSlot('sky', document.getElementById('mySkyContainer'))
.removeTargeting('interests');
SDG.Publisher.registerSlot('sky', document.getElementById('mySkyContainer'))
.removeTargeting('interests','finance')
Slot.blockFormats( formatList )
blockFormats(formatList: Array<string>): AdSlotClass
Excludes multiple ad formats from delivering on the current HTML page, only for the used ad slot.
During the initial set up of your website in our system, we will make sure to only serve formats fitting to your website. Therefor, you will only need to block a format, if a given HTML page deviates significantly from your normal website design and the format (otherwise causing no trouble) will not work correctly.
Should you wish a block a format for your whole website for good (for example: after you made some changes to the design of your site) please contact your Ströer representative, so we can exclude the format permanently.
Will only block formats when used before an ad slot is loaded.
formatList: Array<String> | An array which contains the to be blocked format names as a string. See below for list of available formats. |
List of available formats
- advancedfireplace
- banderole
- billboard_770
- billboard_800
- billboard_970
- brandbooster
- bridgead
- cubead
- directionad
- doubledynamicsitebar
- doublehalfpagead
- doubleleaderboard
- fireplace
- flex1x1
- flex1x2
- flex1x3
- flex1x4
- flex2x1
- flex3x1
- flex3x4
- flex4x1
- flex6x1
- flex8x1
- flex9x16
- flex10x1
- floorad
- fullframead
- halfpagead
- intextspot
- largeinline
- leaderboard
- maxiad
- mediumrectangle
- mobilead2x1
- mobilead3x1
- mobilead4x1
- mobilead6x1
- mobilebrandbooster
- mobiledirectionad
- mobiledockerad
- mobileexpandablestickyfooter
- mobilehalfpagead
- mobilemrec
- mobilepresenter2x1
- mobilepresenter3x1
- mobilepresenter4x1
- mobilepresenter6x1
- mobilepresentermrec
- mobilesitebar
- mobilestickyad
- posterad
- posterad_billboard
- qualityfooter
- sitebar
- skyscraper_120
- skyscraper_160
- skyscraper_200
- stickybillboard
- tickeraddisplay
- topscroller
- wallpaper
- videotakeover
- videowall
AdSlotClass | The ad slot for calling up further methods of the slot |
- Example
SDG.Publisher.registerSlot('banner', 'myBannerContainer')
.blockFormats(['wallpaper', 'fireplace'])
.load()
Slot.configure ( configObject)
configure(configObject: Record <string, number | boolean>): AdSlotClass
Changes how the ad slot behaves on your website. You are able to control features like “Cumulative Layout Shift” avoidance, showing advertisements labels, showing loading animations or how and when to position or load ads inside the slot. If you do not use this function, default settings from our base configuration are used without any further need to intervene.
- Example
/** As a publisher we want to integrate a slot capable of delivering ads in 728x90 and 800x250.
* However we do not want to reserve 250px height everytime since 728x90 is more likely to be delivered.
* To avoid a massive CLS if 800x250 is actually delivered, reserve 150p height.
*
* We like to indicate to the visitor that this is an advertisement, therefor show an advertisement label.
*
* We do want to position the ads in the center of the slot, since our content is also centered inside the browser window.
* Left sided ads look ugly on our site.
*
* We like to give the visitor an indication, that some content is still loading, therefor we use loading animations.
*
* We like to boost loading performance on our website, therefor the ad slot should load "lazy"
* and only require resources when the visitor scrolls it into view.
*
*/
const myAdSlot = SDG.Publisher.registerSlot('banner', document.getElementById('myBannerContainer'));
myAdSlot.configure({
reserveSpace: true,
fixedHeight: 150,
showAdvertLabel: true,
centerAds: true,
showLoadingAnimation: true,
lazyLoad: true
}).load()
configObject: Record <string, number | boolean> |
Alternatively, use “reserverSpace: true" to automatically add this effect. |
AdSlotClass | The ad slot for calling up further methods of the slot |
Slot.nativeBackfill ( fallbackAd )
nativeBackfill(fallbackAd: () => HTMLElement): AdSlotClass
If an ad slot does not receive an advertisement from any ad server, you can pass a “fallback” advertisement to render instead.
- Example
SDG.Publisher.registerSlot('banner', document.getElementById('myBannerContainer'))
.nativeBackfill(() => {
var ad = document.createElement('div');
ad.style.width = '728px';
ad.style.height = '90px';
ad.style.border = '1px solid';
ad.style.backgroundColor = 'red';
return ad;
}).load();
Guidelines for integrating ad slots
These guidelines are not compulsory, but they do help to prepare your page or site for the different forms of advertising formats as efficiently as possible.
- An ad slot must always be bracketed by an HTML tag, preferably a
<div>, which has been assigned a unique ID value. The ID can be chosen freely and can be used in the registerSlot() method.
The tag should not have any further content apart from the script containing the method registerSlot(). Any further content it will be removed when ads are loaded.
- Example
<div id="Site_superbanner_pos1">
<script type="text/javascript">
SDG.Publisher.registerSlot('banner','Site_superbanner_pos1');
</script>
</div>
.
.
.
<div id="Site_superbanner_pos2">
<script type="text/javascript">
SDG.Publisher.registerSlot('banner2','Site_superbanner_pos2');
</script>
</div>
-
The HTML tags surrounding the ad slot should in no way hinder the visibility of the advertising material. Please avoid CSS attributes such as “overflow:hidden” or “clip:rect()”.
-
When having to position advertising spaces, please avoid CSS attribute “text-align” in the directly surrounding HTML tags. The interpretation of this attribute is browser specific and can be different from one browser to the next. Particularly in special advertising formats such as Wallpaper or Fireplace, imprecise positioning can lead to errors. As contrasted with that, the CSS attributes “position:relative”, “left” and “top” are implemented in exactly the same way in all browsers.
-
If you want to mark your advertising spaces with the label “Anzeige”, we can do this for you. The label can, in general, be freely designed and be seamlessly integrated into the rest of your typographical and color design. Please send us a sample design for the label, together with the desired CSS rules. If you do not want to use a self-designed label, we can employ a standard label for all ad slots inserted automatically.
-
In order to ensure a clean delivery of special advertising forms which are delivered via multiple advertising spaces at the same time, the three slots “banner”, “sky” and “out_of_page” should be delivered in a fixed sequence. Before, between or after these three types of ad slots it is possible to integrate additional ad slots without further difficulties as long as the sequence of these three locations is not changed.
SDG.Publisher.registerSlot('banner','myBannerContainer');
SDG.Publisher.registerSlot('banner2','myBanner2Container');
SDG.Publisher.registerSlot('banner3','myBanner3Container');
SDG.Publisher.registerSlot('sky','mySkyContainer');
SDG.Publisher.registerSlot('rectangle','myRectangleContainer');
SDG.Publisher.registerSlot('out_of_page','myOOPContainer');
Events
MetaTag has its own set of JavaScript-Events which can be listened to through “addEventListener”.
System Events
All system events use the "window" object, in where the metatag library is implemented, as the "eventTarget". Each event passes information about itself within the first argument of the listener method.
window.addEventListener('metaTagSystemBeforeLoadAll', (eventObject) => {
console.log('system Event "metaTagSystemBeforeLoadAll", event information can be found here %o', eventObject)
});
Available events on the window object:
| Event | Description |
|---|---|
| metaTagSystemBeforeLoadAll | Triggered before the first call from an ad slot is send to the ad server. |
| metaTagSystemContentLoaded | Triggered once the event DOMContentLoaded has fired. |
| metaTagSystemAdServerModuleLoaded | Triggered once MetaTag has decided which ad server to use on the website. |
| metaTagSystemZoneSet | Gets triggered once our interface method setZone() has been completed |
| metaTagSystemPageTypeSet | Gets triggered once our interface method setPageType() has been completed |
| metaTagSystemSlotRegistered | Gets triggered as soon as an ad slot is registered. This event contains general information for the ad slots. For more specific information about an ad slot please use the slot events |
| metaTagSystemSlotDeleted | Gets triggered as soon as an ad slot is deleted or unregistered. This event contains general information for the ad slots. |
| metaTagSystemSlotPrepared | Gets triggered once an ad slot has received all information needed to start a call to the ad server. This event contains general information for the ad slots. For more specific information about an ad slot please use the slot events |
| metaTagSystemSlotCalling | Gets triggered once an ad slot starts a call to the ad server. This event contains general information for the ad slots. For more specific information about an ad slot please use the slot events. |
| metaTagSystemSlotResponded | Gets triggered once an ad slot receives an answer from the ad server. This event contains general information for the ad slots. For more specific information about an ad slot please use the slot events. |
| metaTagSystemSlotDone | Gets triggered once an ad slot has received an answer from the ad server and the slot has finished rendering an advertisement. This event contains general information for the ad slots. For more specific information about an ad slot please use the slot events. |
| metaTagSystemSlotEmpty | Gets triggered once an ad slot receives an answer from the ad server that no advertisement is available. This event will not necessarily fire consistently. It can depend on if the impression gets passed to another system from our original system. The 3rd system might deliver an empty response but not pass it on to us. |
Slot Events
These events use the DOM node in which the ad slot was registered as the "eventTarget". Aside from the information available about the event itself, additionally you can access information about the ad slot. For this, use the first argument given through the listener method. The data from the ad slot is available in "eventObject.detail". Since the ad slot starts firing multiple events after its registration it is advised to set your listeners before the ad slot gets registered.
<div id="mySkySlot"></div>
<script>
document.getElementById('mySkySlot').addEventListener('metaTagSlotCalling', function (eventObject) {
console.log('system Event "metaTagSlotCalling", event information can be found here %o',eventObject);
console.log('additionally the name of the ad slot is saved here %o',eventObject.detail.slot);
});
SDG.Publisher.register('sky', document.getElementById('mySkySlot')).load();
</script>
| Event | Description |
|---|---|
| metaTagSlotRegistered | The slot beeing listened on has been registered and is available |
| metaTagSlotDeleted | The slot beeing listened on has been unregistered/deleted and will not fire any more events. |
| metaTagSlotCalling | The slot being listened on got the command to load an advertisement and will call the ad server. |
| metaTagSlotResponded | The slot being listened on has received and answer from the ad server, slot has not been rendered yet. |
| metaTagSlotDone | The slot being listend on has completed its process. It has received an answer from the ad server and the slot has finished rendering an advertisement. |
| metaTagSlotEmpty | The slot being listened on, did not receive an advertisement from the ad server. |
Additional Features
MetaTag brings a few additional features helping with the day to day handling of ad formats. If you have any questions concerning which options are available, please consult your Account Manager at Ströer.
Labeling ad slots with "Anzeige" (advertisements)
MetaTag can label your ad slots with the word "Anzeige" (advertisements). This label can be localized to your needs or changed for example into "promotion" if this is preferred. Ad labels should always be attached and may be required by regulation.
Per default MetaTag will always deliver ad labels, this can be turned off if you would like to take care of the labeling yourself.
If you wish to change/remove/add these labels, please see the Slot.configure() method
Define your own ad slot
For your website you can define your own ad slots (for example: to book your own local advertisements). Please contact us before implementing a local ad slot.
In order to create and register a local ad slot you will need to use a different method than usual.
SDG.Publisher.registerModularSlot(position, container, width, height, adServerSizes, isMobile, useSubzone);
Method arguments for registerModularSlot()
@param {String} position - the self selected name of the new position. This name will be extended with the prefix "local_" by the tag manager, to avoid collision with other ad slots.
If your self selected name is "rectangle", the slot will be registered as "local_rectangle"
@param {String||Object} container - the container of the ad slot, either as ID string or as DOM Node Object if the container already exists
@param {Number} width - the width of the ad slot, how it is rendered on the page
@param {Number} height - the height of the ad slot, how it is rendered on the page
@param {Array.<Array>} adServerSizes - nested array of the adserver sizes used for the new position
@param {Boolean} isMobile - true/false if the slot is a mobile slot
@param {String} useSubzone - the name which an ad slot will use as subZone. Can be used to create an artifical "sub section" for this ad slot (optional)
When accessing the local ad slot at a later time, please make sure to always include the automatically added prefix.
SDG.Publisher.registerModularSlot('my-rectangle', 'myContainer', 300, 250, [[300,250]], false)
SDG.Publisher.loadSlot('local_my-rectangle');
VideoAds with VAST
MetaTag-Video provides the possibility to easily setup a connection to any video ad server per VAST or VPAID. Formats like "Pre-Roll", "Mid-roll" or "Post-Roll" can be implemented into your video player.
Your video player must support IAB VAST (Video Ad Serving Template). In order to receive VAST URLs from MetaTag, please see the PublisherApi method Publisher.generateVastUrls()
We can gladly discuss an individual integration in your current video system. Questions regarding IAB-Standards, Video formats or popular video-SDK's for desktop or mobile. Feel free to contact your Publisher Account Manager at Ströer.
Lazy Loading
When an ad slot is “lazy loaded”, the slot will contact the Ad Server as soon as you indicate that you like the Ad Slot to load. For example, by using Slot.load(). Rendering of the content of the ad slot however, will only start shortly before the user scrolls the ad into view.
This will help use as little resources as possible on the users devices and might improve the loading performance of your website. Secondly, the ad will have a “high visibility rate” since it is only rendered shortly before it comes into view. Advertisers prefer to book placements & campaigns on slots that have a high visibility rate.
An Ad Slot is only eligible for counting towards “guaranteed traffic” if the Ad Slot starts to render. Subsequently, only a rendered ad will be paid for by the advertiser. This feature might have impacts on the revenue of your website. We strongly recommend testing the effect of “Lazy Load” and weight the results against the gains of website load performance and layout shift reduction.
If you are interested in using this feature, please contact your Account Manager at Ströer. We will check the possible impact on your website's revenue and help you discover the best implementation strategies. You can test and activate lazy loading for an ad slot at any time, using our Slot.configure() method.
Avoiding Cumulative Layout Shift
“Layout shifts” are height changes to a website, after the user has started interacting with the site. This might lead to content changing positions while the user reads it, or interactive elements vanishing shortly before the user wants to interact with them. Layout shifts will also have a negative impact on Googles “Web Vitals Score” of your website, potentially causing your website being penalized in Googles Search ranking.
Height changes to the content are often introduced by loading large-dimensioned parts of the website asynchronously, for example advertisements. While loading ads asynchronously helps tremendously with the performance of the website, it introduces many forms of “layout shifts”
-
Ad Slots inside the pages can support multiple, different formats, each with a unique height. When loading those Ad Slots, information about the delivered formats and their height are only available after ads are already rendered to the page (causing the shift).
-
Ad Slots can be reloaded during longer sessions. Removing old ads and inserting new ads might lead to different heights being reserved by the Ad Slot.
-
Ad Slots might not deliver an ad on each Page Impressions, because campaigns and advertisements might not be available. Nevertheless, the Ad Slot has to perform a call to the Ad Server to check for ads, causing a possible reservation of space on the site.
Solutions
To lessen the impact of ads to the content of the website, without sacrificing revenue potentials, MetaTag supports multiple distinct solutions. Solutions can be combined with one another, potentially removing layout shifts completely.
Registering AdSlots on start of the website
MetaTag is able to receive all relevant information for “Ad Slots” inside the <head> HTMLElement of the website. Using the interface methods Publisher.registerSlot() and Slot.load() early, the TagManager is able to reserve needed space for the ad slots as soon as the browser starts to render your website. Use our command queue to register ad slots as soon as possible.
Load processes of your site will not be impacted by registering Ad Slots inside the <head> HTMLElement. However, loading the Ad Slot (and automatically rendering the ad contents) will impact the performance of your site negatively.
Consider using Lazy Loading to remedy this.
Strict AdSlots
An ad slot consists of different “Formats”, which may be displayed by the slot. Each possible format has a pixel “width” and “height”.
When employing “strict ad slots”, MetaTag will reserve the largest possible height, of all available formats, on the ad slot. Reservation will take place before the user scrolls the Ad Slot into view or an ad is delivered. This will avoid layout shift completely but will lead to large “empty spaces” on your site, until ads are finally delivered. Ads inside the slot will be centered and scrolled alongside with the user, should the delivered ad be smaller than the reserved space. Slot.configure()
You can watch a demonstration of this behavior.
Alternatively you can set a fixed height by employing the Slot.configure() method. This is helpful if you like to reserve some space for an adslot, but like to have control about the exact height used.
Please note: If the Ad Slot can not be filled with an ad, with strict mode enabled the slot will remain empty and will not be hidden. To remedy this you can can fill the Ad Slot with your own content, for example an image/text teaser, for more details see the “Native Backfills” section.
This feature can be activated by contacting your Ströer representative or sending us a ticket via our Publisher Support Center (separate account required).
Loading Animations
When employing “Strict Ad Slots”, it may happen that the user already will see a slot, that is not filled with an ad yet. Since strict ad slots will reserve a fixed height and width for the slot, this empty space might be jarring to look at or signal to the user that the website is not functioning correctly. To solve this, we can activate icon animations inside the Ad Slot, that will imply that the content is still loading. As soon as an ad is delivered, the animations will be removed.
Loading animations can be activated for the whole site, with 3 different options available. Please contact your Ströer representative or send us a ticket via our Publisher Support Center (separate account required) to start the process.
Consent Management Platform
A Consent Management Platform (CMP) allows to collect users decisions, how their personalized data can be processed by the website and connected service providers. For more information about how to integrate such a CMP, please see our documentation: Consent Management for Websites
The consent of the user for processing personalized data is informed by an categorisation of different, possible usages of this data. Each service provider integrated into a website might use some or all data in diverse ways (deliver personalized content, display only relevant ads, etc). To allow the user to give a well-informed decision, these usages are clustered into a manageable amount of categories, which in turn the user can consent or decline. By consenting or declining a category, all service providers inside such a category will be allowed or blocked,
Classification and categorisation of service providers is done by the industry association Interactive Advertising Bureau (IAB) based upon the advertising industry-standard Transparency & Consent Framework (TCF). Service providers, which already have been classified, are named “IAB vendors” in the upcoming guide. Non-classified service providers are used as “non-IAB vendors”.
After the user chooses whether to give consent or not, we (Ströer) block/allow all IAB-vendors, which are related and responsible for advertisement. You will not need to do anything for managing these vendors.
Should you use any vendors yourself (IAB or Non-IAB), you will need to ask your users for permission to send personalized data to these vendors. In case the user does not wish to consent to specific service providers or whole categories, you will have to block these vendors and make sure they will not be activated or delivered to the user. This might have different impacts for each vendor. Some can still function without any form of personalized data, some will not function at all.
Please contact your vendors / service providers to understand the full technical implementation.
TagManager behaviour with user consent
As soon as a Consent Management Platform (CMP) is detected on your website, MetaTag will not deliver any advertisements, until the user has decided how their personalized data should be handled.
Some scripts and or vendors, which do not collect any personalized data, might be loaded before the user gives their consent. These scripts are rigorously tested and monitored, to always ensure full compliance. Other vendors or scripts, which might collect personalized data, are delayed until the user’s decision.
To subsequently deliver any ads (even non-personalized), the user needs, at minimum, to allow the following IAB Transparency & Consent Framework data usages for all involved vendors:
-
Select basic ads (Purpose 2)
-
Measure ad performance (Purpose 7)
-
Apply market research to generate audience insights (Purpose 9)
-
Develop and improve products (Purpose 10)
These purposes need to be either consented to by the user (user opts-in to the purposes), or the website needs to claim “legitimate interest” for these purpose (meaning the user does not explicitly refuse / opt-out)
Should the user refuse these purpose (opt-out), no ads will be delivered on the website and no ad impression will be generated or counted.
For delivering personalized ads and to allow for full monetization of a website, users need to consent fully to the above purposes and additionally to:
-
Store and/or access information on a device (Purpose 1)
-
Create a personalized ads profile (Purposes 3)
-
Select personalized ads (Purposes 4)
Full details about these purposes can be found at the IAB TCF Policies.