<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>rtb | Bluerank</title>
	<atom:link href="https://www.bluerank.com/blog/tag/rtb/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.bluerank.com</link>
	<description>Agencja SEM - Pozycjonowanie (SEO) i Kampanie Linków Sponsorowanych (PPC)</description>
	<lastBuildDate>Thu, 25 Mar 2021 10:21:52 +0000</lastBuildDate>
	<language>pl-PL</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://www.bluerank.com/wp-content/uploads/2020/12/cropped-favicon-1-32x32.png</url>
	<title>rtb | Bluerank</title>
	<link>https://www.bluerank.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Jak zmniejszyć koszty tworzenia banerów dzięki HTML5?</title>
		<link>https://www.bluerank.com/blog/zmniejszyc-koszty-tworzenia-banerow-dzieki-html5/</link>
					<comments>https://www.bluerank.com/blog/zmniejszyc-koszty-tworzenia-banerow-dzieki-html5/#respond</comments>
		
		<dc:creator><![CDATA[Redakcja]]></dc:creator>
		<pubDate>Thu, 16 Feb 2017 09:07:05 +0000</pubDate>
				<category><![CDATA[Performance Marketing]]></category>
		<category><![CDATA[adwords]]></category>
		<category><![CDATA[grafika]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[programmatic]]></category>
		<category><![CDATA[rtb]]></category>
		<guid isPermaLink="false">https://www.bluerank.pl/?p=5998</guid>

					<description><![CDATA[<p>Posiadasz wiele różnorodnych produktów i chcesz je promować w AdWords, na Facebooku lub za pośrednictwem platformy RTB? Nie wyobrażasz sobie jednak przygotowywania różnych kreacji ...</p>
The post <a href="https://www.bluerank.com/blog/zmniejszyc-koszty-tworzenia-banerow-dzieki-html5/">Jak zmniejszyć koszty tworzenia banerów dzięki HTML5?</a> first appeared on <a href="https://www.bluerank.com">Bluerank</a>.]]></description>
										<content:encoded><![CDATA[<p><strong>Posiadasz wiele różnorodnych produktów i chcesz je promować w AdWords, na Facebooku lub za pośrednictwem platformy RTB? Nie wyobrażasz sobie jednak przygotowywania różnych kreacji graficznych dla wszystkich tych produktów i kosztów, które w związku z tym trzeba będzie ponieść? Jest na to sposób. Skorzystaj z HTML5 i zmniejsz koszty tworzenia banerów. Jak to zrobić?</strong></p>
<p><span id="more-12543"></span></p>
<p>W przeciwieństwie do reklam tekstowych, kreacje graficzne wymagają większego zaangażowania, ale też mają większe pole ekspresji. Sam tekst nie jest w stanie oddać w pełni wyglądu produktu, nie pokaże zdjęcia z wycieczki do odległego kraju. Dodajmy do tego fakt, że AdWords, choć jest sporą siecią reklamową, nie jest jedyną. Jego głównym konkurentem jest Facebook, jak również rynek mediów sprzedawanych przez wydawców i portale (wg raportu <strong><a href="http://iab.org.pl/badania-i-publikacje/iabpwc-adex-2016q3-25-mld-zl-na-reklame-online-po-trzech-kwartalach-2016/">IAB AdEx 2016Q3</a></strong> stanowi 49,2% wydatków mediowych). W takiej sytuacji pytanie brzmi nie “czy opłaca mi się wejść w reklamę graficzną”, tylko “dlaczego nie opłaca mi się ignorować reklam graficznych”. Nawet mniejsze podmioty (mikro- i małe przedsiębiorstwa) dzięki prostemu remarketingowi mogą ponownie dotrzeć do potencjalnego klienta. Jak robić to skutecznie, jednocześnie nie ponosząc dużych kosztów?</p>
<p>Produkcja banerów graficznych w wielu formatach, a najlepiej też wielu wersjach w celu testów A/B, pociąga za sobą wyższe koszty pracy grafika, copywritera i ewentualnie programisty, jeśli mówimy o reklamach rich media. Poza tym nie wystarczy przygotowanie jednego rozmiaru, lecz kilku lub kilkunastu, aby mieć jak największe pokrycie w sieci reklamowej. W efekcie przygotowanie jednej linii kreatywnej wymaga zazwyczaj:</p>
<ul>
<li>wersji master do akceptacji przez klienta;</li>
<li>wprowadzenia poprawek klienta;</li>
<li>przeformatowania na pozostałe rozmiary;</li>
<li>ponowna weryfikacja.</li>
</ul>
<p>Im więcej linii kreatywnych, tym więcej pracy grafika, która generuje koszty.</p>
<p>A co w przypadku, gdy mamy rozbudowaną ofertę różnorodnych produktów i jeden przekaz nie wystarczy? Przykładowo:</p>
<ul>
<li>biuro podróży ma dziesiątki destynacji do wyboru</li>
<li>sklep elektroniczny ma wiele różnych od siebie kategorii</li>
<li>firma B2B ma szeroki wachlarz usług</li>
</ul>
<p>Aby objąć tak szeroki asortyment, wymagałoby to przygotowywania osobnej komunikacji dla każdej oferty. Tak, częściowo ten problem rozwiązuje remarketing dynamiczny, lecz jego główną funkcją jest prezentacja produktów już przeglądanych, a niekoniecznie reklama promocji na dział AGD czy nie wspominając o usługach B2B, które nie są fizycznym produktem.</p>
<p>Załóżmy, że zlecono nam promocję 5 destynacji biura podróży. Wymaga to przygotowania 5 odrębnych linii kreatywnych z odpowiednim zdjęciem oraz copy. Do tego dochodzi przeformatowanie na najpopularniejsze rozmiary. Wybierając <strong><a href="http://iab.org.pl/standardy-i-dobre-praktyki/standardy-reklamy-display/">standard IAB</a></strong> mamy 8 rozmiarów desktopowych i 6 rozmiarów mobile &#8211; łącznie 14 wymiarów. W efekcie daje to nam:</p>
<p style="text-align: center;"><span style="font-size: 20px;"><strong>5 linii x 14 rozmiarów = 70 reklam</strong></span></p>
<p>Jeśli założymy, że stworzenie koncepcji zajmie 1 godzinę, a przeformatowanie na każdy rozmiar 0,5 godziny, dałoby to nam 8 godzin pracy grafika. Przyjmijmy, że 1 godzina grafika kosztuje 100 zł. W efekcie promocja 5 destynacji będzie kosztować nas 800 zł.</p>
<p>A co w przypadku, gdybyśmy mieli stworzyć osobną komunikację dla 10, 20, 50 różnych ofert czy produktów? Ilość pracy rośnie, a wraz z nią koszty, co łatwo można zobrazować wykresem zależności ilości linii kreatywnych od kosztu (na potrzeby tego artykułu zakładam, że czas i koszt pracy jest taki sam, co rzadko zdarza się w życiu):</p>
<p><img fetchpriority="high" decoding="async" alt="grafika-1" class="size-full wp-image-12538 aligncenter" data-id="12538" height="890" src="/wp-content/uploads/2017/02/grafika-1.png" width="1481" srcset="https://www.bluerank.com/wp-content/uploads/2017/02/grafika-1.png 1481w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-1-300x180.png 300w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-1-1024x615.png 1024w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-1-100x60.png 100w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-1-65x39.png 65w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-1-955x574.png 955w" sizes="(max-width: 1481px) 100vw, 1481px" /></p>
<p> </p>
<h2><strong>Jak zmniejszyć koszty produkcji banerów?</strong></h2>
<p>Jeśli mamy przygotować serię banerów o zupełnie odmiennej warstwie wizualnej, niestety w większości przypadków będzie to wymagało żmudnej pracy grafika. Niemniej, jeśli na kreacjach zmienia się jedynie tekst czy zdjęcia produktu, da się zautomatyzować produkcję dzięki wykorzystaniu HTML5 oraz Google Web Designera.</p>
<p>Normalnie stworzenie kreacji HTML5 zajęłoby wiele godzin web developerowi z doświadczeniem w podobnej pracy, lecz dzięki Google Web Designer cały proces zmienia się w “drag-n-drop”. Co więcej &#8211; samo narzędzie jest na tyle proste w obsłudze, że nie stanowi przeszkody dla grafika obeznanego z narzędziami Adobe.</p>
<p><img decoding="async" alt="grafika-2" class="size-full wp-image-12539 aligncenter" data-id="12539" height="900" src="/wp-content/uploads/2017/02/grafika-2.png" width="1440" srcset="https://www.bluerank.com/wp-content/uploads/2017/02/grafika-2.png 1440w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-2-300x188.png 300w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-2-1024x640.png 1024w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-2-96x60.png 96w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-2-65x41.png 65w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-2-918x574.png 918w" sizes="(max-width: 1440px) 100vw, 1440px" /></p>
<p> </p>
<p>Powyżej mamy główne okno edytora, w którym na potrzeby artykuły w kilka minut przetworzyłem stronę główną Bluerank na triple billboard o wymiarach 750&#215;300. Metodą drag-n-drop wgrałem zdjęcie tła oraz logotyp. Następnie dodanie tekstu oraz ramki jako HMTL5 canvas wymagało jedynie wybrania koloru, czcionki i wielkości. Całość zajęła kilkanaście minut na stworzenie. Efektem było wygenerowanie przez Google Web Designera kodu źródłowego razem ze strukturą plików:</p>
<p><img decoding="async" alt="grafika-3" class="size-full wp-image-12540 aligncenter" data-id="12540" height="900" src="/wp-content/uploads/2017/02/grafika-3.png" width="1440" srcset="https://www.bluerank.com/wp-content/uploads/2017/02/grafika-3.png 1440w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-3-300x188.png 300w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-3-1024x640.png 1024w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-3-96x60.png 96w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-3-65x41.png 65w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-3-918x574.png 918w" sizes="(max-width: 1440px) 100vw, 1440px" /></p>
<p> </p>
<p>W edytorze kodu możemy dodawać własne tagi czy skrypty, uzyskując jeszcze większą kontrolę nad kreacją czy stroną. Efektem końcowym jest gotowy baner do emisji:</p>
<p> </p>
<p><img loading="lazy" decoding="async" alt="grafika-4" class="size-full wp-image-12541 aligncenter" data-id="12541" height="438" src="/wp-content/uploads/2017/02/grafika-4-1.png" width="1440" srcset="https://www.bluerank.com/wp-content/uploads/2017/02/grafika-4-1.png 1440w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-4-1-300x91.png 300w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-4-1-1024x311.png 1024w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-4-1-120x37.png 120w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-4-1-65x20.png 65w" sizes="auto, (max-width: 1440px) 100vw, 1440px" /></p>
<p>Już podstawowe funkcje Web Designera pozwalają znacznie skrócić czas pracy nad dostosowywaniem komunikatu czy detali na banerach, gdy układ elementów pozostaje bez zmian. Przed podobnym problemem stanęliśmy podczas prac dla jednego z klientów branży medycznej &#8211; jego szeroka oferta produktów z wielu kategorii nie pozwoliłaby na stworzenie jednolitej linii kreatywnej, gdyż komunikat byłby zbyt ogólny. Z drugiej strony tworzenie remarketingu dynamicznego nie miało sensu, gdyż dotyczy nie pojedynczych produktów, lecz całych sekcji w sklepie.</p>
<p>Mieliśmy 17 rozmiarów grafik oraz 21 kategorii, każda z osobnym tekstem opisującym grupę produktów i copy wzywającym do działania. Daje to nam 357 różnych pojedynczych grafik do wykonania. Aby przyspieszyć proces oraz zmniejszyć koszty, zaproponowaliśmy stworzenie jednego szablonu kreacji, w którym tło, tekst oraz nazwy produktów byłyby podmieniane. Dzięki tej “warstwowej” budowie można było swobodnie podmieniać elementy, aby w ten sposób wygenerować wiele wersji kreacji.</p>
<p>Stworzyliśmy 17 podstawowych rozmiarów kreacji z jednym copy oraz tłem dla produktu. Wymagało to włożenia nieco większego wysiłku na początku, aby grafik oraz specjalista stworzyli gotowe paczki zip z kreacjami HTML5. Następnie wystarczyło sklonować gotowe kreacje i dzięki prostemu edytorowi tekstu, jak Sublime Text 2, edytować kod źródłowy kreacji.</p>
<p><img loading="lazy" decoding="async" alt="grafika-5" class="size-full wp-image-12542 aligncenter" data-id="12542" height="938" src="/wp-content/uploads/2017/02/grafika-5.png" width="1552" srcset="https://www.bluerank.com/wp-content/uploads/2017/02/grafika-5.png 1552w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-5-300x181.png 300w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-5-1024x619.png 1024w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-5-99x60.png 99w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-5-65x39.png 65w, https://www.bluerank.com/wp-content/uploads/2017/02/grafika-5-950x574.png 950w" sizes="auto, (max-width: 1552px) 100vw, 1552px" /></p>
<p>Podmiana fragmentu tekstu w wielu plikach zajmuje dosłownie sekundy, a dzięki temu można szybko przygotować wiele odmian kreacji bez potrzeby mozolnego edytowania każdego pliku graficznego.</p>
<p>Efekt końcowy? Praca grafika dalej wymaga stworzenia koncepcji kreatywnej oraz jej przetworzenie na szablon HTML5, lecz później zmiana tekstu na kreacjach to kwestia kilku kliknięć. Czas poświęcony na wprowadzanie drobnych zmian spada drastycznie.</p>
<p>W tym przypadku stworzyłem bardzo prosty baner i oczywiście nie poruszyłem bardziej zaawansowanych funkcji Web Designera jak:</p>
<ul>
<li>animacje</li>
<li>interakcje z banerem</li>
<li>dynamiczne elementy pobierane z DoubleClick Studio czy innych źródeł</li>
<li>efekty 3D</li>
<li>a nawet proste gry przeglądarkowe całe strony internetowe</li>
</ul>
<p>Polecam zapoznać się z możliwościami <strong><a href="https://www.google.com/webdesigner/">Google Web Designera</a></strong> oraz pobrać za darmo i samemu przetestować możliwości, jakie daje.</p>
<p> </p>The post <a href="https://www.bluerank.com/blog/zmniejszyc-koszty-tworzenia-banerow-dzieki-html5/">Jak zmniejszyć koszty tworzenia banerów dzięki HTML5?</a> first appeared on <a href="https://www.bluerank.com">Bluerank</a>.]]></content:encoded>
					
					<wfw:commentRss>https://www.bluerank.com/blog/zmniejszyc-koszty-tworzenia-banerow-dzieki-html5/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
