Tworzenie kreacji rozwijanej w programie Google Web Designer

Reklama rozwijana początkowo ma taki rozmiar jak jej boks reklamowy. Gdy użytkownik wejdzie w interakcję z reklamą (np. kliknie przycisk), rozwija się ona poza boks, by wyświetlić więcej treści. Aby utworzyć reklamę rozwijaną w programie Google Web Designer, możesz zacząć od pustego pliku lub otworzyć gotowy szablon i dodać do niego własny tekst, obrazy oraz inne zasoby.

Pusty plik

Krok 1. Utwórz nowy plik.

Aby w Google Web Designer utworzyć nową kreację rozwijaną z filmem:

Otwórz Google Web Designer i kliknij kolejno Plik > Nowy plik. Wyświetli się okno „Utwórz nowy pusty plik”.
Na liście Reklamy wybierz Rozwijana.
Jako Środowisko wybierz Display & Video 360.
Ustaw wymiary zwiniętej i rozwiniętej reklamy.
Nazwij kreację. Będzie to nazwa pliku HTML.
Wybierz lokalizację na komputerze, w której chcesz zapisać pliki z Google Web Designer. Podaj ścieżkę do lokalizacji lub kliknij ikonę wyszukiwania, by wskazać odpowiedni folder.
Ustaw Tryb animacji:
1. Szybki: umożliwia animowanie scena po scenie. Więcej informacji znajdziesz w artykule o tworzeniu animacji w trybie szybkim w Centrum pomocy Google Web Designer.
2. Zaawansowany: pozwala animować poszczególne elementy na odrębnych osiach czasu. Więcej informacji znajdziesz w artykule o tworzeniu animacji w trybie zaawansowanym w Centrum pomocy Google Web Designer.
Kliknij OK.

Google Web Designer tworzy początkowe strony – zwiniętą i rozwiniętą (określane jako strona baneru i strona rozwinięta). Automatycznie dodaje do strony zwiniętej zdarzenie obszaru kliknięcia, które rozwija reklamę, a do strony rozwiniętej – zamykający obszar kliknięcia, który z powrotem zwija reklamę. Początkowy kod wymagany do komunikacji między reklamą a serwerem reklam oraz zbierania danych śledzenia także zostaje dodany automatycznie.

Krok 2. Utwórz stronę baneru.

Aby skonfigurować zwiniętą reklamę na stronie baneru:

Zaimportuj obrazy, przeciągając je na scenę, lub przeciągnij je z panelu Biblioteka zasobów.
(Opcjonalnie) Utwórz animacje i dodaj do strony wbudowane lub niestandardowe komponenty.
Gdy baner będzie gotowy, wybierz komponent obszaru kliknięcia i kliknij przycisk „Przesuń na wierzch”.
Zapisz kreację.

Aby kreacja rozwijała się po najechaniu myszą:

Otwórz panel Zdarzenia, kliknij przycisk +, by dodać zdarzenie najechania myszą.
Jako element docelowy wybierz expand-button.
Jako zdarzenie wybierz kolejno Mysz > mouseover.
Jako działanie wybierz kolejno Reklama Google > Przejdź do strony.
Jako odbiornik wybierz gwd-ad.

Więcej informacji o korzystaniu ze zdarzeń w programie Google Web Designer

Krok 3. Utwórz stronę rozwiniętą.

Przełącz się na Stronę rozwiniętą, korzystając ze wskaźnika strony widocznego u dołu sceny.
Zaimportuj obrazy, przeciągając je na scenę, lub przeciągnij je z panelu Biblioteka zasobów.
(Opcjonalnie) Utwórz animacje i dodaj do strony wbudowane lub niestandardowe komponenty.
Zapisz.

Dodawanie wezwania do działania

Upewnij się, że reklama ma przycisk lub inny dobrze widoczny element z wezwaniem do działania, który użytkownik może kliknąć.
Przeciągnij komponent Obszar kliknięcia z folderu Interakcja w panelu Komponenty na scenę i umieść go na wezwaniu do działania.
Na panelu Zdarzenia kliknij przycisk nowego zdarzenia .

