Reklamy graficzne w AdWords. Test trzech baner makerów: Bannerwise, Bannersnack, Canva. | Fine Performance

Reklamy graficzne w AdWords. Test trzech baner makerów: Bannerwise, Bannersnack, Canva

Reklamy graficzne w AdWords. Test trzech baner makerów: Bannerwise, Bannersnack, Canva

Od stycznia 2017 roku Google Adwords nie pozwala już wyświetlać użytkownikom sieci reklamowej reklam graficznych, stworzonych w formacie Flash. Co to oznacza dla reklamodawców i dla agencji, które przygotowują dla klientów kampanie GDN?

Jeśli do tej pory w kampaniach wykorzystywano takie reklamy,  trzeba było dokonać zmiany na statyczne, gify lub przejść na format HTML5. Te ostatnie można tworzyć za pomocą narzędzi Google, takich jak Google Web Designer czy DoubleClick Studio, korzystając z szablonów dostępnych w Galerii reklam lub też samodzielnie.

Jeśli testowaliście już Google Web Designer, to zapewne przekonaliście się, że potrzeba sporo czasu na stworzenie zestawu reklam HTML5 w kilkunastu rozmiarach, a wielokrotne wprowadzanie poprawek do tych reklam bywa mocno uciążliwe. Ten problem dotyczy zresztą nie tylko formatu HTML5, ale też statycznych reklam, przygotowywanych np. w Photoshopie.

Na szczęście na rynku zaczęły pojawiać się coraz lepsze aplikacje typu design online, tzw. „banner makery”, które mogą (częściowo lub całkowicie) usprawnić tworzenie grafik, a do ich obsługi nie jest potrzebna ani wiedza programistyczna, ani czasochłonne szkolenia z obsługi narzędzia. Jak działają te aplikacje? Czy któraś z nich może rzeczywiście pomóc agencjom i reklamodawcom?

W zestawieniu, stworzonym na potrzeby tego artykułu znalazły się trzy aplikacje:

  1. Bannerwise – narzędzie do tworzenia zestawów banerów reklamowych, uhonorowany nagrodą ‘ING Startup of the Year 2015’
  2. Bannersnack – narzędzie do tworzenia banerów reklamowych z możliwością prowadzenia kampanii online
  3. Canva – narzędzie do tworzenia prostych grafik na różne potrzeby (prezentacje, plakaty, grafiki do mediów społecznościowych, banery)

Zostały one przetestowane pod kątem szybkości i wygody przygotowywania zestawów reklam graficznych w różnych rozmiarach, na potrzeby systemu Google AdWords (zarówno w formacie HTML5, jak i w wersji statycznej). Testy narzędzi zostały przeprowadzone w październiku ubiegłego roku – pewne elementy interfejsu mogły od tego czasu ulec zmianie. Przyjrzyjmy się zatem dokładniej każdej z nich.

Bannerwise – Siła tkwi w prostocie

bannerwise interface

Panel zarządzania Bannerwise jest czytelny i nieprzesadnie rozbudowany. Oprócz głównego dashboardu, na którym lądujemy po zalogowaniu, znajdziemy tutaj trzy podstawowe sekcje:

  • Banners – do tworzenia i zarządzania banerami
  • Branding – do ustawień współdzielenia
  • Integrations – do łączenia narzędzia z zewnętrznymi platformami

 

BUILDER

Korzystając z zakładki Create przechodzimy do tworzenia nowego setu banerów reklamowych. Możemy skorzystać z oferowanych przez aplikację bezpłatnych szablonów z animacjami (kilkanaście kategorii wg tematyki reklam) lub stworzyć własny szablon.

bannerwise dodawanie banera

Wybieramy opcję ‘Start from scratch’, nazywamy zestaw, z proponowanych rozmiarów wybieramy te, które są nam potrzebne, a jeśli chcemy wykonać większą ilość, dodajemy ręcznie dowolne rozmiary banerów. Jeśli na tym etapie zapomnimy o jakimś rozmiarze lub dodamy niepotrzebnie – nic straconego, możemy w każdej chwili dodać nową lub usunąć zbędną reklamę.

 

‘Drag and drop’ wszystko to, co potrzebujesz na banerze

