Styleguide:Werbemittel

Aus Imperia Support Wiki


BerlinOnline / Berlin.de kann keine defekten Werbemittel schalten. Sollte Ihr Werbemittel mehr als ein einfaches GIF, JPEG, PNG oder Flash-Film sein, handelt es sich um ein komplexes Werbemittel mit besonderen Spielregeln. Um eine reibungslose Integration Ihrer Werbemittel in unsere Plattform zu garantieren, bitten wir Sie deshalb unbedingt, folgende Grundsätze zu beherzigen:

Lieferung Ihres Werbemittels

Bitte liefern Sie Ihre Werbemittel in einer Textdatei, Dateiendung .txt. Sie erleichtern uns damit das Öffnen und die Einbuchung in den AdServer. Dazu bitten wir Sie, alle notwendigen Dateien beizulegen.

Ihre Grafiken / Flashfime / etc. sollen eine Dateigröße von 30kB nicht übersteigen. Bedenken Sie, dass jedes Kilobyte vom Endnutzer auch wieder heruntergeladen werden muss.

Ihr Werbemittel entspricht einem Stück HTML-Quelltext, das an der entsprechenden Stelle dargestellt wird. Bitte senden Sie uns keine kompletten HTML-Dokumente.

Sollte Ihr Werbemittel aus mehreren Dateien bestehen, so müssen diese die folgenden Bedingungen erfüllen:

  • Alle Dateien liegen im selben Verzeichnis.
  • Alle Dateinamen sind komplett kleingeschrieben und enthalten nur Buchstaben, Ziffern, Binde-, Unterstriche und / oder Punkte.

Standard-Konformität

