Podczas tworzenia kreacji wyświetlanych na podstawie danych możesz użyć wbudowanych formatów kreacji lub utworzyć własny format niestandardowy, który będzie używany w obszarze roboczym reklamy. Jeśli chcesz mieć pełną kontrolę nad kreacjami lub musisz ściśle przestrzegać wskazówek dotyczących promowania marki, lepiej sprawdzi się format niestandardowy. Możesz go utworzyć za pomocą dynamicznych wiązań w aplikacji Google Web Designer. Aby zaoszczędzić czas, możesz też zacząć od wbudowanego formatu i dowolnie go dostosować.
Formaty niestandardowe mogą mieć jeden rozmiar lub być elastyczne.
Po utworzeniu formatu niestandardowego możesz przesłać go i wykorzystać do utworzenia nowej kreacji wyświetlanej na podstawie danych albo otworzyć istniejącą kreację wyświetlaną na podstawie danych i zastąpić wbudowany format swoim formatem niestandardowym. Aby dokończyć tworzenie nowej kreacji, uzupełnij jej zasoby i inne szczegóły.
Ograniczenia
- Formaty niestandardowe kreacji wyświetlanych na podstawie danych będą obsługiwać tylko dynamiczne adresy URL. Aby utworzony przez Ciebie format niestandardowy był zgodny z obszarem roboczym reklamy, musisz powiązać każdy adres URL wyjścia z obiektem danych adresu URL za pomocą komponentu „Obszar kliknięcia”.
- Formaty niestandardowe mogą być tylko kreacjami rich media obsługiwanymi przez Display & Video 360 (nie mogą to być reklamy pełnoekranowe, kreacje rozwijane ani inne nieobsługiwane formaty).
- Funkcja Wyodrębnij i połącz aplikacji Google Web Designer nie jest jeszcze obsługiwana w obszarze roboczym reklamy. Jeśli przy tworzeniu niestandardowego formatu jako wiązania danych użyjesz w karuzelach lub galeriach przesuwanych opcji „Wyodrębnij i połącz” lub „Wyodrębnij i połącz: URL obrazu”, układ będzie bezużyteczny w obszarze roboczym reklamy.
- Pliki wideo nie są obsługiwane w przypadku formatów niestandardowych.
Krok 1. Dopasuj elementy kreacji dynamicznej do schematu danych
Aby utworzyć format niestandardowy, musisz najpierw zdecydować, które elementy kreacji mają być dynamiczne i możliwe do edytowania w obszarze roboczym reklamy, a potem powiązać je ze schematem Świadomość marki. Jeśli kreacja zawiera elementy, które nie powinny być edytowane, nie dodawaj do nich wiązań.
- Przejrzyj schemat i określ właściwe mapowanie elementów na obiekty schematu danych.
- Sporządź listę wszystkich elementów dynamicznych, a potem zapisz obok każdego z nich obiekt schematu danych, z którym ma być powiązany. Pamiętaj, by wybrać obiekty schematu danych, które mają ten sam typ pola co dany element. Jeśli na przykład ustawiasz obraz jako dynamiczny, powiąż go z zasobem graficznym (obrazem akcentującym, logo lub obrazem tła).
Jeśli użyjesz formatu do utworzenia nowej kreacji, w panelu zasobów w obszarze roboczym reklamy możesz edytować tylko powiązane elementy dynamiczne. Jeśli na przykład chcesz, by w obszarze roboczym reklamy można było edytować tylko nagłówek kreacji, powiąż pole tekstu nagłówka w aplikacji Google Web Designer z obiektem „headline” w schemacie Świadomość marki. Jeśli utworzysz kreację, używając formatu z tego przykładu, w panelu Tekst będzie widoczne tylko pole Nagłówek. Nie będzie można edytować żadnych innych elementów kreacji.
Schemat Świadomość marki| Etykieta w obszarze roboczym reklamy | Typ pola | Obiekt schematu danych | Cyfry |
|---|---|---|---|
| ZASOBY GRAFICZNE | |||
| Obraz akcentujący | IMAGE* | accentImage | Tablica 1–10 |
| Logo | IMAGE* | logo | 1 |
| Obraz tła | IMAGE* | backgroundImage | 1 |
| ZASOBY TEKSTOWE | |||
| Tytuł | TEXT | title | 1 |
| Podtytuł | TEXT | subtitle | 1 |
| Nagłówek | RICH_TEXT* | headline | 1 |
| Opis | RICH_TEXT* | description | Tablica 1–10 |
| Dodatkowy tekst | RICH_TEXT* | additionalText | Tablica 1–10 |
| Slogan | RICH_TEXT* | tagline | 1 |
| Tekst zwiastuna | RICH_TEXT* | teaserText | 1 |
| Wezwanie do działania | <container> | callToAction | Tablica 1–10 |
| COLOR | callToAction.0.buttonColor | 1 | |
| Treść | RICH_TEXT* | callToAction.0.content | 1 |
| Adres URL strony docelowej | URL | callToAction.0.exitUrl | 1 |
| STYL | |||
| Kolor tła | COLOR | backgroundColor | 1 |
| Kolor podstawowy | COLOR | primaryStyle.color | 1 |
| Kolor dodatkowy | COLOR | secondaryStyle.color | 1 |
| INNE | |||
| Adres URL tła strony docelowej | URL | backgroundLandingPageUrl | 1 |
* Te pola zawierają pola podrzędne. Więcej informacji znajdziesz w sekcji „Typy pól podrzędnych”.
Typy pól podrzędnych
Niektóre typy pól zawierają dodatkowe właściwości podrzędne, które możesz wiązać z elementami HTML w swojej kreacji. Aby np. powiązać element graficzny w kreacji z obrazem tła w schemacie Świadomość marki, dodaj takie dynamiczne wiązanie: imageElementID > Źródło > backgroundImage.Url.
| Typ pola podrzędnego | Obiekt schematu danych |
|---|---|
| IMAGE | |
| URL | .Url |
| RICH_TEXT | |
| TEXT | .text |
| COLOR | .style.color |
Wezwania do działania
Obiekt callToAction to tablica, która może zawierać maksymalnie 10 niepowtarzalnych wezwań do działania, każde z własnym adresem URL, tekstem i kolorem.
Krok 2. Utwórz kreację
Po zakończeniu mapowania utwórz kreację w aplikacji Google Web Designer. Możesz zacząć od zera lub skorzystać z szablonu kreacji wyświetlanej na podstawie danych („Pusta plansza”, „Karty wskazówek” lub „Panorama”). Szablony kreacji wyświetlanych na podstawie danych oszczędzają czas, ponieważ dynamiczne wiązania są już w nich skonfigurowane.
Tworzenie kreacji elastycznych w aplikacji Google Web Designer
Build responsive ads in Google Web Designer
Otwieranie pełnej playlisty w YouTube
Wybieranie schematu danych
Gdy układ będzie gotowy, połącz elementy kreacji dynamicznej ze schematem danych, korzystając z mapowania utworzonego zgodnie z opisem podanym powyżej. Jeśli korzystasz z istniejącego układu opartego na danych, możesz pominąć ten krok.
- Otwórz panel Dynamiczny i kliknij Dodaj dynamiczne wiązania
. (Jeśli panel „Dynamiczny” jest niewidoczny, otwórz menu „Okno” i upewnij się, że obok pozycji Dynamiczny znajduje się znacznik wyboru).
- Na karcie Schemat danych w oknie dialogowym „Właściwości dynamiczne” wybierz typ schematu Schemat standardowy.
- Potem wybierz schemat danych Świadomość marki. Otworzy się karta „Wiązania”.
. (Jeśli panel „Dynamiczny” jest niewidoczny, otwórz menu „Okno” i upewnij się, że obok pozycji Dynamiczny znajduje się znacznik wyboru).Po wybraniu schematu danych wyświetli się karta „Wiązania” z pierwszym wiązaniem oczekującym na skonfigurowanie.
Tworzenie wiązań danych
Jeśli zaczynasz od zera lub do kreacji zostały dodane nowe elementy dynamiczne, utwórz w panelu „Właściwości dynamiczne” wiązania danych między atrybutami elementu a konkretnymi typami danych. W interaktywnym oknie dialogowym „Właściwości dynamiczne” możesz wybrać element, jego dynamicznie modyfikowany atrybut oraz obiekt schematu danych, który będzie z nim powiązany.
- (Opcjonalnie) Włącz filtrowanie widocznych elementów, wybierając „Bieżąca strona” lub „Zaznaczenie” w menu „Pokaż”.
- W kolumnie elementów wybierz ten element, z którym chcesz powiązać dane z pliku danych.
- W kolumnie atrybutów elementu wybierz ten atrybut, z którym chcesz powiązać dane z pliku danych. Wyświetli się lista atrybutów, które można powiązać w przypadku wybranego elementu, w tym zarówno atrybutów stylu, jak i atrybutów specyficznych dla danego typu elementu HTML.
- W kolumnie obiektów schematu danych wybierz obiekt danych.
- Kliknij Dodaj powiązanie, by powiązać dane z kolejnym elementem w reklamie, lub kliknij OK, jeśli wszystko jest już gotowe.
Więcej informacji o dodawaniu i usuwaniu powiązań danych w aplikacji Google Web Designer
Tworzenie dynamicznego wezwania do działania
Komponent Obszar kliknięcia dostępny w aplikacji Google Web Designer pozwala zainicjować dowolną czynność dotknięciem lub kliknięciem, dlatego często używa się go, by utworzyć wezwanie do działania. Zazwyczaj są to statyczne linki do strony, ale w przypadku kreacji wyświetlanej na podstawie danych możesz użyć powiązania dynamicznego, by ustawić inny link dla każdego segmentu odbiorców.
- W panelu Dynamiczny na karcie Wiązania kliknij Dodaj dynamiczne wiązania
- Na karcie Wiązania w oknie dialogowym „Właściwości dynamiczne” kliknij Dodaj powiązanie.
- W polu Element wybierz Obszar kliknięcia wezwania do działania.
- Jako Atrybut elementu wybierz Zastępczy adres URL wyjścia.
- Z menu Obiekt schematu danych wybierz dane dynamicznego adresu URL (np. Produkt 0 > URL).
- Aby prawidłowo rejestrować dynamiczne wyjścia, dodaj identyfikatory danych wyjścia tła lub wezwania do działania. Te identyfikatory danych będą odpowiadać nazwom zdarzeń widocznych w raportach dotyczących kampanii oraz w szczegółach kreacji w Display & Video 360. Używaj nazw, które pozwolą łatwo ustalić, co użytkownik kliknął, aby wywołać zdarzenie.
- Włącz widok kodu i przejdź do kodu obszaru kliknięcia (zaczynającego się od
<gwd-taparea). - Dodaj właściwość
exit-iddo tagu<gwd-taparea>. - Właściwość
exit-idpowinna mieć ustawioną jedną z tych dwóch wartości:backgroundExitlubctaExit.
- Włącz widok kodu i przejdź do kodu obszaru kliknięcia (zaczynającego się od
Przykład
<gwd-taparea id="cta-taparea" exit-id="ctaExit" class="gwd-taparea-ismw" bind-exit-override-url="callToAction.0.exitUrl" bind-style-background-color="callToAction.0.buttonColor" bind-show="callToAction.0.content.text"></gwd-taparea>Opcjonalnie: użycie pliku danych do utworzenia podglądu dynamicznego
Gdy wyświetlisz podgląd formatu dynamicznego w aplikacji Google Web Designer, początkowo ma on taką samą postać jak podczas projektowania – zawiera obrazy zastępcze, zastępczy tekst i inne zastępcze elementy. Aby zobaczyć, jak wygląda on z zastosowaniem faktycznych treści z Twojego dynamicznego pliku danych, musisz dodać przykładowy plik danych (lub kilka plików) do folderu „feeds” w projekcie w aplikacji Google Web Designer.
Przykładowy plik danych to dokument JSON zawierający takie informacje jak tekst czy obrazy związane z projektem lub produktem. Najpierw pobierz przykładowy plik danych.
Aby zaimportować przykładowy plik danych:
- Otwórz panel Dynamiczny i kliknij kartę Przykładowe dane. W dolnej części panelu kliknij Importuj przykładowe dane
-
Możesz też przenieść pobrany plik JSON do podfolderu „feeds” projektu w aplikacji Google Web Designer. Kliknij Odśwież
w panelu Dynamiczny, by nowe przykładowe dane pojawiły się w aplikacji Google Web Designer.
w panelu Dynamiczny, by nowe przykładowe dane pojawiły się w aplikacji Google Web Designer.Aby wyświetlić podgląd przykładowych danych z pliku na scenie, wybierz nazwę pliku danych dodaną na karcie Przykładowe dane w panelu Dynamiczny.
Jeśli wyświetlasz podgląd w przeglądarce, przykładowy plik danych, którego podgląd chcesz wyświetlić, możesz wybrać w menu Przykładowe dane u góry strony. (Domyślnie wyświetlane są osobne podglądy ze wszystkimi dostępnymi przykładowymi plikami danych. Aby ukryć pliki danych, których podglądu nie chcesz wyświetlać, wyłącz je w menu Przykładowe dane).
Dalsze kroki
Po utworzeniu i przetestowaniu formatu niestandardowego możesz przesłać go do Display & Video 360.