Zakładając, że w głowie mamy już jakiś plan, co umieścić w reklamie, możemy przejść do wstawiania i układania elementów na pierwszym rozmiarze banera. W lewym górnym rogu widoczne są elementy, z których tworzymy kreację:

bannerwise menu

Obejrzyj krótkie filmiki z instrukcjami:

Jak dodać tło?

Jak dodać logo?

Jak dodać obrazki?

Jak dodać tekst?

Jak dodać przyciski?

Jak dodać kształty niestandardowe?

­­

 

Wszystkie zasoby niezbędne do wykonania kreacji wgrywamy jednorazowo na pierwszy rozmiar banera. Oczywiście jeśli będziemy potrzebowali dodatkowego elementu na którymś z rozmiarów, będziemy mogli to zrobić, kiedy przystąpimy do wykańczania tego właśnie rozmiaru.

Wgrywanie pliku (wielkość maksymalna pojedynczego to 2MB) następuje dość szybko i sprawnie w każdej sekcji. Następnie wystarczy kliknąć we wgrany element, by pojawił się na obszarze roboczym, gdzie dostosowujemy jego wielkość i pozostałe parametry.

Jedynym elementem, dla którego opcja bezpośredniego załadowania własnych zasobów nie jest dostępna, są przyciski -> jeśli chcemy dodać swój, wcześniej przygotowany plik, trzeba to zrobić w sekcji ’Obrazki’.

 

Dodawanie fontu klienta/własnego

Z pewnością dużym plusem aplikacji jest możliwość dodania własnego fontu bezpośrednio w sekcji ‘Tekst’. Jak to zrobić?

Kiedy dodaliśmy już logo, tekst, button, zdjęcie, tło i potrzebne kształty, dostosowaliśmy je do edytowanego w pierwszej kolejności rozmiaru, możemy przejść do ustawienia animacji poklatkowej (HTML5) lub jeżeli tworzymy kreację statyczną -> bezpośrednio do edycji kolejnego rozmiaru reklamy.

 

Tworzenie prostej animacji

W tym przypadku, by w pełni pokazać możliwości narzędzia, dodajemy kolejne slajdy i tworzymy prostą animację. Duplikujemy stworzony slajd (wyjściowy) i tworzymy kolejny, który będzie klatką naszej animacji.

Pomiędzy slajdami znajduje się znaczek spinacza do kliknięcia w razie potrzeby. W zależności od tego ustawienia, dokonujemy zmian parametrów edytowanego elementu:

na wszystkich slajdach jednocześnie, np. wielkość fontu, obrazka, położenie logotypu (nie dotyczy animacji oraz tła), kiedy spinacz jest „zapięty”

bannerwise zmiany wszystkie slajdy

tylko na wybranym slajdzie kiedy „rozepniemy” spinacz

bannerwise zmiany wybrany slajd

Jak widać na filmie powyżej, na każdym ze slajdów możemy oddzielnie animować wszystkie elementy i ustawiać czas trwania pojedynczego slajdu:

bannerwise animacje

bannerwise animacje

Na każdym ze slajdów możemy oddzielnie animować wszystkie elementy i ustawiać czas trwania pojedynczego slajdu. Pierwsza ikona to animacja wejścia elementu, możliwa do dodania kolejno dla przycisku, elementów tekstowych (x2) lub obrazka dodanego na banerze.

bannerwise animacja wejscia

Kolejna ikona – klatka kluczowa danego elementu:

bannerwise animacje klatka kluczowa

I ostatnia – animacja wyjścia:

bannerwise animacja wyjscia

Dla animacji wejścia i wyjścia mamy do dyspozycji kilkanaście efektów, m.in. zanikanie, obrót, skalowanie czy ścieżkę ruchu.

bannerwise efekty animacji

 

Dla klatki kluczowej możemy wybierać pomiędzy potrząśnięciem elementu, skalowaniem i zanikaniem.

bannerwise animacje klatka kluczowa

Czas trwania każdego z efektów ustawiamy dowolnie na osi czasu, by nasza animacja przebiegała zgodnie z założeniami. Dzięki skracaniu lub wydłużaniu efektów wejścia, kluczowej klatki czy efektów wyjścia, zwiększamy lub zmniejszamy czas trwania animacji dla całego slajdu.

Zobaczmy edycję kolejnego slajdu:

I analogiczne przygotowanie animacji ostatniego slajdu:

