# HTML5 (TTD hosted)

#### Allgemeines

Werbemittel müssen als solche klar erkennbar sein. Weiterhin muss erkennbar sein, dass sie nicht zum Inhalt der Seite gehören. Alle Werbemittel müssen mit einem klar sichtbaren Rand versehen werden.

- - - - - -

#### Animationen und Sound

Die Animation darf nicht länger als 15 Sekunden dauern. Es darf **kein** Element mehr animieren.  
Animationen können als Schleifen erstellt werden, müssen jedoch nach 15 Sekunden stoppen.  
Bei Werbemitteln mit Ton muss ein Sound On/Off Button implementiert sein. Das Werbemittel hat hierbei mit dem Sound Off Zustand zu starten.

- - - - - -

#### Hintergrundfarbe

Es ist eine Hintergrundfarbe zu setzen.

- - - - - -

#### Anlieferung

Ein HTML5-Banner ist als .zip-Datei anzuliefern.   
Die .zip-Datei muss alle Ressourcen beinhalten und keine Unterordner verwenden.  
Für jedes HTML5-Banner muss ein gesondertes Fallback-Banner angeliefert werden. Das Fallback ist gesondert anzuliefern und nicht Bestandteil der .zip-Datei.

- - - - - -

#### Externe Scripte / Javascript Bibliotheken

Javascript-Ressourcen müssen in der .zip-Datei enthalten sein und dürfen nicht von externen Drittanbieter Servern geladen werden. Häufig verwendete JavaScript- und CSS-Bibliotheken (wie jQuery) müssen nicht mit dem Werbemittel eingebunden werden.

- - - - - -

### Clicktag

##### Implementierung der Klickfläche

Click-Tag-Namen sind case-sensitiv. Im gesamten Werbemittel und in allen Dateien ist eine einheitliche Schreibweise zu verwenden. Die Standardbezeichnung in The Trade Desk ist `clickTAG`.

<p class="callout warning">Wenn ein HTML5-Werbemittel eine fest codierte Klick-URL enthält, kann The Trade Desk diese nicht überschreiben. Das Werbemittel wird immer auf die hartcodierte URL verweisen und alle in der Plattform angegebenen Klick-URLs ignorieren.</p>

Dieses Beispiel zeigt, wie ein HTML5-Werbemittel mit einer Klick-URL umgesetzt werden kann:

```HTML

<html>  
  <head>    
    <script type="text/javascript" charset="utf-8">      
      function getParameterByName(name) {  
      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");  
      var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),    
      results = regex.exec(location.search);  
      return results === null ? "" :    
      decodeURIComponent(results[1].replace(/\+/g, " "));
    }      
    var clickTAG = getParameterByName("clickTAG");                        
    </script>  
  </head>  
  
  <body>    
    <a href="javascript:window.open(window.clickTAG);void(0);">      
      <img src="clickme.jpg"/>    
    </a>  
  </body>
</html>
```

Wenn auf das Bild geklickt wird, öffnet sich ein neues Fenster mit der Adresse, die im `clickTAG`-URL-Parameter des Werbemittels gespeichert ist.

<p class="callout info">Weitere Infos: [TTD Creative Specifications](https://www.thetradedesk.com/assets/global/documents/Creative_Specifications-en.pdf)</p>

</body></html>