Dynamisches Creative mit HTML5 erstellen - Studio-Hilfe [gg-richmedia-de]

Erstellen Sie ein dynamisches Creative mit HTML5

Um ein Creative dynamisch zu gestalten, verbinden Sie eine Liste verschiedener Inhaltsoptionen (normalerweise in einer Tabelle gespeichert) mit Containern in Ihrem Creative, die Text, Bilder oder Videos enthalten. Diese Container sind meistens divs oder andere HTML-Elemente.

Sie können auch andere Informationen aus der Tabelle an eine Variable in Ihrem Creative übergeben, die verwendet wird, um das Aussehen des Creatives zu steuern. Sie könnten beispielsweise drei farbige Themen (blau, grün und lila) in Ihrer Tabelle speichern und Regeln anwenden, die eines dieser Themen für eine bestimmte Zielgruppe auswählen, indem Sie Regeln verwenden, die in Ihrem dynamischen Profil eingerichtet sind. Wenn die Anzeige geliefert wird, übergibt die Regel eines der Farbthemen an Ihr Creative, und der Code Ihres Creatives zeigt Creative-Content, der zu diesem Farbthema passt.

Bevor Sie beginnen

Bevor Sie dynamische Daten mit Ihrem Creative verbinden können, müssen Sie zunächst die grundlegende Creative-Struktur entwerfen und den Text der Überschrift, Bilder und andere Designelemente planen, aus denen Ihre Anzeige besteht.

Wenn Sie Google Web Designer nicht verwenden, sollte Ihr Creative den Studio-Enabler enthalten und der erforderliche Code sollte bereits hinzugefügt sein, um Exits , Zähler oder Timer zu verfolgen . Um mehr zu erfahren, folgen Sie unseren Build-Anleitungen .

Erstellen Sie Ihr Creative in Google Web Designer? Folgen Sie stattdessen unserem Leitfaden zum Erstellen dynamischer Creatives mit Google Web Designer . Google Web Designer fügt automatisch den gesamten erforderlichen dynamischen Code für Sie ein.

Die folgenden Schritte führen Sie durch die Erstellung von Creatives mit anderer HTML-Bearbeitungssoftware.

Bestimmen Sie, welche Creative-Elemente dynamisch sind

Während der kreativen Konzeption sollten Sie festlegen, wie viele und welche Elemente der Anzeige Sie dynamisch austauschen möchten. Diese Elemente, die auch als dynamische Elemente bezeichnet werden, umfassen am häufigsten, sind aber nicht beschränkt auf:

• Text
• Bilder
• Exit-URLs
• Videos

Erstellen Sie eine dynamische Zuordnung

Um besser zu visualisieren, wie Feed-Content in das Creative passt, erstellen Sie eine dynamische Zuordnung, ein Mockup der Anzeige, das deutlich markiert, welche Elemente dynamisch sind. In der folgenden dynamischen Zuordnung können Sie beispielsweise sehen, dass es die folgenden dynamischen Elemente gibt: Überschriftentext, Produktbild, Call-to-Action (CTA) und Angebotstext. An der Seite befinden sich außerdem nützliche Hinweise.

Schritt 1: Fügen Sie den Setup-Code aus Studio ein

Nachdem Sie ein Profil in Studio eingerichtet haben, müssen Sie dieses Profil mit Ihrem HTML5-Creative verknüpfen, um dynamische Funktionen zu erstellen. Dazu kopieren Sie den Einrichtungscode aus Schritt 4: Code generieren auf der Registerkarte „Dynamischer Inhalt" in Studio. Wählen Sie die HTML5 -Schaltfläche aus, kopieren Sie den generierten HTML5-Code und fügen Sie ihn in Ihr Creative ein.

Die folgenden JavaScript-Codebeispiele können entweder inline in der HTML-Datei oder in einer separaten JS-Datei vorhanden sein.

Beispiel-Setup-Code aus Schritt 4: Code generieren