Jeśli nie jesteśmy pewni jak wygląda animacja w całości, wystarczy przejść do trybu podglądu.

 

Kiedy pierwszy baner już gotowy…

Kiedy animacja na pierwszym rozmiarze tworzonej reklamy i wszystkie jej elementy są gotowe, przechodzimy do dopasowywania elementów na kolejnym rozmiarze. W tym miejscu Bannerwise najbardziej działa na naszą korzyść, ponieważ oprócz kopiowania animacji, dostosowuje rozkład wszystkich elementów na kolejnym banerze. Naszym zadaniem jest więc tylko dokonanie niezbędnych poprawek po algorytmie, który jest stale udoskonalany przez twórców aplikacji. Dalej wszystko odbywa się zdecydowanie szybciej.  Obejrzyj proces zmiany rozmiaru:

 

Kiedy wszystkie rozmiary banerów są już gotowe

Po przygotowaniu wszystkich interesujących nas rozmiarów reklam, możemy:

– udostępnić klientowi link do podglądu (nie zużywając downloadu, którym dysponujemy, mamy możliwość pokazania gotowych banerów na specjalnie obrandowanej stronie – branding dostępny tylko przy pakiecie agencyjnym) – zobacz wideo

wyeksportować pliki (każdy rozmiar to oddzielny 1 x download) – Bannerwise automatycznie dostosuje pliki do wskazanej przez nas sieci

bannerwise sieci eksport
bannerwise download

– przesłać pliki bezpośrednio na konto AdWords po połączeniu kont  (liczone tak samo jak download)

bannerwise adwords połączenie

 

MANAGER

Teraz wyobraźmy sobie sytuację, w której klient po otrzymaniu stworzonych banerów, prosi o zmianę call to action na przycisku, zdjęcia lub sam zauważasz literówkę w haśle reklamowym… Dramat, łzy i nieprzespana noc? Niekoniecznie. Bannerwise daje możliwość edytowania elementów na wszystkich rozmiarach jednocześnie. Jak to wygląda?

 

FUNKCJE DODATKOWE

Bannerwise ma w swojej ofercie reklamy dynamiczne. Jest to dodatek, pozwalający wyświetlać reklamy na podstawie produktów oglądanych przez użytkowników w witrynie klienta. Opcja dynamiczna działa na podstawie feedu i pozwala projektować banery podobnie jak za pomocą dostępnych szablonów remarketingu dynamicznego AdWords.

bannerwise dynamic feed

 

Bannersnack – więcej niż (jeden) baner?

bannersnack panel
Panel nieco bardziej rozbudowany od Bannerwise, ale mimo wszystko dość łatwo się w nim odnaleźć. W zakładce, która nas najbardziej interesuje, czyli Banner maker, mamy do wyboru dwie opcje:

  • baner Flash
  • baner HTML

bannersnack tworzenie banerow

Na potrzeby tego artykułu, zajmę się tylko tą drugą opcją. Wybieramy w takim razie tworzenie baneru HTML5 i przystępujemy do wyboru rozmiaru, od którego rozpoczniemy. Podobnie jak w poprzedniej aplikacji możemy wybrać spośród predefiniowanych lub wprowadzić własny rozmiar. Na tym etapie wybieramy jednak tylko jeden i przechodzimy do jego edycji. Na tym etapie mamy szereg elementów do dyspozycji:

– tło

bannersnack tło
– obrazki (w tym logo)

bannersnack obrazki
– tekst (nie możemy dodawać własnych fontów)

bannersnack tekst
– przyciski

bannersnack przyciski
– kształty

bannersnack kształty

Ładowanie zasobów jest bardzo intuicyjne i przebiega równie sprawnie, co w przypadku Bannerwise. Do dyspozycji użytkownika jest baza szablonów statycznych i animowanych oraz biblioteka darmowych zdjęć, które można wykorzystać przy tworzeniu banerów, z wbudowaną wyszukiwarką.

bannersnack baza grafik
Zdjęcia oznaczone gwiazdką dostępne są jedynie dla użytkowników Premium, z pozostałych mogą korzystać wszyscy, niezależnie od wykupionego członkostwa.

 

Jak stworzyć animację? 

