Implementierungsleitfaden

Ad-Manager-Banner

Display ad slots (Google Publisher Tag)

Der klassische Anzeigenplatz von Ad Manager, erstellt mit dem Google Publisher Tag, mit fester Größe, mehreren Größen oder responsiv.

Ad Manager
Smartphone und Desktop

Das Format kennenlernen Auf meiner Website prüfen

Desktop

Smartphone

In 1 Minute erklärt

Was ist das Ad-Manager-Banner?

Das Ad-Manager-Banner ist das Anzeigenrechteck, das fest auf der Seite sitzt: mitten im Text, oben oder an der Seite. Denken Sie an ein Plakat an der Schulwand. Es hat einen festen Platz und eine feste Größe, und jeder, der vorbeikommt, kann es sehen. In Ad Manager heißt dieser reservierte Platz Slot, das englische Wort für Anzeigenplatz. Das GPT, kurz für Google Publisher Tag, fordert die Anzeige für diesen Platz an und zeigt sie an. Es ist eine Code-Bibliothek von Google, die Sie in die Website einbinden.

So funktioniert es: Zuerst sagen Sie der GPT, welchen Ad-Manager-Anzeigenblock sie verwenden soll, welche Größen dort passen und in welchem Kästchen der Seite er erscheinen soll. Dieses Kästchen ist ein div, ein Stück HTML mit einem eindeutigen Namen. Danach fordert die GPT die Anzeige an und zeichnet sie in das Kästchen. Der Name des Kästchens muss an beiden Stellen identisch sein. Sonst erscheint die Anzeige nicht. Google selbst rät, genau das zu prüfen, wenn die Anzeige nicht erscheint.

Die Größe lässt sich auf drei Arten wählen. Bei fester Größe kommen nur Anzeigen dieses Maßes infrage, etwa 300 mal 250. Bei mehreren Größen listen Sie mehrere Maße auf, und Ad Manager kann eines davon wählen. Beim responsiven Banner erstellen Sie eine Tabelle namens Größenzuordnung (Size Mapping), die sagt, welche Maße für welche Bildschirmbreite gelten: eine Liste für große Bildschirme und eine andere für kleine. Es gibt noch die fluide Größe, die sich auf die Seitenbreite dehnt, aber Google erklärt, dass sie heute nur für native Anzeigen verwendet wird.

Google hat diese Arbeitsweise geschaffen, damit die Website die Kontrolle hat: Sie entscheiden, wo jede Anzeige sitzt, welche Größen sie akzeptiert und wann sie lädt. Die Dokumentation zeigt, wie Anzeigen am Seitenende erst geladen werden, wenn der Nutzer in ihre Nähe kommt, was Lazy Loading heißt. Sie erklärt auch, wie man eine Anzeige aktualisiert, ohne die ganze Seite neu zu laden, nach Regeln zu Zeit und Deklaration. Das Banner lohnt sich, wenn Sie schon ein Ad-Manager-Konto haben und Ort und Größe jedes Platzes sorgfältig wählen möchten.

Schritt für Schritt

So setzen Sie es um

Tag in Ad Manager generierenKlicken Sie in Ad Manager auf Inventar und dann auf Anzeigenblöcke. Öffnen Sie den Block, gehen Sie zum Tab Tags, wählen Sie Google Publisher Tag (GPT) und klicken Sie auf Weiter. Treffen Sie die weiteren Auswahlen und kopieren Sie die Tags unter Tag-Ergebnisse.
GPT im Head ladenFügen Sie das GPT-Script in den Head-Bereich der Seite ein. Es bringt die Anzeigenwerkzeuge von Google auf die Website.
Slot definierenEbenfalls im Head teilen Sie dem GPT den Pfad des Anzeigenblocks, die akzeptierten Größen und den Namen des divs mit. Für einen responsiven Slot fügen Sie eine Größenzuordnung hinzu. Aktivieren Sie am Ende den Anzeigendienst.
div mit reserviertem Platz erstellenErstellen Sie im Body das div mit demselben Namen wie in der Definition. Geben Sie ihm per CSS Höhe und Breite passend zur größten Anzeige, damit nichts auf dem Bildschirm springt, wenn die Anzeige kommt.
Anzeige anfordernRufen Sie direkt nach dem div die Anzeige mit dem Namen des div auf. Damit Anzeigen aus Ihrem eigenen Inventar erscheinen, brauchen Sie eine aktive Werbebuchung mit dem Status Bereit.
Lazy Loading und AktualisierungAktivieren Sie bei Bedarf Lazy Loading für die Plätze am Seitenende. Wenn Sie Anzeigen aktualisieren, deklarieren Sie das in Ad Manager unter Inventar, Inventarregeln, Publisher-Deklarationen und nutzen Sie dieselbe Regel auf der Seite.

