Google Web Designer, czyli o projektowaniu reklam graficznych pod AdWords słów kilka

google-web-designer-logo

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ę.

Rysunek 1. Tworzenie nowego pliku w GWD

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.)

Rysunek 2. Wygląd projektu i nadanie nazwy (ID) dla elementu

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).

Rysunek 3. Powiązanie elementów z feedem produktowym

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.

Rysunek 4. Pogląd stworzonego w GWD projektu

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).

Rysunek 5. Projekt z dodanym elementem typu Tap Area

Pozostało nam już „zaprogramowanie” odpowiedniej akcji. Przechodzimy do panelu Events i dodajemy w nim:

ElementEventAction
product0-tapareaTap Area > Touch/ClickCustomised > gwd.exitToItem
product1-tapareaTap Area > Touch/ClickCustomised > 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.

ElementEventActionReceiver
page1Mouse > mouseoverGoogle Ad > Initialise adgwd-add
product0-tapareaMouse > mouseovergwd.itemMouseover
product0-tapareaMouse > mouseoutgwd.itemMouseout
product0-tapareaTouch > touchstartgwd.itemMouseover
product0-tapareaTouch > touchendgwd.itemMouseout
product1-tapareaMouse > mouseovergwd.itemMouseover
product1-tapareaMouse > mouseoutgwd.itemMouseout
product1-tapareaTouch > touchstartgwd.itemMouseover
Product1-tapareaTouch > touchendgwd.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.

CEO w Digital Hill - agencji Performance Marketing dla eCommerce z Grupy Unity. Wcześniej COO w agencji interaktywnej Ideacto z Grupy Divante. Posiada kompetencje z zakresu marketingu efektywnościowego oraz strategii handlu internetowego. Wykładowca akademicki na studiach podyplomowych z zakresu e-marketingu na Uniwersytecie Leona Koźminskiego w Warszawie oraz Akademii Górniczo-Hutniczej w Krakowie. Prelegent na wielu branżowych konferencjach i współautor największej polskiej publikacji o eCommerce – Biblii eBiznesu.

Więcej na naszym blogu...

Zobacz wszystkie posty