Korzystając z dynamicznych reklam graficznych w remarketingu Google AdWords, zapewne używasz jednego z udostępnionych przez Google szablonów. To świetnie, bo oznacza to szybką możliwość uruchomienia prostych kreacji graficznych. Z drugiej jednak strony, skazujesz się na używanie bądź co bądź mało ambitnej grafiki, aby nie powiedzieć po prostu… brzydkiej.
Google Web Designer (GWD) to narzędzie, dzięki któremu możliwe jest tworzenie m.in. reklam graficznych do wykorzystania w Google AdWords. Ułatwia ono projektowanie banerów nie tylko w 2D ale również w 3D, możliwe jest także stosowanie animacji. Wynikiem działania programu są pliki HTML5 gotowe do zaimportowania w panelu Google AdWords.
GWD samo w sobie nie jest żadną nowością – pierwsza jego wersja powstała w 2013 roku. Niemniej jednak niewiele jest opracowań opisujących tworzenie w nim reklam dynamicznych na potrzeby remarketingu w eCommerce z wykorzystaniem feedu produktowego. Narzędzie również nie jest nazbyt intuicyjne i nadal pozostaje w statusie beta.
Początki z Google Web Designer
W dalszej części artykułu omówię tworzenie dynamicznym reklam displayowych w których wykorzystywany jest feed produktowy podłączony do Google Marchant Center. Dla większości specjalistów AdWords problematyka remarketingu w Google Display Network nie jest niczym odkrywczym. Pominę zatem teoretyczny wstęp prezentujący zasady tworzenia i zarządzania tego typu reklamą.
Po uruchomieniu programu, GWD zachęci nas do stworzenia nowego pliku (create new file) lub skorzystania z wbudowanych szablonów (use template). Skorzystanie z szablonów pozwoli ominąć nam konieczność dość żmudnego dostosowania pliku do wymogów AdWords, jednak jednocześnie skazujemy się na wybór kreacji graficznych przypominających lata ’90. Ambitnie więc omówię przypadek, w którym rozpoczynamy naszą przygodę z GWD od tworzenia pustego, nowego pliku.
W kolejnym kroku wskazujemy nazwę pliku, wybieramy jego lokalizację, wskazujemy środowisko działania (AdWords) oraz wymiary (rys. 1).
Polecam stworzenie nowego folderu jako lokalizacji – wynikiem działania programu jest zestaw plików HTML, JS oraz CSS zgrupowane w kilku folderach. Próba więc zapisu, przykładowo na pulpicie, spowoduje mało komfortową dalszą pracę.
Po poprawnym utworzeniu nowego pliku naszym oczom ukaże się środowisko pracy dość podobne do znanych edytorów graficznych w stylu Photoshop. Najważniejsze panele, które wykorzystywać będziemy w dalszej części artykułu to:
- Properties umożliwiający zmianę wybranego przez nas elementu – nadanie mu indywidualnej nazwy, manipulacje wielkością i wiele innych;
- Events odpowiadający za wywoływanie zdarzeń;
- Dynamic, dzięki któremu przypiszemy do poszczególnych elementów wartości z feedu produktowego;
- Timeline, który co prawda domyślnie służy do animacji elementów, ale po przełączeniu w opcję zaawansowaną (ikona „ustawień” w tym panelu opisana jako switch to Advenced mode) umożliwia zarządzanie warstwami.
Sama obsługa GWD jest podobna jak we wspomnianym już Photoshopie. Pasek narzędzi po lewej stronie umożliwia zaznaczanie elementów (selection tool), dodawanie elementów (element tool), pracę z tekstem (text tool) czy rysowanie (pen tool, rectangle tool, oval tool, line tool). Standardowe są także zachowania w stylu zaznaczania kilku elementów (z klawiszem SHIFT) lub grupowanie elementów (menu kontekstowe pod prawym przyciskiem myszy).
GWD obsługuje również wstawianie (przez kopiuj&wklej) grafiki przykładowo z Photoshopa.
Tworzenie baneru z kilkoma produktami
Mając już utworzony nowy plik projektu możemy przystąpić do tworzenia banneru, w którym wykorzystamy przykładowo dwa produkty z feedu, prezentując ich zdjęcie, cenę sprzedaży (sale price) oraz cenę regularną (regular price).
Dodajmy więc do naszego projektu zdjęcie produktu (należy z paska narzędzi wskazać element tool, a następnie image element) oraz cenę regularną i cenę sprzedaży (posłużmy się narzędziem text tool). Następnie w panelu properties każdemu z elementów nadajemy łatwe do identyfikacji nazwy, czyli ID elementu (rys. 2.)
Na potrzeby artykułu nadałem nazwy dla poszczególnych elementów: product0-photo, product0-regularprice, product0-saleprice, product1-photo, product1-regularprice, product1-saleprice.
Spróbujmy następnie przypisać do tych elementów konkretne wartości z feedu produktowego. W panelu dynamic klikamy ikonę plusa i wybieramy data schema jako przykładowo Retail. Następnie dokonujemy odpowiedniego powiązania pomiędzy feedem a elementami naszego banera (Rys. 3).
Jak pewnie zauważyłeś, możliwe jest wybranie wielu możliwości powiązania elementów z feedem. Oprócz feedu (Product) mamy także możliwość wyboru dynamicznych wartości z grupy Design oraz Headline – im więcej elementów powiążemy, tym większe możliwości edycji banera już z poziomu panelu AdWords uzyskamy. Możliwe będzie manipulowanie przykładowo tekstem nagłówka, logotypem czy kolorem butonów.
Dotarliśmy do etapu, w którym warto sprawdzić efekty naszej pracy – na górnym pasku narzędzi klikamy Preview. W przeglądarce internetowej powinien nam się ukazać widok z testowymi produktami – w moim przypadku (Rys. 4.) dodałem do niego jeszcze logo oraz tekst nagłówka. Oczywiście przykład ten nie należy do najładniejszych, a wręcz można go nazwać szpetnym – jest to jednak tylko przedstawienie idei postępowania w narzędziu GWD.
Dodawanie przycisków akcji
Na tym etapie stworzyliśmy dynamiczny baner, który oprócz zaciągania produktów z feedu nie obsługuje jeszcze przekierowania użytkownika pod adres URL po kliknięciu. Aby wprowadzić odpowiednią modyfikację możemy wybrać dwie, alternatywne ścieżki postępowania.
Na etapie importu baneru do panelu AdWords możemy wskazać jeden, konkretny adres URL, pod który przekierujemy użytkownika. Nie jest to rozwiązanie nazbyt przemyślane – bardziej sensownie jest odesłać użytkownika do karty konkretnego produktu.
Dodajmy więc zatem do naszego projektu dwa przyciski KUP TERAZ. Skorzystałem po prostu z narysowania przycisku przez narzędzie rectangle tool oraz dodałem tekst korzystając z text tool.
Następnie dodajmy komponent Tap Area (znajdziesz go w panelu Components). Dostosujemy jego wielkość tak, aby obejmował nie tylko dodany wcześniej przycisk, ale cały obszar produktu (zdjęcie, cena, przycisk). Nie zapomnijmy nadać mu nazwy (ID) – odpowiednio product0-taparea oraz product1-taparea (Rys. 5).
Pozostało nam już „zaprogramowanie” odpowiedniej akcji. Przechodzimy do panelu Events i dodajemy w nim:
Element | Event | Action |
product0-taparea | Tap Area > Touch/Click | Customised > gwd.exitToItem |
product1-taparea | Tap Area > Touch/Click | Customised > gwd.exitToItem |
Za pierwszym razem nie będziemy mieć możliwości wyboru akcji gwd.exitToItem i należy ją dodać poprzez wybranie add customised action.
Nazywamy funkcję jako gwd.exitToItem a w poniższym polu wpisujemy common. exitToItem();
Dodanie akcji specyficznych dla Google AdWords
Jak wspominałem, tworzenie pliku od podstaw (bez wykorzystania szablonu) powoduje pozbawienie się przez nas typowych akcji koniecznych do pełnego działania banera w środowisku AdWords. Spróbujmy je więc dodać korzystając z panelu Events.
Element | Event | Action | Receiver |
page1 | Mouse > mouseover | Google Ad > Initialise ad | gwd-add |
product0-taparea | Mouse > mouseover | gwd.itemMouseover | |
product0-taparea | Mouse > mouseout | gwd.itemMouseout | |
product0-taparea | Touch > touchstart | gwd.itemMouseover | |
product0-taparea | Touch > touchend | gwd.itemMouseout | |
product1-taparea | Mouse > mouseover | gwd.itemMouseover | |
product1-taparea | Mouse > mouseout | gwd.itemMouseout | |
product1-taparea | Touch > touchstart | gwd.itemMouseover | |
Product1-taparea | Touch > touchend | gwd.itemMouseout |
Akcje gwd.itemMouseover oraz gwd.itemMouseoout należy za pierwszym razem dodać i wykorzystać odpowiednio kody:
Gwd.itemMouseover=function(event) {
Common.itemMouseover(event);
}
Gwd.itemMouseout=function(event) {
Common.itemMouseout(event);
}
Publikacja projektu i import do Google AdWords
Pozostała nam już publikacja projektu (polecenie Publish > Locally), której wynikiem będzie archiwum ZIP. Plik ten możliwy jest do importu w panelu Google AdWords. Jeżeli w którymś momencie pogubiłeś się w ścieżce postępowania, to pomocny będzie plik, który jest podsumowaniem omówionego zagadnienia: GWD1.zip
W kolejnej części artykułu dowiesz się, w jaki sposób zastosować przewijaną galerię produktów na banerze.
Rozważasz płatne kampanie Google Ads? Sprawdź naszą ofertę, doświadczenie i poproś o wycenę.