Hoe voeg ik HTML-banners toe en wat zijn de standaarden?

Naast de bekende gif-banners kunt u ook HTML-content aan publishers beschikbaar stellen. Het voordeel hiervan is dat u de content dynamisch kunt maken. Denk bijvoorbeeld aan banners met pulldown menu’s, invulvelden met zoekmogelijkheden, zoals een postcode- of domeinnaam checker. Ook kunt u HTML-mailtemplates beschikbaar stellen zodat e-mailpartijen makkelijker uw acties kunnen promoten.

Bij het plaatsen van HTML-banners komt vrij veel technische kennis kijken. Daarom kunt u als adverteerder niet zelf HTML-banners aan het Daisycon-systeem toevoegen. U kunt uw HTML-banners bij uw channelmanager aanleveren. Zij zorgen ervoor dat deze op een juiste manier in het systeem worden gezet.

Gif-banners kunt uw wel zelf toevoegen. Hoe u dit doet leest u hier

In dit FAQ-item leggen wij u stap voor stap uit aan welke voorwaarden uw HTML-materiaal moet voldoen, zodat wij het eenvoudig kunnen plaatsen.

Implementeren van de clicktag in HTML

Als u HTML-banners aan het Daisycon-systeem wil toevoegen, dan kan dit het eenvoudigst door het toevoegen van een clicktag aan de banner. De clicktag wordt door Daisycon vervangen door de juiste link. Deze clicktag zet u op de plek waar u normaalgesproken de link zou plaatsen.


De clicktag dient er als volgt uit te zien:


#CLICKTAG#


Voorbeeld:
<a href=”#CLICKTAG#” target=”_blank” title=”link” ></a>

Let op! De clicktag-methode kan alleen worden gebruikt als u één link in uw HTML-banner heeft. Linkt u bijvoorbeeld naar meerdere producten, lees dan hoofdstuk 4.3.

U kunt HTML-banners niet zelf in het systeem plaatsen. Dit moet Daisycon voor u doen. Banners zonder clicktag worden niet in behandeling genomen. Lees hieronder meer over de procedure.

Afbeeldingen aanleveren

Daisycon prefereert dat afbeeldingen in HTML-materiaal bij de adverteerder worden gehost. Mocht u de afbeeldingen toch bij Daisycon willen hosten dan dienen de afbeeldingen als volgt in uw templates te worden gezet:

<img src=”#DOMAIN#/afbeelding.gif” alt=”afbeelding” />

Op de plaatst waar nu ‘afbeelding.gif’ staat, moet u de exacte naam van de afbeelding plaatsen, zoals hij bij Daisycon in het .zip bestand wordt aangeleverd.

Let op! Afbeeldingen moeten in dezelfde map worden gezet als de rest van de code. Ze mogen niet in een aparte sub-map staan, omdat het systeem ze dan niet herkent.

HTML-content met verschillende links

Stel dat u een HTML-banner wilt distribueren met een top 10 van producten die u op een volgende locatie heeft geplaatst: http://mobieltoestel.eu/top10.php.

Waarbij de inhoud de volgende linkopbouw heeft:

  • Merk 1 – http://mobieltoestel.eu/product/nr1.html
  • Merk 2 – http://mobieltoestel.eu/product/nr2.html
  • Merk 3 – http://mobieltoestel.eu/product/nr3.html

Dan zetten wij de 'baseURL' (http://mobieltoestel.eu/product) om in een via ons systeem te meten URL en sturen het naar u terug.

U dient alleen de deeplink url encoded toe te voegen.

Voorbeeld:

# Merk 1 – #CLICKTAG#nr1.html
# Merk 2 – wordt dan: #CLICKTAG#nr2.html
etc., 

Een voorbeeld van een url encoded link zou er zo uit kunnen zien: #CLICKTAG#nl%2Fblog%2Fenergievergelijker%2F

Zodra u klaar bent met de aanpassingen kunt u de HTML-code naar ons opsturen, wij stellen deze beschikbaar aan publishers.

Publiceren van banners in Adobe Edge

Ga naar File -> Publish settings. In dit scherm staat hoe de banner geëxporteerd moet worden. Voor Daisycon is het noodzakelijk dat er geen extra mappen zijn, dus dat alle bestanden in één map staan. Dit doe je door alle velden leeg te maken (zie screenshot) en sla daarna de instellingen op.

Clicktags toevoegen met Adobe Edge

Het is belangrijk dat de clicktags niet in het losse JavaScript-bestand worden geplaatst. Als er één clicktag in de hele banner is, is het het makkelijkste om onderstaande stukje code toe te voegen aan de <body> tag:


<body onclick="javascript:window.open('#CLICKTAG#','_blank');" onmouseover="javascript:this.style.cursor='pointer';" onmouseout="javascript.this.style.cursor='auto';">

Procedure

Voor de volledigheid leggen we nog een keer stap voor stap uit welke stappen moeten worden gezet om HTML-content aan te leveren:

  • Het materiaal dient te zijn voorzien van een clicktag (zie hoofdstuk 4.1 en 4.3).
  • U geeft bij uw channelmanager aan wat de base-url moet zijn (die door het Daisycon-systeem op de plaats van de clicktag moet worden neergezet).
  • Afbeeldingen moet u of zelf hosten, of aanleveren volgens de Daisycon-specificaties zoals uitgelegd in hoofdstuk 4.2. De afbeeldingen moeten in dezelfde map worden gezet als de rest van de code. Ze mogen niet in een aparte map staan.
  • Het materiaal levert u aan bij uw channelmanager. De channelmanager zorgt ervoor dat het materiaal in het systeem wordt geplaatst. Houd er rekening mee dat het 1 à 2 werkdagen kan duren voordat dit is doorgevoerd.

Indien u uw HTML5-materiaal heeft laten maken door derden, dan kunt u het beste uw leverancier vragen de clicktag en andere specificaties te implementeren. Omdat HTML-materiaal met veel verschillende softwarepakketten worden gemaakt (zoals Adobe Edge, Google Web Designer of Swiffy) is het voor Daisycon niet altijd mogelijk om u te ondersteunen bij de implementatie. Voordat u alle specificaties door laat voeren mag u uiteraard altijd een banner ter controle naar Daisycon sturen.