Was bedeutet responsive Werbung?
Responsive Werbung passt sich an die Breite des Bildschirms an. Statt für jede Seite ein festes Banner zu wählen, definieren Sie zwei Plätze: einen für große Bildschirme und einen für kleine. Der Browser zeigt davon immer nur den passenden an. Ein Billboard mit 970 x 250 Pixeln wirkt am Desktop stark, auf einem Smartphone wäre es breiter als der Bildschirm. Dort passt zum Beispiel ein Large Mobile Banner mit 320 x 100 Pixeln.
Bei Adsovo ist das ohne Zusatzwerkzeug möglich: Das Werbeskript lädt nur Plätze, die auf der Seite wirklich sichtbar sind. Das ist die Grundlage dieser Technik. Die Seite blendet den nicht passenden Platz mit einer CSS-Regel aus, und das Skript fragt dafür keine Anzeige an.
So ist der Code aufgebaut
Der Code besteht aus drei Teilen: einem Kommentar mit dem Namen des Pakets, einem kurzen style-Block und zwei Platzhaltern. Jeder Platzhalter ist ein div mit der Klasse MainAdverTiseMentDiv, Ihrem Publisher-Schlüssel und dem gewünschten Format. Der erste Platz gilt für den Desktop, der zweite für die mobile Ansicht.
<style>.adsovo-mob{display:none}@media(max-width:767px){.adsovo-desk{display:none}.adsovo-mob{display:block}}</style>
<div class="adsovo-desk"><div class="MainAdverTiseMentDiv" data-publisher="IHR-PUBLISHER-SCHLUESSEL" data-adsize="970x250"></div></div>
<div class="adsovo-mob"><div class="MainAdverTiseMentDiv" data-publisher="IHR-PUBLISHER-SCHLUESSEL" data-adsize="320x100"></div></div>
Ab einer Breite von 768 Pixeln ist der Desktop-Platz sichtbar und der mobile Platz ausgeblendet. Darunter kehrt sich das um. Den echten Code mit Ihrem Schlüssel erzeugt das Publisher-Panel, Sie müssen nichts von Hand anpassen. Wer Abstand, Ausrichtung oder einen Rahmen möchte, nutzt den Werbecode-Generator.
Warum nur der sichtbare Platz zählt
Das Adsovo-Skript prüft vor jeder Anfrage, ob ein Platz auf der Seite sichtbar ist. Ein per CSS ausgeblendeter Platz bekommt keine Anzeige und löst keine Impression aus. Wird das Fenster größer oder kleiner oder das Smartphone gedreht, erkennt das Skript, dass der andere Platz sichtbar wurde, und lädt dessen Anzeige nach. Vergütet werden weiterhin sichtbare Impressionen und gültige Klicks, mehr dazu auf der Seite Website monetarisieren.
Welche Formate für Desktop und Mobil zusammenpassen
Als Faustregel gilt: Am Desktop sind breite Formate im Kopfbereich oder Hochformate in der Seitenleiste üblich, mobil funktionieren Formate bis etwa 320 Pixel Breite am besten. Die fertigen Pakete im Panel setzen genau das um. Eine ausführliche Auswahlhilfe mit Platzierungen und typischen Fehlern finden Sie unter Responsive Werbeformate kombinieren.
- Kopfbereich: Billboard oder Leaderboard am Desktop, Mobile Banner mobil.
- Seitenleiste: Wide Skyscraper am Desktop, Medium Rectangle im Text mobil.
- Im Text: Medium Rectangle oder Large Rectangle am Desktop, Large Mobile Banner mobil.
Code in WordPress, Shopify, Wix und andere Systeme einfügen
Der Code ist normales HTML und lässt sich dort einfügen, wo Ihr System eigenes HTML erlaubt: in WordPress in einem Custom-HTML-Block oder Widget, in Shopify und anderen Shop-Systemen in einem Abschnitt oder einer Vorlage, in Baukästen in einem HTML- oder Code-Element. Das Adsovo-Skript muss zusätzlich einmal auf der Seite eingebunden sein, wie in der Einbindung Schritt für Schritt beschrieben. Mit dem WordPress-Plugin übernimmt das Plugin diesen Teil.
Entfernt Ihr Editor den style-Block, legen Sie dessen zwei CSS-Regeln in das Theme-CSS oder in ein Feld für zusätzliches CSS. Die Klassen bleiben dieselben.
Tipps für gute Ergebnisse
Setzen Sie den Platz nicht direkt neben andere Anzeigen und achten Sie darauf, dass er vom Inhalt abgesetzt ist. Geben Sie dem Container mobil eine Mindesthöhe, damit der Text beim Laden nicht springt. Prüfen Sie beide Ansichten nach jeder Änderung am Theme. Dann bleibt die Seite schnell und die Anzeigen werden gesehen.
Desktop
Mobile Ansicht
Ein Code
