Tworzenie kreacji dynamicznej w HTML5

Aby utworzyć kreację dynamiczną, musisz powiązać różne dynamiczne elementy treści (zazwyczaj zapisane w arkuszu kalkulacyjnym) ze znajdującymi się w kreacji „kontenerami” obsługującymi tekst, obrazy lub filmy. Te „kontenery” to elementy div lub inne elementy HTML.

Możesz również przekazać inne informacje z arkusza kalkulacyjnego do zmiennej, która służy do kształtowania wyglądu kreacji. Możesz na przykład przygotować w arkuszu kalkulacyjnym trzy kolorowe motywy (niebieski, zielony i fioletowy) i zastosować reguły, które będą wybierać jeden z tych motywów dla określonej grupy odbiorców za pomocą zasad skonfigurowanych w profilu dynamicznym. Gdy reklama będzie miała się wyświetlić, reguła przekaże jeden z kolorów do kreacji, a kod kreacji dołączy treść pasującą do tego motywu.

Zanim zaczniesz

Zanim powiążesz dane dynamiczne z kreacją, musisz zaprojektować podstawową strukturę kreacji: zaplanować treść nagłówka, obrazy i inne elementy, które tworzą reklamę.

Jeśli nie korzystasz z Google Web Designera, kreacja powinna zawierać komponent Studio Enabler, a kod powinien być wcześniej skonfigurowany do śledzenia wyjść, liczników zdarzeń i liczników czasu. Więcej informacji znajdziesz w instrukcjach tworzenia kreacji.

Tworzysz kreację w aplikacji Google Web Designer? Przeczytaj zamiast tego nasz przewodnik tworzenia kreacji dynamicznych w programie Google Web Designer. Google Web Designer automatycznie doda do kreacji wszystkie niezbędne elementy dynamicznego kodu.

Poniższe wskazówki przeprowadzą Cię przez proces tworzenia kreacji za pomocą innego oprogramowania do edycji HTML.

Określ, które elementy kreacji są dynamiczne

Gdy opracowujesz kreację, zdecyduj, ile elementów reklamy i które z nich chcesz wymieniać dynamicznie. Są one nazywane elementami dynamicznymi. Należą do nich między innymi:

tekst,
obrazy,
wyjściowe adresy URL,
filmy.

Utwórz mapę zawartości dynamicznej

Aby zwizualizować sobie, w których miejscach kreacji pojawia się zawartość pliku danych, utwórz mapę zawartości dynamicznej. To model reklamy, który w zrozumiały sposób oznacza elementy dynamiczne. Na przykład na poniższej mapie zawartości dynamicznej widać takie elementy dynamiczne: tekst nagłówka, zdjęcie produktu, wezwanie do działania i tekst oferty. Z boku znajdują się również przydatne uwagi.

Krok 1: Wklej kod konfiguracji ze Studio

Po przygotowaniu profilu w Studio musisz połączyć go z kreacją HTML5, by dodać funkcje dynamiczne. Możesz to zrobić przez skopiowanie kodu konfiguracji z karty Krok 4: Wygeneruj kod na karcie Treści dynamiczne w Studio. Kliknij przycisk HTML5, skopiuj wygenerowany kod HTML5 i wklej go w kreacji.

Pokazane poniżej przykładowe fragmenty kodu JavaScript mogą znajdować się zarówno w pliku HTML, jak i w oddzielnym pliku JS.

Przykładowy kod konfiguracji z Kroku 4: Wygeneruj kod


// Zmienne zawartości dynamicznej i przykładowe wartości
Enabler.setProfileId(12345);
var devDynamicContent = {};
devDynamicContent.SampleElement = [{}];
devDynamicContent.SampleElement[0]._id = 0;
devDynamicContent.SampleElement[0].headline = "Nagłówek";
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);

Krok 2: Połącz dane dynamiczne

Dodaj kod, by połączyć dynamiczne dane z poszczególnymi elementami w kreacji takimi jak tekst, obrazy czy adresy URL wyjścia. Pamiętaj, by dodać go po zainicjowaniu komponentu Enabler.

Podczas pisania kodu uzyskującego dostęp do danych dynamicznych użyj zmiennej dynamicContent, a nie devDynamicContent, jak zaznaczono w sekcji dotyczącej kodu konfiguracji powyżej i pokazano w poniższych przykładach.

Przykładowy kod korzystający z danych dynamicznych

Przykład: ustawianie tekstu dynamicznego

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

Przykład: ustawianie obrazu dynamicznego

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

Przykład: ustawianie dynamicznego docelowego adresu URL

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

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

Kody z powyższych przykładów bezpośrednio odwołują się do zawartości dynamicznej. Możesz też utworzyć obiekt, dodać do niego elementy dynamiczne jako właściwości, a potem ustawić bezpośrednie odwołanie do tych właściwości. Może to ułatwić odczytywanie i modyfikowanie kodu. Zobacz poniższy przykład:

Przykład:

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

a potem, w dalszej części kodu:

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

Krok 3: Przetestuj różne wartości dynamiczne

Przed przesłaniem kreacji do Studio warto przetestować różne możliwe wartości zawartości dynamicznej. Wyszukaj w pliku danych zestaw wartości do testu, na przykład różne adresy URL obrazów dynamicznych czy różne treści tekstowe. Wybierz w szczególności przypadki skrajne, na przykład bardzo długi (lub krótki) tekst. Umieść każdą wartość w kodzie konfiguracji w kreacji i obejrzyj wyniki. Pomoże Ci to wykryć problemy z wyprzedzeniem, zamiast czekać, aż wyjdą podczas kontroli jakości.

Możesz też zmienić wartości w kodzie konfiguracji, tak by było jasne, że są to wartości zaprogramowane:


// Zmienne zawartości dynamicznej i przykładowe wartości
// ...
devDynamicContent.SampleElement[0].headline = "Nagłówek domyślny";

Dzięki temu podczas wyświetlania kreacji na podglądzie dynamicznym (lub za pomocą aktywnego tagu) będzie jasne, że kreacja nie używa „prawdziwych” danych dynamicznych, lecz wartości zaprogramowanych z kodu konfiguracji.

Kolejny krok: przesyłanie zasobów kreacji do Studio

Czy to było pomocne?

Jak możemy ją poprawić?