Do stworzenia banerów dynamicznych ponownie należy posłużyć się slajdami z animacją. W przypadku tego narzędzia samo dodawanie animacji nie jest może bardzo skomplikowane, mi jednak zdecydowanie brakuje osi czasu, która umożliwiałaby bardziej precyzyjne dopasowywanie czasu trwania efektów wejścia i wyjścia dla każdego z elementu na slajdzie.

 

Krok po kroku:

  • Duplikujemy slajd wyjściowy
  • Edytujemy czas trwania całego slajdu
  • Edytujemy efekty wejścia i wyjścia każdego z elementów, które chcemy na slajdzie zaanimować (ważne jest odpowiednie ustawienie czasu trwania efektu oraz opóźnienia rozpoczęcia animacji – w podglądzie łatwo zauważmy, że jeśli czas trwania lub opóźnienia animacji będzie zbyt krótki/długi, to wasz element ledwie zdąży się zaanimować na slajdzie)

  • Tworzymy niezbędną ilość duplikatów drugiego slajdu (w tym wypadku 2 dodatkowe) i ustawiamy dla każdego z nich czas trwania
  • Dodajemy do każdego nowego slajdu element, który chcemy animować i ustawiamy efekt wejścia (opcjonalnie również można dodać efekt wyjścia), czas trwania wejścia i opóźnienie

Uwaga! Ustawienie czasu opóźnienia dłuższego niż całość trwania animacji danego slajdu spowoduje jedynie „mignięcie” elementu, zamiast prawidłowego jego wejścia czy wyjścia.

Tak przygotowaną animację możemy zapisać jako projekt:

bannersnack zapis projektu

A następnie w zakładce My banners pobrać na dysk w formacie .jpg .gif (darmowe) lub html5 (pro):

bannersnack eksport

 

Samo tworzenie animacji, choć wymaga trochę skupienia i wprawy, nie jest bardzo uciążliwe dla osoby, przyzwyczajonej do korzystania aplikacji. Jednak Bannersnack nie daje możliwości tworzenia kolejnych banerów na bazie tej samej animacji, w związku z czym nie jesteśmy w stanie szybko wyprodukować całego zestawu kreacji czy też dokonać poprawek jednocześnie na kilku rozmiarach.

 

Canva – bez HTML5 da się żyć, ale co to za życie…

Główny dashboard Canvy jest bardzo przejrzysty i intuicyjny – bardzo szybko możemy przejść do tworzenia nowego projektu, wybierając typ grafiki, który chcielibyśmy stworzyć (np. wpis na facebooku, średni prostokąt IAB, grafika kanału YT, prezentacja czy plakat). Możemy oczywiście wprowadzić własne rozmiary grafiki, co z pewnością stało się już standardem w banner makerach.

canva dashboard

 

Jest tutaj też kilka ciekawych opcji organizacyjnych, które powoli pojawiają się także w pozostałych testowanych aplikacjach.

– tworzenie zespołu pracowników, z którymi chcemy się łatwo dzielić projektami i pracować na tych samych szablonach

canva tworzenie zespołu

– zakładka Twoja marka, pozwalająca na ustawienie domyślnej palety kolorów, fontów (w tym własnych) czy często używanych w projektach logotypów

canva twoja marka

– możliwość stworzenia własnego folderu z projektami, który będziemy współdzielić np. z zespołem lub klientem

canva tworzenie folderu

Przeglądając ten można odnieść wrażenie, że Canva będzie chętniej wykorzystywana do zarządzania marką w social mediach niż do tworzenia pakietów kreacji na potrzeby sieci reklamowej Google Display Network. Warto jednak przyjrzeć się wszystkim funkcjonalnościom, by w pełni ocenić możliwości tego narzędzia.

 

Tworzenie banerów w Canvie 

Zacznijmy zatem od stworzenia nowego projektu w postaci banera reklamowego o wymiarach 336×280 px. W przypadku Canvy, podobnie jak w Bannersnack, wybieramy jeden rozmiar i lądujemy w panelu do edycji. Do naszej dyspozycji są:

  • wyszukiwarka stockowych zdjęć (zarówno płatne, jak i bezpłatne)
  • layouty proponowane przez Canvę lub tworzone na podstawie naszych projektów (lista rozwijana)
  • różnego rodzaju elementy do dodania (darmowe zdjęcia, ramki, kształty, linie, siatki, ilustracje, ikony, wykresy)
  • tekst (własny font dodajemy w sekcji Twoja marka)
  • tło
  • upload własnych zasobów

