HTML5 банери в DFP

Наложи се да изготвим кратко ръководство за използването на clickTag за банерите публикувани през DoubleClick For Publishers (DFP). Публикуваме част от него тук за да бъде в полза и на други нуждаещи се. Актуално към средата на 2018 г.

Всички елемент на един HTML банер (изображения, css, js, html) следва да бъдат пакетирани в един общ файл с разширение ZIP.

Оcновният файл трябва да бъде с име index.html. Изображения, css, js включени в ZIP файла в банера следва да бъдат реферирани с относителен път.

Например: ако логото се намира в папка images:
Грешно: C:/My files/Banner/images/logo.png
Грешно: /images/logo.png
Правилно: images/logo.png

Ако се използват отдалечени (външни) ресурси е задължително те да бъдат зареждани през SSL (https).

Например: ако е необходимо да заредите отдалечен js:
Грешно: http://investor.bg/js/banner.js
Правилно: https://investor.bg/js/banner.js

ClickTag в HTML5 банари

За да се записва статистика за броя кликвания върху банера от DFP е необходимо да се използва параметър clickTag.

Между <head></head> таговете на HTML5 банера се добавя:

<script type="text/javascript">
var clickTag = "https://investor.bg/";
</script>

Като “investor.bg” е изходящата връзка.

На кликаемият елемент се постава onclick атрибут, например:

<a href="#" onclick="javascript:window.open(window.clickTag,'_blank')"> … </a>

При повече от една кликаеми области в банера се добавят съответния брой clickTag:

<script type="text/javascript">
var clickTag   = "https://investor.bg/";
var clickTag2 = "https://investor.bg/page1";
var clickTag3 = "https://investor.bg/page2";
</script>

и

<a href="#" onclick="javascript:window.open(window.clickTag,'_blank'" >...</a>
<a href="#" onclick="javascript:window.open(window.clickTag2,'_blank'">...</a>
<a href="#" onclick="javascript:window.open(window.clickTag3,'_blank'">...</a>

На първият ClickTag не се поставя индекс 1.

Да се избягва добавянето на атрибут target=”_blank” в таг-а за връзки, тъй като при някои браузъри (например Firefox) се отваря допълнителен прозорец с js грешка.

Например:

Некоректно: 
<a href="#" onclick="javascript:window.open(window.clickTag")" target=”_blank”>...</a>
Правилно:
<a href="#" onclick="javascript:window.open(window.clickTag3,'_blank')">...</a>

Създаване на clickTag в Google Web Designer

В банерите създавани в Google Web Designer е необходимо кликаемата област да бъде създадена като Tap area. От Component се избира Tap Area и се поставя на необходимото място и съответния размер. На кликаемата област трябва да се дефинира събитие - с десен бутон на мишката се избира събитие “Add event…” > Mouse > Click > Google Ad >Exit ad.

Тестване на банери за правилно поставен clickTag

За правилното поставяне на clickTag може да се провери с помощният инструмент на Google:

Банери за DoubleClick Campaign Manager/ DoubleClick Bid Manager
https://h5validator.appspot.com/dcm/asset

Имайте предвид, че за съжаление, този инструмент понякога може да не отчете грешки, но банерът да не бъде съвместим с DFP.

Инструментът за DoubleClick Campaign Manager/ DoubleClick Bid Manager ( https://h5validator.appspot.com/dcm/asset ) е различен от този за банери в AdWords ( https://h5validator.appspot.com/adwords/asset ). Банерите за DFP трябва да се проверяват с първия.

Вижте още за:

банери clickTag