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

Aangesloten adverteerders kunnen bij Daisycon onbeperkt promotiemateriaal voor de publishers ter beschikking stellen. Daisycon stimuleert adverteerders om zoveel mogelijk goed promotiemateriaal ter beschikking te stellen. Wij helpen je dan ook graag met het correct aanleveren hiervan. Momenteel zijn de meest voorkomende promotiematerialen; product feeds, tekstlinks, promotiecodes, banners (gif, jpeg, png) en HTML-banners. HTML-content kan je niet zelf aan het Daisycon-systeem toevoegen. Dit moet Daisycon voor je doen. In dit artikel lees je op welke manier je het HTML-materiaal moet aanleveren.

Inhoud van dit artikel:

  1. Welke bannerformaten worden veel gebruikt?
  2. HTML-banners aanleveren

1. Welke bannerformaten worden veel gebruikt?

Over het algemeen is de regel dat hoe groter de banner is, hoe meer er op geklikt wordt. Hoe meer materiaal je aanlevert, hoe beter de publishers hun promotie kunnen inzetten. Wij raden je aan in ieder geval de volgende formaten aan te leveren:

  • Medium rectangle (300x250 pixels)
  • Large rectangle (336x280 pixels)
  • Leaderboard (728x90 pixels)
  • Wide skyscraper (160x600 pixels)
  • Email template (500x500)
  • Full banner (468x60 pixels)
  • Large mobile banner (320x100 pixels)

2. HTML-banners aanleveren

Het voordeel van HTML-content is dat je de content dynamisch kunt maken. Denk bijvoorbeeld aan banners met pulldown-menu's en invulvelden met zoekmogelijkheden (zoals een postcode-of domeinchecker). Ook kan je mailtemplates beschikbaar stellen zodat e-mailpartijen makkelijker je acties kunnen promoten.

2.1 Implementeren van de clicktag in HTML

Als je 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 je op de plek waar je normaal gesproken 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 je één link in de HTML-banner gebruikt. Wil je doorlinken naar bijvoorbeeld meerdere producten, lees dan hieronder verder bij 2.3 HTML-content met verschillende links.

2.2 Afbeeldingen aanleveren

Daisycon prefereert dat afbeeldingen in HTML-materiaal bij de adverteerder worden gehost. De afbeeldingen en het externe materiaal moet dan wel op een veilige "https://" omgeving worden gehost. Mocht je de afbeeldingen toch bij Daisycon willen hosten, dan dienen de afbeeldingen als volgt in de templates gezet te worden:

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

Op de plaats waar nu 'afbeelding.gif' staat, vul je de exacte naam van de afbeelding in, 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.

2.3 HTML-content met verschillende links

Stel dat je HTML-banners wilt distribueren met een top 10 van producten die je op de volgende (fictieve) locatie geplaatst hebt: https://mobieltoestel.eu/top10.php

Waarbij de inhoud de volgende linkopbouw heeft:

  • Merk 1 - https://mobieltoestel.eu/product/nr1.html
  • Merk 2 - https://mobieltoestel.eu/product/nr2.html
  • Merk 3 - https://mobieltoestel.eu/product/nr3.html
  • Etc.

Dan zetten we de 'base-URL' (https://mobieltoestel.eu/product) om in een via ons systeem te meten URL en sturen deze URL naar je terug. Voeg deze deeplink-url encoded toe.

Voorbeeld

# Merk 1 - #CLICKTAG#nr1.html
# Merk 2 - #CLICKTAG#nr2.html
Etc.

Een voorbeeld van een url-encoded-link ziet er zo uit:
#CLICKTAG#nl%2Fblog%2Fenergievergelijker%2F

Zodra je klaar bent met de aanpassingen kan je de HTML-code naar ons opsturen. Wij stellen deze vervolgens beschikbaar aan de publishers.

2.4 Publiceren van banners in Adobe Animate

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, alle bestanden in één map dus. Dit doe je door alle velden leeg te maken en daarna de instellingen op de slaan.

Screenshot_2019-06-03_at_12.52.51.png

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 staat, is het makkelijker om het 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';">

Samenvatting aanleveren HTML-content

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

  • Het materiaal dient te worden voorzien van een clicktag.
  • Geef bij je channelmanager aan wat de base-url moet zijn.
  • Afbeeldingen moet je zelf hosten of aanleveren volgens de Daisycon-specificaties uitgelegd in 2.2.
  • Het materiaal lever je aan bij je 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 je HTML-materiaal hebt laten maken door derden, dan kan je het beste de designer vragen de clicktag en andere specificaties te implementeren. HTML-materiaal wordt met veel verschillende software-pakketten gemaakt (Adobe Edge, Google Web Designer, Swiffy, etc). Daarom is het voor Daisycon niet altijd mogelijk om te ondersteunen bij de implementatie. Voordat je alle specificaties door laat voeren door je designer, mag je uiteraard altijd de banner ter controle naar Daisycon sturen.

Banners nodig voor je affiliateprogramma?

Een goede online campagne kan niet zonder banners. Daisycon heeft een exclusieve samenwerking met Bannersetje. Bannersetje staat voor je klaar om de mooiste en best converterende banners te bouwen in jouw huisstijl. En dat voor een zeer concurrerende prijs.

Maak de keuze uit een van de pakketten, vertel wat je nodig hebt en ze gaan direct voor je aan de slag.

Klik hier voor meer informatie