Umgesetztes Beispiel

Der Code und wie es auf dem Bildschirm aussieht

Das GPT und die Slot-Definition kommen in den Head. Das div mit dem Anzeigenaufruf kommt in den Body, an die Stelle, an der das Banner erscheinen soll.

<!-- No <head> -->
<script async
  src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
  crossorigin="anonymous"></script>
<script>
  window.googletag = window.googletag || { cmd: [] };
  googletag.cmd.push(() => {
    // Tamanhos por largura de tela (slot responsivo).
    const mapping = googletag
      .sizeMapping()
      .addSize([1024, 768], [[728, 90], [300, 250]])
      .addSize([0, 0], [300, 250])
      .build();

    googletag
      .defineSlot(
        "/1234567/exemplo",
        [[728, 90], [300, 250]],
        "banner-exemplo",
      )
      .defineSizeMapping(mapping)
      .addService(googletag.pubads());

    // Carregamento lento para espaços longe da tela.
    googletag.setConfig({
      lazyLoad: {
        fetchMarginPercent: 500,
        renderMarginPercent: 200,
        mobileScaling: 2.0,
      },
    });

    googletag.enableServices();
  });
</script>

<!-- No <body>, onde o anúncio deve aparecer -->
<div id="banner-exemplo" style="min-height: 250px;"></div>
<script>
  googletag.cmd.push(() => {
    googletag.display("banner-exemplo");
  });
</script>

Auf dem DesktopErscheint als festes Rechteck an dem Ort, den Sie gewählt haben, zum Beispiel 728 mal 90 oder 300 mal 250. Es scrollt mit der Seite, wie jeder Teil des Textes.

Auf dem SmartphoneErscheint mitten im Inhalt, in Maßen, die auf den Bildschirm passen, wie 300 mal 250. Mit der Größenzuordnung erhält das Smartphone nur die Maße, die Sie für kleine Bildschirme freigegeben haben.

Was Google empfiehlt

Erlaubt und nicht erlaubt

Erlaubt

Eine feste Größe, eine Liste mehrerer Größen oder eine Größenzuordnung nach Bildschirmbreite festlegen.
Im CSS den Platz für die größte Größe reservieren, die erscheinen kann. Laut Google ist das der wirksamste Weg, damit die Seite nicht springt.
Die Plätze, die sofort erscheinen, im Head definieren, damit sie Vorrang haben.
Lazy Loading für Plätze unterhalb des sichtbaren Bereichs nutzen, die erst erscheinen, wenn der Nutzer scrollt.
Anzeigen mit der Aktualisierungsfunktion des GPT aktualisieren, statt die ganze Seite neu zu laden, sofern die Aktualisierung in Ad Manager deklariert ist.
Durch eine Aktion des Nutzers ohne Mindestzeit aktualisieren, da Google nur für zeit- oder ereignisbasierte Aktualisierung ein Mindestintervall verlangt.

Nicht erlaubt

