Code für native Anzeigen hinzufügen

Wenn Sie die HTML- und CSS-Editor -Option für native Anzeigen auswählen, fügen Sie HTML- und CSS-Code hinzu, um Ihre nativen Anzeigen anzupassen und zu gestalten. Dieser Artikel enthält Tipps und Beispiele zum Hinzufügen des Codes.

Die resultierenden nativen Creatives können als herkömmliche Anzeigen geschaltet werden ( Publisher-verwaltete Creatives für programmatisch garantierte Anzeigen sind die einzigen unterstützten programmatischen Anzeigen). Um native Creatives sowohl als herkömmliche Anzeigen als auch als alle Arten von programmatischen Anzeigen bereitzustellen, wählen Sie bitte die Option „Anpassbar für In-Feed" im Guided Design Editor aus.

Beispiel für nativen Stil

Hier ist ein Beispiel für HTML und CSS in einem nativen Stil für eine fließende In-Feed-Platzierung. Dieser native Stil basiert auf einem nativen Anzeigenformat „Sponsored Post" mit Headline-, Image- und Body-Variablen.

Codetyp Beispielcode

HTML mit Variablen

Codetyp	Beispielcode
HTML mit Variablen	`<div class="sponsored-post"> <div class="thumbnail"></div> <div class="content"> <h1><a href= "%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank"> [%Headline%] </a></h1> <p> [%Body%] </p> <div class="attribution">SPONSORED</div> </div> </div>`
CSS mit Variablen	.sponsored-post { background-color: #fffdeb; font-family: sans-serif; padding: 10px 20px 10px 20px; } .content { overflow: hidden; } .thumbnail { width: 120px; height: 100px; float: left; margin: 0 20px 10px 0; background-image: url( [%Image%] ); background-size: cover; } h1 { font-size: 18px; margin: 0; } a { color: #0086b3; text-decoration: none; } p { font-size: 16px; color: #444; margin: 10px 0 10px 0; } .attribution { color: #fff; font-size: 9px; font-weight: bold; display: inline-block; letter-spacing: 2px; background-color: #ffd724; border-radius: 2px; padding: 4px; }

  <div class="sponsored-post"> <div class="thumbnail"></div> <div class="content"> <h1><a href= "%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank"> [%Headline%] </a></h1> <p> [%Body%] </p> <div class="attribution">SPONSORED</div> </div> </div>

CSS mit Variablen

  .sponsored-post { background-color: #fffdeb; font-family: sans-serif; padding: 10px 20px 10px 20px; } .content { overflow: hidden; } .thumbnail { width: 120px; height: 100px; float: left; margin: 0 20px 10px 0; background-image: url( [%Image%] ); background-size: cover; } h1 { font-size: 18px; margin: 0; } a { color: #0086b3; text-decoration: none; } p { font-size: 16px; color: #444; margin: 10px 0 10px 0; } .attribution { color: #fff; font-size: 9px; font-weight: bold; display: inline-block; letter-spacing: 2px; background-color: #ffd724; border-radius: 2px; padding: 4px; }

Dieser native Stil konvertiert native Creative-Komponenten wie folgt:

Komponente	Beispiel
Überschrift	Die 30 am schnellsten wachsenden Jobs
Bild	Jobs.jpg
Körper	Laut dem US Bureau of Labor Statistics werden diese Berufe in den nächsten 10 Jahren am stärksten wachsen. Die Liste könnte Sie überraschen.

In eine native Anzeige, die so aussieht:

Ein Beispiel für eine native Anzeige

HTML

Fügen Sie ein HTML-Snippet hinzu, das angibt, wie Ihre native Anzeige erscheinen wird.

Möglicherweise müssen Sie mit Ihrem Web- oder App-Entwickler zusammenarbeiten, um den Code zu erstellen.
Ihr HTML kann JavaScript in <script> -Tags enthalten.
Bitte fügen Sie nur das für die Anzeige relevante Snippet ein, da das Einfügen eines vollständigen HTML-Dokuments die Anzeige von Anzeigen in einigen Browsern, einschließlich Internet Explorer, verhindert. Fügen Sie beispielsweise keine <doctype> - oder <html> -Tags ein – siehe obiges Beispiel .
Native Anzeigen übernehmen keine Stile von der übergeordneten Seite, aber Sie können externe Stylesheets und Webfonts mit <link> -Tags in den HTML-Code importieren.

Die Einstellung „Zielfenster" steuert, ob native Anzeigen nach dem Klicken auf derselben Registerkarte oder in einem neuen Fenster geöffnet werden.

Herkömmliche Anzeigen übernehmen die Einstellung auf Anzeigenblockebene.
Programmatische Anzeigen übernehmen die Einstellung auf Netzwerkebene.

Makros einfügen

Sie können auf Makro einfügen klicken und die folgenden Schaltflächen verwenden, um Ihren HTML-Code zu erstellen:

CacheBuster : Stellen Sie sicher, dass jedes Mal, wenn der Code ausgeführt wird, ein neuer Aufruf an den Ad-Server erfolgt, damit Sie die Impressionen genau zählen. Erfahren Sie mehr über CacheBuster .
Klick (empfohlen): Verfolgen Sie Klicks, wenn Ihr Code-Snippet keine Sonderzeichen enthält. Erfahren Sie mehr über klicken .
Klick-URL : Geben Sie die Zielseite des Motivs an, die erscheinen soll, wenn jemand auf die Anzeige klickt. Erfahren Sie mehr über Klick-URLs .
Klick mit Escapezeichen : Klicks verfolgen, wenn Ihr Code-Snippet Sonderzeichen (z. B. „&", „?", „%") in seiner Klick-URL enthält. Erfahren Sie mehr über entgangene Klicks .
Video-Wrapper : Der Wrapper, der den Videoplayer für die native Anzeige enthält. Erfahren Sie mehr darüber, wie Sie native Videostile konfigurieren .

CSS

Stellen Sie CSS-Code bereit, der angibt, wie Ihre native Anzeige erscheinen wird. Siehe obiges Beispiel .

Verwenden Sie beim Trafficking von nativen Anzeigen in flüssiger Größe bitte kein CSS für die absolute Positionierung.

Pc Support

Friday, January 6, 2023