Wenn Sie ein dynamisches Creative erstellen möchten, müssen Sie eine Liste verschiedener Content-Optionen (üblicherweise in Tabellenform gespeichert) mit Containern in Ihrem Creative verbinden, die Text, Bilder und Videos enthalten. Bei diesen Containern handelt es sich um div- oder andere HTML-Elemente.
Sie können auch andere Informationen aus der Tabelle an eine Variable in Ihrem Creative übergeben. Diese steuert, wie das Creative aussieht. So könnten Sie beispielsweise drei Farbdesigns (blau, grün und lila) in der Tabelle speichern und anhand von Regeln in Ihrem dynamischen Profil festlegen, welches Design für eine bestimmte Zielgruppe angewendet werden soll. Wenn die Anzeige ausgeliefert wird, wird eines der Farbdesigns an Ihr Creative übergeben und es wird Creative-Content im ausgewählten Farbdesign angezeigt.
Bevor Sie beginnen
Bevor Sie dynamische Daten mit Ihrem Creative verbinden können, müssen Sie die grundlegende Creative-Struktur erstellen und die Anzeigentitel, Bilder und sonstigen Designelemente Ihrer Anzeige vorbereiten.
Wenn Sie Google Web Designer nicht nutzen, sollte Ihr Creative den Studio-Enabler und den erforderlichen Code für das Erfassen von Exits, Zählern und Timern enthalten. Weitere Informationen finden Sie in useren Erstellungsanleitungen.
In den folgenden Anleitungen erfahren Sie, wie Sie Creatives mit anderen HTML-Editoren erstellen.
Dynamische Creative-Elemente ermitteln
Bei der Planung des Creative-Konzepts sollten Sie sich überlegen, wie viele und welche Elemente der Anzeige Sie dynamisch ersetzen möchten. Diese Elemente, die auch als dynamische Elemente bezeichnet werden, enthalten meistens, aber nicht ausschließlich, Folgendes:
- Text
- Images
- Exit-URLs
- Videos
Übersicht der dynamischen Elemente erstellen
Um sich besser vorstellen zu können, wie der Feedcontent in das Creative integriert wird, sollten Sie eine Übersicht des dynamischen Contents erstellen. Das ist eine Art Modell der Anzeige, in dem die dynamischen Elemente klar aufgeführt sind. Die Übersicht unten enthält folgende dynamische Elemente: den Anzeigentitel, das Produktbild, den CTA (Call-to-Action) und den Angebotstext. Es gibt auch nützliche Hinweise auf der Seite.
Schritt 1: Einrichtungscode aus Studio einfügen
Nachdem Sie ein Profil in Studio eingerichtet haben, muss dieses Profil mit Ihrem HTML5-Creative verknüpft werden, damit die dynamischen Funktionen genutzt werden können. Kopieren Sie dazu einfach den Einrichtungscode aus Schritt 4: Code generieren in Studio auf dem Tab "Dynamischer Content". Wählen Sie die Option HTML5 aus, kopieren Sie den erstellten HTML5-Code und fügen Sie ihn in das Creative ein.
Der JavaScript-Code in den unten genannten Beispielen kann inline in der HTML-Datei oder in einer separaten JS-Datei enthalten sein.
Beispiel für den Einrichtungscode aus "Schritt 4: Code generieren"<!-- DynamicContent Start: HTML5 invocation code. -->// Dynamic Content variables and sample valuesEnabler.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://MeinServer/beispiel.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: Dynamische Daten verbinden
Fügen Sie den Code hinzu, um die dynamischen Daten mit den einzelnen Elementen in Ihrem Creative, wie Text, Bilder und Exit-URLs, zu verbinden. Der Code darf erst hinzugefügt werden, wenn der Enabler bereits initialisiert wurde.
Wenn Sie Code schreiben, mit dem auf dynamische Daten zugegriffen wird, verwenden Sie, wie oben im Einrichtungscode beschrieben und unten in den Beispielen zu sehen, dynamicContent und nicht devDynamicContent.
Beispiel: dynamischen Text festlegen
document.getElementById('headline').innerHTML =
dynamicContent.SampleElement[0].headline;
Beispiel: dynamisches Bild festlegen
document.getElementById('background').src =
dynamicContent.SampleElement[0].image_url.URL
Beispiel: dynamische Klick-URL festlegen
document.getElementById('cta').addEventListener('click', ctaHandler);
function ctaHandler() {
Enabler.exitOverride(
"yourExitID",
dynamicContent.SampleElement[0].landing_url.Url);
}
Beispiel:
var data = {};
data.headline = dynamicContent.SampleElement[0].headline;
Im Code eingebettet:
document.getElementById('headline').innerHTML = data.headline;
Schritt 3: Verschiedene dynamische Werte testen
Bevor Sie das Creative in Studio hochladen, sollten Sie verschiedene Werte für dynamische Inhalte testen. Im Feed erhalten Sie einige Werte, die Sie testen können. Dies sind beispielsweise verschiedene URLs für dynamische Bilder oder unterschiedliche Strings für Text, vor allem für Grenzfälle, also sehr langen oder sehr kurzen Text. Fügen Sie jeden Wert im Creative in den Einrichtungscode ein und rufen Sie eine Vorschau der Ergebnisse auf. Fügen Sie jeden Wert in den Einrichtungscode in Ihrem Creative ein und rufen Sie eine Vorschau der Ergebnisse auf. So lassen sich Probleme vorzeitig und nicht erst in der QA erkennen.
Achten Sie auch darauf, die Werte im Einrichtungscode so zu ändern, dass sie als Entwicklungswerte erkennbar sind:
<!-- DynamicContent Start: HTML5 invocation code. -->
// Dynamic Content variables and sample values
// ...
devDynamicContent.SampleElement[0].headline = "Default headline";
So wird beim Aufruf des Creatives in der dynamischen Vorschau oder mit einem Live-Tag ersichtlich, dass für das Creative keine "echten" dynamischen Daten, sondern die Entwicklungswerte aus dem Einrichtungscode verwendet werden.