W oknie zdarzenia wybierz te opcje:

Element docelowy	Komponent Obszar kliknięcia (`gwd-taparea_1`)
Zdarzenie	Obszar kliknięcia > Kliknięcie
Działanie	Reklama Google > Zamknij reklamę _{Uwaga: podobne działanie – Zamknij reklamę (zastępuje adres URL) – nie pozwala na wprowadzanie zmian w adresie URL poza kreacją, np. w usłudze Studio lub Campaign Manager 360, i należy używać go wyłącznie na potrzeby reklam dynamicznych.}
Odbiornik	`gwd-ad`
Konfiguracja	Identyfikator danych – etykieta (np. „wezwanie do działania”) ułatwiająca zrozumienie raportów. URL – adres URL wyjścia. Zwiń przy zamknięciu – w przypadku reklam rozwijanych zaznacz, by reklama zwijała się, gdy użytkownik ją zamknie. Wstrzymaj multimedia przy wychodzeniu – zaznacz, by w momencie, gdy użytkownik zamknie reklamę, następowało zatrzymanie odtwarzania filmu i dźwięku. Zwinięta strona przy zamknięciu – w przypadku reklam rozwijanych zaznacz, by wyświetlić stronę, gdy użytkownik zamknie reklamę.

Opcjonalnie: dodawanie filmu

Jeśli do kreacji chcesz dodać film, użyj komponentu wideo lub YouTube. W przypadku filmu przechowywanego w YouTube użyj komponentu YouTube. W przeciwnym razie użyj komponentu wideo, który działa z tymi zgodnymi formatami wideo HTML5:

.MP4
.OGG/OGV
.WEBM

Szablon

Szablony to gotowe reklamy, które mają popularne rozmiary, stylistykę i cechy. Aby szybko utworzyć skuteczną, działającą reklamę, wystarczy zastąpić obrazy i inne zasoby własnymi.

Krok 1. Utwórz nowy plik z szablonu.

Z menu Plik wybierz Nowy z szablonu.... Wyświetli się galeria szablonów.
Aby znaleźć szablony bannerów Google Marketing Platform:
1. Kliknij Szukaj .
2. Rozwiń sekcję Typy reklam i wybierz Rozwijana.
3. Rozwiń sekcję Platformy i wybierz Display & Video 360.
4. Zamknij panel filtrów. Pojawi się lista zgodnych układów.
Kliknij Użyj układu, by wybrać układ.
Jeśli dostępne są opcje rozmiarów, wybierz odpowiedni rozmiar.
Nazwij nowy plik (wymagane).
Opcjonalnie zmień lokalizację, w której zapiszesz plik. Możesz wpisać ścieżkę do lokalizacji lub kliknąć ikonę folderu , by przejść do odpowiedniego miejsca.
Kliknij Utwórz.

Krok 2. Dodaj lub zastąp obrazy w szablonie.

Szablony reklam rozwijanych w programie Google Web Designer mają stronę baneru (zwiniętą postać reklamy) i stronę rozwiniętą. Domyślnie po utworzeniu nowego pliku widać stronę baneru. Przełącz się na stronę rozwiniętą, korzystając ze wskaźnika strony widocznego u dołu sceny .

Na każdej stronie są zasoby zastępcze i identyfikatory opisowe dla każdego elementu. Najpierw zamień każdy zasób zastępczy na taki, który jest odpowiedni do tworzonej reklamy. Reklamy utworzone z szablonów możesz dowolnie zmieniać. Zasoby, komponenty i zdarzenia można dodawać lub usuwać w zależności od potrzeb, by uzyskać lepiej dostosowaną reklamę.

Funkcja „Zamień obraz” pozwala zastąpić obraz innym – przesłanym lub pochodzącym z Biblioteki. Jest szczególnie przydatna przy zastępowaniu zdjęć licencjonowanych w szablonie.

Aby zastąpić obraz w reklamie utworzonej z szablonu:

Kliknij prawym przyciskiem myszy obraz, który chcesz zastąpić.
Wybierz Zamień obraz… z menu.
W oknie dialogowym wskaż obraz w Bibliotece lub kliknij przycisk dodawania , by wybrać obraz na komputerze.
Kliknij OK.

