> For the complete documentation index, see [llms.txt](https://docs.sportradar.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sportradar.com/ads/creative-specification/programmatic-display.md).

# Programmatic Display

### General Information

All creative must meet the standards mentioned below, for campaigns to run. It is essential that  creative are compliant not only to be allowed to serve on our systems but also to ensure that creative can serve on the widest pool of inventory. Non-compliant ads will not serve on e.g. Google’s, Rubicon’s, Appnexus’ or Microsoft’s inventory, thus the available pool is limited. Our Audit Team evaluates creative against the standards below. As initial requirements, a single creative must render properly multiple times during the audit process. Therefore, frequency capping or geo-targeting set outside the system will interfere with the audit process. We must receive the creative 72 hours prior to campaign start to ensure that creative can be audited in time to serve for any campaign.

Banner ads on Sportradar DSP may contain an AdChoices label in one corner, which Sportradar will automatically overlay on your creative. Please consider this during your creative design process. Please send the creative and any tracking pixels, click-commands or deep-links, at least three days before the campaign starts to your account manager. When using 3rd party tracking there may be tracking deviations! Deviations up until 10% will not being investigated. Please note, that Google Analytics is not supported as an IAB certified tracking tool.

Sportradar recommends the following creative guidelines for banners:

### Technical Specifications

#### General 

* If a creative’s background image utilizes a photo, pattern or text, it should be simple, non-distracting, and understated.
* Text should be minimal. Remove any unnecessary or extraneous language.
* Font size is recommended not be smaller than 16pt and must be legible when viewed on device.
* Creative should have a clearly visible non-white 1-pixel border or a dark or high contrast background color that distinguishes it from a site’s content.
* The advertiser’s logo or name must be included in mobile banner ads.
* A headline or copy message is also recommended.

#### Creative

* Must not loop: Creative must only animate and loop for a maximum of 30 seconds, after which point the ads must stop – (they will not be able to serve on certain inventory)
* Creative must open in new windows. The target window for the clickthrough URL must be set to "\_blank" so the click-through will open in a new window.
* Do not serve blanks
* Creative must click though to the correct landing pages
* Each creative must have a single brand or product offering associated with it. Multiple brands combined to make a single offer will be accepted.
* Creative may not rotate brands.
* 3rd party ad tags must be from approved ad servers

#### Actions 

* Clicking on an ad must not initiate a download of any type of file
* Creative cannot simulate mouse or computer actions \[E.g. mimicking the movement of a mouse icon].
* Strobing, flashing backgrounds, or otherwise distracting ads are not allowed.

#### Landing pages 

* The language of the landing page must match the language of the creative. For example, if the creative is in Spanish, the landing page must be, too.
* Landing pages must open in a new tab or window, and may not navigate away from the publisher’s page.
* The landing page must match the language, brand, and offer of the creative.

### Desktop and Mobile Web Display Ads

| Ad Placement                   | Ad Size/Creative Dimensions | Max. File Weight  | <p><br>File Format</p><p><br></p> |
| ------------------------------ | --------------------------- | ----------------- | --------------------------------- |
| Medium Rectangle               | 300 x 250 px                | 200 kb            | <p>​200 kb<br></p>                |
| Leaderboard                    | 728 x 90 px                 | 200 kb            | <p>JPG/PNG-8/GIF/HTML<br></p>     |
| Wide Skyscraper                | 160 x 600 px                | 200 kb            | <p>JPG/PNG-8/GIF/HTML<br></p>     |
| Large Rectangle                | 300 x 600 px                | 200 kb            | <p>JPG/PNG-8/GIF/HTML<br></p>     |
| Billboard                      | 970 x 250 px                | 200 kb            | <p>JPG/PNG-8/GIF/HTML<br></p>     |
| Mobile Leaderboard             | 320 x 50 px                 | 200 kb            | <p>JPG/PNG-8/GIF/HTML<br></p>     |
| <p>Mobile Leaderboard<br></p>  | 300 x 50 px                 | <p>200 kb<br></p> | <p>JPG/PNG-8/GIF/HTML<br></p>     |
| <p>Mobile Leaderboard<br></p>  | 300 x 100 px                | <p>200 kb<br></p> | <p>JPG/PNG-8/GIF/HTML<br></p>     |
| <p>Mobile Interstitial<br></p> | <p>320 x 480 px<br></p>     | <p>200 kb<br></p> | <p>JPG/PNG-8/GIF/HTML<br></p>     |
| <p>Mobile Interstitial<br></p> | <p>480 x 320 px<br></p>     | <p>200 kb<br></p> | <p>JPG/PNG-8/GIF/HTML<br></p>     |

### HTML5 Specifications

#### HTML5 creative description

* HTML5 creatives are ads built with JavaScript, HTML, and CSS that serve on web pages or in mobile apps.&#x20;
* They can include images, animation, videos or any combination of these elements.&#x20;
* They can support different interactions, including clicks, taps, and hovers.&#x20;
* They can also expand larger than their initial size to give you a larger canvas for your brand's message.
* HTML5 creative consists of html, js, css and images files. One HTML5 creative may be presented as .zip archive with all such files.

### HTML5 archive validation rules

* no nested zip files;
* supported file types: HTML, HTM, JS, CSS, JPG, JPEG, GIF, PNG, JSON, XML, and SVG;
* file name doesn't include URL unsafe symbols;
* only one HTML or HTM file in archive;
* Make sure, JS code does not truncate clickTag variable value.
* HTML5 is case-sensitive, so please use only clickTag variable for click user action handlers.
* Try to avoid using "clickTag" as a substring of the name of any method/function in HTML code. So, function "getclickTagURL" or "ClickTagValueGet" is not good at all.&#x20;

### ClickTag handling

ClickTag is an additional script inside HTML that will add click\_url inside creative:

* Please don’t hardcode the click URL/landing page URL inside your HTML index file, as the click/landing page URL should be provided separately as stand alone to Sportradar, as the HTML5 creative + click/landing URL will be uploaded inside the DSP UI system.
* Please implement the Sportradar (IAB standard) clickTag inside your HTML index file, so Sportradar is then able to add own click counting URL to be present within the click chain and redirect to your click/landing URL. Why? Sportradar needs to be able to count clicks and then optimize driving good click rates.&#x20;

#### How do I need to add the clickTag to the index HTML file? :

1\. Please place following script function before end of \</head>:

```html
<script>
 var getUriParams = function() {
 var query_string = {}
 var query = window.location.search.substring(1);
 var parmsArray = query.split('&');
 if(parmsArray.length <= 0) return query_string;
 for(var i = 0; i < parmsArray.length; i++) {
 var pair = parmsArray[i].split('=');
 var val = decodeURIComponent(pair[1]);
 if (val != '' && pair[0] != '') query_string[pair[0]] = val;
 }
 return query_string;
 }();
</script>
</head>
```

2\. Please implement the `<a href="#clickTag" id="IAB_clickTag" target=“_blank“>`

command over your images in the body, so the click is working as the user clicks on the ad.&#x20;

Example:

```html
<body>
<a href="#clickTag" id="IAB_clickTag" target=“_blank“>
<div id="b_7021093"><div style="display:none;" id="el_7021094" class="js-bnfy">
<img id="img_7021094" class="bnfy-enter" alt="Parts / Brand / Big-C" width="160" height="401" 
src="7021094.svg"/></div><div style="display:none;" id="el_7021095" class="js-bnfy">
<img id="img_7021095" class="bnfy-enter" alt="paint" width="160" height="98" 
src="7021095.png"/></div><div style="display:none;" id="el_7021096" class="js-bnfy">
<img id="img_7021096" class="bnfy-enter" alt="Rectangle 19" width="160" height="296" 
src="7021096.svg"/></div><div style="display:none;" id="el_7021097" class="js-bnfy">
<img id="img_7021097" class="bnfy-enter" alt="Parts / Imagens Desporto / Soccer-Ball" 
width="62" height="97" src="7021097.png"/></div><div style="display:none;" id="el_7021098" 
class="js-bnfy">
<img id="img_7021098" class="bnfy-enter" alt="sport image" width="160" height="600" 
src="7021098.png"/></div><div style="display:none;" id="el_7021099" class="js-bnfy">
</a>
```

3\. Please implement following script before end of the \</body>

```html
<script>
 document.getElementById('IAB_clickTag').setAttribute('href', getUriParams.clickTag);
</script>
</body>
</html>
```

<br>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.sportradar.com/ads/creative-specification/programmatic-display.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.