Im div einen anderen Namen verwenden als den, der in der Slot-Definition übergeben wurde.
Anzeigen aktualisieren, ohne das in Ad Manager zu deklarieren, oder falsch deklarieren. Google wertet das als Verstoß.
Im Web zeit- oder ereignisbasiert mit einem Intervall unter 30 Sekunden aktualisieren.
Den Platz vor der Aktualisierung leeren. Die Aktualisierung tauscht die Anzeige ohnehin aus, und Leeren lässt den Platz nur länger weiß.
Plätze aktualisieren, die der Nutzer nie sieht. Google warnt, dass dies die Sichtbarkeitsrate stark senken kann.
Das div ohne reservierte Maße lassen, was den Inhalt springen lässt, wenn die Anzeige kommt.

Tipps

So machen Sie es richtig

Bei einem Slot mit mehreren Größen verlangt Google, dass das div die Höhe der höchsten und die Breite der breitesten Anzeige hat.
Bei der Größenzuordnung wählt das GPT den größten passenden Bildschirmbereich und schaut zuerst auf die Breite, dann auf die Höhe. Hat die Zuordnung einen Fehler, kehrt es zu den Größen der Slot-Definition zurück.
Im offiziellen Beispiel für Lazy Loading holt Google Anzeigen in 5 Bildschirmen Entfernung, zeichnet sie bei 2 Bildschirmen und verdoppelt diese Werte auf dem Smartphone.
Um erst zu aktualisieren, nachdem die Anzeige gesehen wurde, empfiehlt die Dokumentation, auf das Ereignis für sichtbare Impressionen zu warten, impressionViewable.

Vorsicht

Häufige Fehler

Anderer div-Name

Der Name, der bei der Slot-Definition und beim Anzeigen übergeben wird, muss mit dem des divs übereinstimmen. Wenn nicht, erscheint die Anzeige einfach nicht.

div mit anderer Größe als die Anzeige

Google verlangt, dass Breite, Höhe und Name des div zu dem passen, was im Tag steht. Wenn sie nicht passen, erscheint die Anzeige womöglich nicht.

Keine bereite Werbebuchung

Ohne aktive Werbebuchung mit dem Status Bereit zeigt Ihr eigenes Inventar keine Anzeige, auch wenn der Code richtig ist.

Zuordnung, die das Smartphone leert

Im Google-Beispiel erhalten Bildschirme unter 640 mal 480 eine leere Liste und bleiben ohne Anzeige. Wenn Sie es unverändert kopieren, können Smartphones im Hochformat ohne Banner bleiben.

Häufige Fragen

Was ist der Unterschied zwischen mehreren Größen und responsiv?

Bei mehreren Größen kann jedes Maß der Liste auf jedem Bildschirm erscheinen. Beim responsiven Banner sagt die Größenzuordnung, welche Maße für welche Bildschirmbreite gelten.

Kann ich die fluide Größe bei einem normalen Banner nutzen?

Google erklärt, dass der einzige fluide Typ, den Ad Manager heute akzeptiert, die native Anzeige ist. Verwenden Sie für ein normales Banner eine feste Größe, mehrere Größen oder die Größenzuordnung.

Welche Mindestzeit gilt für die Aktualisierung einer Anzeige?

Im Web braucht die zeit- oder ereignisbasierte Aktualisierung mindestens 30 Sekunden. Die Aktualisierung durch eine Aktion des Nutzers hat kein Minimum. In allen Fällen muss sie in den Inventarregeln deklariert sein.

Lohnt sich Lazy Loading?

Google empfiehlt, Plätze unterhalb des sichtbaren Bereichs später zu laden, was vor allem auf dem Smartphone hilft, wo die Ressourcen kleiner sind. Die Plätze oben sollten Vorrang haben.

Bibliothek

Offizielle Google-Quelle

Alles auf dieser Seite folgt der offiziellen Google-Dokumentation. Lesen Sie direkt in der Quelle:

Nutzt Ihre Website dieses Format richtig?

Das Audit liest die Website wie ein Besucher, ohne etwas anzuklicken, und zeigt, was zu korrigieren ist.

Audit starten