Wszystkie elementy, które przygotowaliśmy wgrywamy w związku z tym do ostatniej zakładki i układamy na banerze, dodając tekst i niezbędne dodatki. Przy ładowaniu większych plików należy uzbroić się w cierpliwość, ponieważ upload może się wydłużać.

Jak już zapowiadałam – mimo, że dla każdej grafiki możemy stworzyć slajdy, to w Canvie nie ma możliwości dodawania do nich animacji i zaprojektowania banerów HTML5. Przy pobieraniu do wyboru mamy jedynie następujące formaty plików: JPG, PNG lub PDF.

canva formaty plików

 

Mamy jednak do dyspozycji inną funkcję, nieco ukrytą MAGIC RESIZE. Po jej odnalezieniu możemy wybrać, jakie nowe rozmiary (tylko z predefiniowanych, czyli na potrzeby reklamy do Google AdWords mamy do wyboru 3 na 4) chcielibyśmy stworzyć w aplikacji, Abracadabra! i pozostaje tylko … modlić się o cud 😉

canva resizing

Nowe rozmiary otwierają się w oddzielnych kartach, ale jeśli zamieniamy rectangle na skyscraper, to może lepiej do tej karty nie zaglądać. Jeśli chcemy zrobić resizing do innych wymiarów niż predefiniowane, trzeba zrezygnować z magicznej funkcji i skorzystać ze zwykłej zmiany rozmiarów w tej samej zakładce.

 

A gdyby tak w skrócie?

Dla tych, którzy artykuły przyjmują jedynie w formie skrótu i tabeli – esencja porównania omawianych narzędzi wraz z tabelą w dość krótkim podsumowaniu poniżej.

porównanie baner makerów koszty

 

porównanie baner makerów funkcjonalności

 

 

Jeżeli myślimy o tworzeniu atrakcyjnych banerów reklamowych dla klientów lub na własne potrzeby (co niejako narzuca format HTML5) i o częstym ich odświeżaniu lub testach A/B – na ten moment zyskamy najwięcej dzięki Bannerwise. Dlaczego?

  1. Możemy edytować kilka rozmiarów reklam jednocześnie w błyskawicznym tempie, np. w celu wprowadzenia poprawek, ale również w celu podmiany tekstu i zdjęcia na kreacji (co uczyni z niej zupełnie nową w dosłownie kilka minut).
  2. Połączymy konto AdWords z panelem i bez ściągania plików na dysk wgramy wszystkie formaty reklam bezpośrednio na konto klienta.
  3. Uzyskamy bez wysiłku link do gotowego podglądu wszystkich rozmiarów reklam dla klienta (bez zbędnych pytań jak to otworzyć, czemu nie działa w Firefoxie itp.).
  4. Skrócimy czas przygotowywania kreacji HTML5 w kilkunastu różnych rozmiarach do minimum.
  5. Otworzymy osobom spoza działu kreatywnego drogę do samodzielnego przygotowywania banerów reklamowych zarówno w formacie HTML5, jak i innych, statycznych na potrzeby prowadzonych kampanii (bez uszczerbku na innych obowiązkach).
  6. Przygotujemy ciekawe, atrakcyjne grafiki reklamowe dla swoich klientów lub dla własnego biznesu.
  7. I wreszcie – oszczędzimy najwięcej czasu, pieniędzy i nerwów.

W mojej opinii to właśnie Bannerwise może być pierwszym narzędziem, dzięki któremu połączenie „dobrze, szybko i tanio” stanie się możliwe w tej wąskiej dziedzinie, jaką jest tworzenie reklam graficznych w formacie HTML5 na potrzeby AdWords. Gorąco zachęcam do bezpłatnego testowania wszystkich trzech narzędzi, by indywidualnie podjąć decyzję o tym, które rozwiązanie jest adekwatne do Waszych potrzeb.

 

Autor: Natalia Ircha

Entuzjastka AdWords, pasjonatka innowacji, wielbicielka skutecznych rozwiązań. Nie ma dla mnie rzeczy niemożliwych.

Stale podnoszę swoje kompetencje, dzięki czemu jestem w stanie proponować klientom najbardziej skuteczne rozwiązania i wyznacz...