Urządzenia: Desktop, Mobile
Kreacja HTML5 nie może być zapętlana dłużej niż 30 sekund.
Przykładowa kreacja HTML5
<!DOCTYPE html>
<html>
<head>
<!-- assets, libs etc. -->
</head>
<body>
<!-- creative code, image etc -->
<img src="data:image/png;base64,..." />
</body>
</html>
Implementacja zliczania kliknięć: aby umożliwić zliczanie kliknięć w kreację, tuż przed zamknięciem znacznika </body> należy umieścić poniższy skrypt:
<script type="text/javascript">
var parsed = (document.location.href.split('#')[1]||'').split('&');
var params = parsed.reduce(function (params, param) {
var param = param.split('=');
params[param[0]] = decodeURIComponent(param.slice(1).join('='));
return params;
}, {});
document.getElementById('creativelink').href = params.clickTag;
</script>
oraz objąć cały obszar klikalny kreacji znacznikiem <a>, dbając o zgodność zadeklarowanych identyfikatorów (id):
<a id="creativelink" target="_blank">
<img src="data:image/png;base64,..." />
</a>
Przykładowy kod kreacji, uwzględniający wszystkie wskazane wyżej modyfikacje:
<html>
<head>
</head>
<body>
<a id="creativelink" target="_blank">
<img src="data:image/png;base64,..." />
</a>
<script type="text/javascript">
var parsed = (document.location.href.split('#')[1]||'').split('&');
var params = parsed.reduce(function (params, param) {
var param = param.split('=');
params[param[0]] = decodeURIComponent(param.slice(1).join('='));
return params;
}, {});
document.getElementById('creativelink').href = params.clickTag;
</script>
</body>
</html>
Obsługa kreacji typu MultiClick: każdy dodatkowy obszar klikalny musi posiadać swój dedykowany znacznik <a> zawierający unikalny identyfikator (id):
<!-- podstawowy obszar klikalny -->
<a id="creativelink" target="_blank"><img src="data:image/png;base64,..." /></a>
<!-- obszar klikalny 1 -->
<a id="creativelink1" target="_blank"><img src="data:image/png;base64,..." /></a>
<!-- obszar kilikalny 2 -->
<a id="creativelink2" target="_blank"><img src="data:image/png;base64,..." /></a>
W celu obsłużenia dodatkowych obszarów klikalnych, należy zmodyfikować skrypt umieszczony tuż przed zamknięciem znacznika <body>. Modyfikację należy wykonać według poniższego szablonu, ze wskazaniem na wyżej zadeklarowane identyfikatory (id):
document.getElementById('creativelink').href = params.clickTag;
document.getElementById('creativelink1').href = params.clickTag1;
document.getElementById('creativelink2').href = params.clickTag2;
Dobre praktyki reklamowe w Gazeta.pl
Rynek reklamy
internetowej nieustannie się zmienia, aby dostarczać maksymalne korzyści
zarówno dla reklamodawcy jak i użytkownika, czyli odbiorcy potencjalnej
reklamy. Od pewnego czasu możemy zauważyć silny trend związany z zapewnieniem jak
najlepszego User Experience, mający na celu poprawić odbiorcy kontakt ze
stronami, np. zwiększyć ich wydajność, zminimalizować przepustowość sieci czy
ograniczyć zużycie baterii.
Tematem tym w
ostatnim czasie zajął się także Google, wprowadzając ograniczenia dla
nieprzyjaznych użytkownikom reklam – tzw. Heavy Ads Interventions. Przeglądarka
może całkowicie zablokować reklamę,
która:
Jeśli nie chcemy, aby kreacja
została zablokowana w przeglądarce istotne jest przestrzeganie kilku elementów
podczas tworzenia reklamy. Są nimi:
Reklama
spełniająca wyżej wymienione kryteria zostanie szybciej załadowana, wyświetlona
i zauważona, co przekłada się na lepsze statystyki kampanii.
Wskazówki tworzenia przyjaznych kreacji
Poniżej
zamieścimy kilka sugestii dotyczących tworzenia bardziej przyjaznych reklam. Wszystkie
wskazówki bazują na wytycznych
dotyczących tworzenia kreacji reklamowych według organizacji IAB:
https://www.iab.org.pl/wp-content/uploads/2020/08/Dobre-Praktyki-Viewability-IAB-Polska-2020.pdf
https://www.iab.org.pl/wp-content/uploads/2020/04/Standardy_IABPolska_2016.pdf
https://www.iab.com/wp-content/uploads/2019/04/IABNewAdPortfolio_LW_FixedSizeSpec.pdf