Wyświetlanie podglądu gotowej kreacji

Aby zobaczyć podgląd reklamy z programu Google Web Designer:

Kliknij przycisk podglądu u dołu ekranu. Google Web Designer rozpoznaje obsługiwane przeglądarki zainstalowane na komputerze i pozwala wybrać tę, której chcesz używać.
Aby wskazać przeglądarkę, w której ma się wyświetlać podgląd, kliknij strzałkę wyboru na prawo od przycisku podglądu i wybierz przeglądarkę z listy.
Po wczytaniu strony obejrzyj zwiniętą reklamę.
Kliknij element z wezwaniem do działania, by zobaczyć wersję rozwiniętą.

Opcjonalnie: konfigurowanie reklamy rozwijanej wielokierunkowo

Reklamy rozwijane wielokierunkowo rozwijają się w odpowiednim kierunku w zależności od swojego położenia na stronie. Aby utworzyć taką kreację, wykonaj czynności poniżej.

Zacznij od szablonu kreacji rozwijanej wielokierunkowo w Google Web Designer, dzięki czemu zaoszczędzisz czas. Szablon zawiera większość kodu i ustawień opisanych w krokach poniżej.

Konfiguracja reklamy wielokierunkowej

Krok 1. Zwiększ rozmiar sceny.

Zwiększ rozmiar strony rozwiniętej, by mieć dość miejsca na rozwinięcie w każdym kierunku.

Jeśli wymiary zwiniętej kreacji, która może rozwijać się w prawo lub w lewo, to na przykład 300 x 250, a rozwiniętej – 600 x 250, jako rozmiar strony rozwiniętej ustaw 900 x 250.
Użyj wskaźnika strony, by przełączyć się z powrotem na stronę banera.
Kliknij przycisk widoku rozwinięcia reklamy .
Przesuń widoczny rozwinięty obszar, tak by zwinięty baner był na środku. Więcej informacji o korzystaniu z przycisku widoku rozwinięcia reklamy znajdziesz w Centrum pomocy Google Web Designer.
Przełącz się na Stronę rozwiniętą, korzystając ze wskaźnika strony widocznego u dołu sceny.
Dostosuj położenie elementów kreacji zgodnie z nowym rozmiarem sceny.

Krok 2. Dodaj kod określający położenie.

Kliknij Widok kodu.
Przewiń do tagu script o identyfikatorze gwd-init-code:
<script type="text/javascript" id="gwd-init-code">

Dodaj kod, by włączyć rozwinięcie wielokierunkowe i umożliwić obsługę zdarzeń. Metody interfejsu API i przykłady znajdziesz w dokumentacji pakietu SDK HTML5 Studio.

Przykładowy kod

Ten przykładowy kod rozwija kreację tylko w lewo lub w prawo. Więcej informacji zawiera dokumentacja pakietu SDK HTML5 Studio.

Enabler.setIsMultiDirectional(true);

// Zmiana położenia elementów zgodnie z kierunkiem rozwinięcia.
function expandStartHandler() {
  var direction = Enabler.getExpandDirection().toString();
  if (direction == 'tr' || direction == 'br') {
    // Dodaj tutaj kod określający położenie elementów po rozwinięciu w prawo.
        // Zastąp btnClose identyfikatorem swojego przycisku zamknięcia i dostosuj położenie.
    btnClose.style.left = '875px';
  } else {
    // Dodaj tutaj kod określający położenie elementów po rozwinięciu w lewo.
    // Zastąp btnClose identyfikatorem swojego przycisku zamknięcia i dostosuj położenie.
    btnClose.style.left = '10px';
  }
}

Enabler.addEventListener(studio.events.StudioEvent.EXPAND_START, expandStartHandler);

Dodaj kod określający położenie każdego elementu kreacji w zależności od kierunku rozwinięcia, który chcesz stosować.

Gdy kreacja będzie gotowa, możesz opublikować ją w Studio.

Czy to było pomocne?

Jak możemy ją poprawić?