<!-- DynamicContent Start: HTML5 invocation code. -->
// Dynamic Content variables and sample values
Enabler.setProfileId(12345);
var devDynamicContent = {};
devDynamicContent.SampleElement = [{}];
devDynamicContent.SampleElement[0]._id = 0;
devDynamicContent.SampleElement[0].headline = "Some headline";
devDynamicContent.SampleElement[0].image_url = {};
devDynamicContent.SampleElement[0].image_url.Url =
"http://yourServer/sample.jpg";
devDynamicContent.SampleElement[0].landing_url = {};
devDynamicContent.SampleElement[0].landing_url.Url =
"http://www.yoursite.com";
Enabler.setDevDynamicContent(devDynamicContent);

<!--
* You may access the variables in the following manner
* AFTER the Studio Enabler is initialized:
* var price = dynamicContent.Product[0].price;
* Note: be sure to use "dynamicContent", not "devDynamicContent"
-->

Schritt 2: Verbinden Sie die dynamischen Daten

Fügen Sie den Code hinzu, um die dynamischen Daten mit den einzelnen Elementen in Ihrem Creative zu verbinden, z. B. Text, Bilder und Exit-URLs. Stellen Sie sicher, dass Sie den Code hinzufügen, nachdem der Enabler bereits initialisiert wurde.

Verwenden Sie beim Schreiben von Code, der auf dynamische Daten zugreift, dynamicContent und nicht devDynamicContent , wie im obigen Setup-Code angegeben und in den folgenden Beispielen gezeigt.

Beispielcode mit dynamischen Daten

Beispiel: Dynamischen Text einstellen

  document.getElementById('headline').innerHTML =  dynamicContent.SampleElement[0].headline;

Beispiel: Einstellen eines dynamischen Bildes

document.getElementById('background').src =
dynamicContent.SampleElement[0].image_url.Url

Beispiel: Festlegen einer dynamischen Click-through-URL

document.getElementById('cta').addEventListener('click', ctaHandler);

function ctaHandler() {
Enabler.exitOverride(
"yourExitID",
dynamicContent.SampleElement[0].landing_url.Url);
}

Die obigen Beispiele verweisen direkt auf den dynamischen Inhalt. Ein alternativer Ansatz besteht darin, ein Objekt zu erstellen, die dynamischen Elemente dem Objekt als Eigenschaften hinzuzufügen und dann direkt auf die Eigenschaften des Objekts zu verweisen. Dadurch kann Ihr Code leichter zu lesen und zu ändern sein. Siehe folgendes Beispiel:

Beispiel:

var data = {};
data.headline = dynamicContent.SampleElement[0].headline;

und dann, später in Ihrem Code:

document.getElementById('headline').innerHTML = data.headline;

Schritt 3: Testen Sie verschiedene dynamische Werte

Bevor Sie Ihr Creative in Studio hochladen, sollten Sie verschiedene mögliche Werte für den dynamischen Inhalt testen. Suchen Sie im Feed nach einer Reihe von Werten, die Sie testen können. beispielsweise unterschiedliche URLs für dynamische Bilder oder unterschiedliche Zeichenfolgen für Text, insbesondere Grenzfälle wie extra langer (oder kurzer) Text. Geben Sie jeden Wert in den Einrichtungscode Ihres Creatives ein und sehen Sie sich die Ergebnisse in der Vorschau an. Auf diese Weise können Sie Probleme frühzeitig erkennen, anstatt darauf zu warten, dass sie in der QA erfasst werden.

Außerdem möchten Sie möglicherweise die Werte im Setup-Code ändern, damit klar ist, dass es sich um Entwicklungswerte handelt:

<!-- DynamicContent Start: HTML5 invocation code. -->
// Dynamic Content variables and sample values
// ...
devDynamicContent.SampleElement[0].headline = "Default headline";

Dadurch wird beim Anzeigen des Creatives in der dynamischen Vorschau (oder mit einem Live-Tag) deutlich, ob das Creative keine „echten" dynamischen Daten verwendet, sondern stattdessen die Entwicklungswerte aus dem Einrichtungscode verwendet.

Nächster Schritt : Laden Sie Ihre Creative-Assets in Studio hoch