Bitte überprüfen Sie Ihr Werbemittel auf korrekten Aufbau. Nutzen Sie dazu ggf. die Validatoren des W3C. Zweckmäßigerweise ist ihr Werbemittel ein XHTML-konformes Code-Snipplet. Vermeiden Sie unbedingt die häufigsten Fehler wie z.B.

  • Ungequotete "&"-Zeichen, verwenden Sie bitte "&"
  • Ungequotete Anführungszeichen, verwenden Sie bitte """

Sehen Sie davon ab, Werbemittel nur auf bestimmte Browser einzuschränken. Bei BerlinOnline / Berlin.de liegt der Marktanteil von Nicht-IE-Browsernwie z.B. Firefox bei 35%.

Zeichensatz

Die Plattform BerlinOnline / Berlin.de verwendet unterschiedliche Zeichensätze (u.a. UTF-8, ISO-8859-1, ISO-8859-15). Sollten Ihre Werbemittel eigenen Content erzeugen, so achten Sie bitte auf richtiges Quoting. Zweckmäßigerweise encodieren Sie alle Sonderzeichen, also auch Umlaute.

Trackinglinks / Zählpixel

Bitte vermeiden Sie es tunlichst, Ihren Link durch Trackinskripte durchzuschleusen. BerlinOnline / Berlin.de hat eigene Trackinglinks im Einsatz, die die Zählung von Clicks realisieren.

Jedes zusätzliche Trackingscript verlängert den Weg zu der eigentlichen Ziel-URL, und fügt eine weitere Sollbruchstelle zu der Verlinkung hinzu. Beim Ausfall einer der in der Tracking-Kaskade benannten Server wird die Verlinkung abgebrochen.

Darüber hinaus können überlange URLs in unterschiedlichen Browsern zu Fehlern bei der Verlinkung führen.

Vermeiden Sie auch den Einsatz von Zählpixeln. Sollten externe Zählpixel nicht geladen werden können, kann ggf. die Auslieferung der gesamten Seite abgebrochen werden.

Generell behalten wir uns vor, Werbemittel, die die Auslieferung der Seite stören, im Interesse des Portalbetriebs sofort von den Seiten zu entfernen.

Werbemittel

Bei bestimmten Werbemitteln gelten besondere Vorgaben, die zu erfüllen sind:

Flash

Bitte verwenden Sie folgende Implementationsart für Ihren Flash-Film:

 
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0" width="360" height="300" id="dahinter_layer_360x300" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="##PATH##davor_layer.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <embed src="##PATH##davor_layer.swf" quality="high" bgcolor="#ffffff" width="360" height="300" name="dahinter_layer_360x300" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
  </object>
  

Trackinglinks

Berlin.de / BerlinOnline verwendet eigene Trackinglinks. Bitte berücksichtigen bei der Erstellung von Flash-Werbemitteln, dass alle Links in dem Werbemittel um einen von uns gelieferten Trackinglink erweitert werden / werden können.

Unter http://www.macromedia.com/resources/richmedia/tracking/designers_guide/ finden Sie eine Anleitung zur Einbindung von sog. ClickTags. Damit können wir nachträglich Ihr Flash-Werbemittel um unseren Tracking-Link erweitern.

Da es unterschiedliche Schreibweisen für ClickTAGs gibt, bitten wir Sie, die bei Google akzeptierte Form zu verwenden:

Es ist erforderlich, dass der Variablen-Name wie folgt geschrieben wird: "clickTAG" (TAG in Großbuchstaben/kein Leerzeichen zwischen click und TAG). Die Schreibweisen "click tag", "Click Tag" sowie alle anderen Schreibweisen sind nicht zulässig, sondern ausschließlich "clickTAG".

Dies ist der korrekte Code für den Parameter clickTAG:

 on (release) {
   if (clickTAG.substr(0,5) == "http:") {
     getURL(clickTAG, "_blank");
   }
 }

bzw.

 defineButton xx
   on overDownToOverUp
     push '_root'
     getVariable
     push 'clickTAG'
     getMember
     push '_blank'
     getURL2
   end
 end // of defineButton xx


Weitere Details zu Flash, einschließlich detaillierter technischer Spezifikationen, finden Sie unter: http://www.macromedia.com/resources/richmedia/tracking/designers_guide/

Expandable Ads

Ihr Expandable Ad muss folgende Bedingungen erfüllen:

  • Beim Überfahren des Werbemittels klappt ein zusätzlicher Bereich auf
  • Sobald der Mauszeiger den aufgeklappten Bereich verlässt, muss das Werbemittel wieder zuklappen. In Ausnahmefällen ist mittels eines sehr kurzen Timeouts eine Verzögerung des Zuklappens zulässig - in diesem Fall muss aber ein funktionierender "Schließen"-Button implementiert sein.

Dieses Verhalten muss zumindest in den Hauptbrowserplattformen gewährleistet sein.

Layer-Ads

Ihr Layer-Ad muss folgende Bedingungen erfüllen:

  • Das Layer-Ad darf keinerlei Elemente auf der Seite abschalten. Das Abschalten von Select-Feldern ist unerwünscht (s.u.)
  • Der Layer muss durch uns positionierbar sein, um Verdeckungseffekt zu vermeiden
  • Der Layer sollte eine Breite von 500px nicht überschreiten, um nicht über dem Rectangle-Platz positioniert werden zu müssen (dies kann ansonsten zu Fehlern führen)

Dieses Verhalten muss zumindest in den Hauptbrowserplattformen gewährleistet sein.

How to

Bestimmte techn. Fragen finden Sie hier kurz erläutert:

CSS (z.B. für Layer)

Bitte vermeiden Sie es, explizit CSS-Regeln zu setzen. Verwenden Sie lieber die Möglichkeiten zur Erzeugung von Inline-Styles. Ggf. befinden Sie sich auf einer Seite, die z.B. die Klassennamen skyscraper oder banner bereits verwendet.

Wenn Sie CSS setzen müssen, schachteln Sie die Regeln dazu bitte auf folgende Weise:

 <style type="text/css">/*<![CDATA[*/
    /* Ihr CSS */
  /*]]>*/</script>

Wenn Sie HTML direkt auf unseren Seiten erzeugen, bedenken Sie bitte, dass Sie ggf. Styles von unserem Styleseet erben. Um möglichen Stylekollisionen aus dem Weg zu gehen, sollten Sie aufwändiges HTML ggf. in ein iFrame sperren.

Layer und position:absolute

Bedenken Sie beim Positionieren von Layern, dass Ihr Werbemittel nicht unbedingt den Seitenstart als Ankerpunkt hat. Gegebenenfalls liefern Sie Variablen, mit denen es uns möglich ist, ggf. noch nachträglich Elemente umzupositionieren.

Layer sollten auf jeden Fall einen Schließen-Knopf haben, der aus HTML besteht. Somit sollte es auch Nutzern ohne Flash möglich sein, das Werbemittel zu schließen.

Gegeneinander positionierte Layer

Um Layer gegeneinander zu positionieren verwenden Sie bitte die Eigenschaft von CSS, dass ein positioniertes Element sich als Anker für seine Positionierung das letzte positionierte Element sucht. Versuchen Sie möglichst nicht, zwei Elemente separat voneinander per positon:absolute zu erzeugen, sondern gehen Sie wie folgt vor:

 <div style="position:relative">
    <div style="positon:absolute;top:-10px;left:-500px;width:500px;">
      <!-- Content von Teil 1 -->
    </div>
    <!-- Content von Teil 2 -->
  </div>

Damit brauchen Sie nur das innere Element positionieren... und wir nur das äußere. Andernfalls müssten beide Seiten beide Elemente positionieren.

Um genau zu verstehen, wie relative und absolute Positionierung wirklich funktioniert, ist der Artikel unter http://www.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute sehr hilfreich.

Javascript

Wenn Sie Javascript verwenden, achten Sie bitte auf einen möglichst standardkonformen Aufbau. Beispielhaft finden Sie hier einen Javascript-Block:

 <script type="text/javascript">/*<![CDATA[*/
    // Ihr Javascript
  /*]]>*/</script>

Bedenken Sie: Auf Berlin.de / BerlinOnline wird XHTML verwendet. Aus diesem Grund ist die o.a. Schreibweise auf jeden Fall zu präferieren, zumal Sie auch unter regulärem HTML4 immer noch voll funktioniert.

IDs

Soweit möglich, sollten Sie auf die Verwendung von IDs verzichten. Möglicherweise ist die von Ihnen vergebene ID bereits in Gebrauch. Nutzen Sie lieber die Möglichkeiten des DOM.

 <a href="#" onclick="this.style.display='none';return false;">Lass mich verschwinden</a>