Code für native Anzeigen hinzufügen

Wenn Sie sich für den HTML- und CSS-Editor entscheiden, werden die nativen Anzeigen mit HTML- und CSS-Code, den Sie hinzufügen, gestaltet und angepasst. In diesem Artikel liefern wir Ihnen einige Tipps und Codebeispiele.

Die so entstehenden nativen Creatives können als traditionelle Anzeigen ausgeliefert werden. Nur vom Publisher verwaltete Creatives für programmatisch garantierte Kampagnen werden als programmatische Anzeigen unterstützt. Wenn Sie native Creatives sowohl als herkömmliche Anzeigen als auch als alle Arten programmatischer Anzeigen ausliefern möchten, wählen Sie im interaktiven Designeditor die Option Mit Vorlagen beginnen und anpassen aus.

Beispiel für natives Design

Hier sehen Sie jeweils ein Beispiel für HTML und CSS in einem nativen Design für ein flexibles In-Feed-Placement. Dieses native Design basiert auf dem nativen Anzeigenformat "Gesponserter Beitrag” mit den Variablen "Headline", "Image" und "Body".

Codetyp Codebeispiel

HTML mit Variablen

Codetyp	Codebeispiel
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;
}

Bei diesem nativen Design werden native Creative-Komponenten umgewandelt:

Komponente	Beispiel
Anzeigentitel	The 30 Fastest Growing Jobs
Bild	jobs.jpg
Text	According to the U.S Bureau of Labor Statistics, these occupations will grow the most in the next 10 years. The list might surprise you.

Das Ergebnis könnte dann so aussehen:

Beispiel für eine native Anzeige

HTML

Fügen Sie ein HTML-Snippet hinzu, um festzulegen, wie die native Anzeige aussehen soll.

Möglicherweise müssen Sie Ihren Web- oder App-Entwickler um Unterstützung bitten, um den Code zu erzeugen.
Der HTML-Code kann JavaScript in den <script>-Tags enthalten.
Wenn Sie ein vollständiges HTML-Dokument einfügen, können in einigen Browsern (z. B. Internet Explorer) keine Anzeigen dargestellt werden. Fügen Sie daher nur das Snippet ein, das für die Anzeige relevant ist, und beispielsweise keine <doctype>- oder <html>-Tags (siehe obiges Beispiel).
Native Anzeigen übernehmen ihr Design nicht von der übergeordneten Seite, aber Sie können externe Stylesheets und Webschriftarten in die <link>-Tags im HTML-Code importieren.

Mit der Einstellung Zielfenster lässt sich steuern, ob native Anzeigen auf demselben Tab oder in einem neuen Fenster geöffnet werden, nachdem ein Nutzer darauf geklickt hat.

Für traditionelle Anzeigen wird die auf Anzeigenblockebene festgelegte Einstellung übernommen.
Für programmatische Anzeigen wird die auf Netzwerkebene festgelegte Einstellung übernommen.

Makros einfügen

Sie können auf Makro einfügen klicken und den HTML-Code mit folgenden Schaltflächen erstellen:

Cachebuster: Mit diesem Makro wird bei jeder Ausführung des Codes ein neuer Aufruf an den Ad-Server gesendet, sodass die Impressionen genau gezählt werden. Weitere Informationen zum Cachebuster-Makro
Klick (empfohlen): So erfassen Sie Klicks, wenn das Code-Snippet keine Sonderzeichen enthält. Weitere Informationen zum Klick-Makro
Klick-URL: Hiermit geben Sie die Zielseite des Creatives an, die bei einem Klick auf die Anzeige aufgerufen werden soll. Weitere Informationen zum Klick-URL-Makro
Klick-Makro mit Maskierung: So erfassen Sie Klicks, wenn die Klick-URL Ihres Code-Snippets Sonderzeichen (z. B. &, ? und %) enthält. Weitere Informationen zum Klick-Makro mit Maskierung
Video-Wrapper: Der Wrapper, der den Videoplayer für die native Anzeige enthält. Weitere Informationen zum Konfigurieren nativer Videodesigns

CSS

Geben Sie CSS-Code ein, um festzulegen, wie die native Anzeige aussehen soll. Sehen Sie sich das Beispiel oben an.

Verwenden Sie beim Trafficking nativer Anzeigen mit flexibler Größe keinen CSS-Code mit absoluter Positionierung.

War das hilfreich?

Wie können wir die Seite verbessern?

Code für native Anzeigen hinzufügen

HTML

Makros einfügen

CSS

War das hilfreich?

Benötigen Sie weitere Hilfe?

Mögliche weitere Schritte: