Guide til clicktracking
En lille dansk mini guide til clicktracking på HTML5 bannere
Efter mange års erfaring med produktion af HTML5-animerede bannere til brug i online annoncering, ved jeg hvor vigtigt det er, at bruge den rette clicktracking eller kliksporing, som det hedder på dansk. Uden det, er bannerne på en måde værdiløse, og kan ikke bruges i diverse Ad servere.
Hvad er en Ad server?
En ad server, er det sted hvor digitale annoncer bliver uploadet, så de kan køre på diverse hjemmesider på nettet.
Ordet ad server, kommer fra “advert” som betyder annonce på engelsk, og server, som er en online host, der har en stor båndbredde, dvs. der er “plads” på disse servere, til at flere hundrede tusinde(hvis ikke millioner) mennesker kan se indholdet der ligger der, i det her tilfælde annoncer, uden serveren bliver lagt ned.
Bruges en almindelig host og server, som der f.eks. bliver brugt ved små/medium store hjemmesider, er der som regel ikke nok båndbredde (bandwith) til at det indhold der ligger der, kan trække så mange besøgende ind uden at serveren bliver lagt ned. Det opleves f.eks. når en vare på en hjemmeside er efterspurgt af mange, så kan serveren heller ikke klare alt den trafik, men det kan ad servere.
Clicktags
For at et HTML5 banner virker i disse ad servere, skal der et specifikt clicktag til. Et clicktag / kliktag er ikke bare et almindeligt HTML a href link, der gør banneret klikbart, men der skal udover det tilføjes et unikt tag der gør, at banneret og dets klik bliver læst i ad server systemet, så udbyderen af HTML banneret i sidste ende kan se hvor mange der egentlig har klikket på banneret og er kommet ind på deres hjemmeside.
Et clicktag varierer fra ad server til ad server, og de fleste ad servere har en guide liggende på deres hjemmeside, hvori der beskrives hvordan det tilføjes til et banner. De sider har jeg været på tusinder af gange, så jeg besluttede mig for, via denne blog, at have de clicktags som jeg bruger, herinde, samlet, på en side. Selv tak Signe<3
Ad servere
Der findes mange forskellige ad servere, hvoraf de fleste kender Googles – Google Ad Manager, men der findes mange flere udover den. De ad servere, som jeg har arbejdet med gennem tiden, er Google Ad Manager, Adnami, Adform, Nexta io, Adtech(nu Oracle) og Platform 161.
De clicktags jeg bruger mest
Google clicktag
Åben HTML filen hvori banneret er, og find < meta > tagsne øverst i dokumentet, det ligger imellem < head > start og < head > slut.
Lige under det sidste meta tag, indsættes dette:
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com";
</script>
Her angives bredden og højden på HTML5 banneret i < meta > tagget.
Inde i < script > sættes der en javascript variabel, som hedder clickTag, som er det tag, der afgør om Google læser klikket på banneret. Her skal URL’en også udskiftes med den URL, som udbyderen af banneret ønsker at banneret skal linke hen til.
Sidst, men ikke mindst, skal selve linket tilføjes rundt om banneret, som ligger længere nede i dokumentet, nemlig hvor < body > starter.
Indsæt dette kode, som er et almindeligt HTML link, rundt om banneret, med med den Javascript variabel vi lavede før:
<a href="javascript:void(window.open(clickTag))"> Her er banneret </a>
Det skal indsættes efter < body > og afsluttes efter sidste < div >. Det vil så gøre, at den URL der står i variablen øverst i dokumentet, bliver den URL hvor banneret linker hen når der klikkes på det.
Adform Clicktag
Først skal Adforms bibliotek indlæses, og det sker i toppen af HTML dokumentet hvori banneret er i. Så efter sidste < meta > tag og før < /head > slut indsættes dette script:
Derefter skal selve kliktagget tilføjes til banneret. Det kan gøres ved at den < div > der går rundt om hele banneret får et ID, f.eks. "klik", ellers kan det ID som der er i forvejen også bruges, f.eks. "banner".
Det ID skal derefter kaldes så det kan gøres klikbart, og i stedet for at sætte det i toppen af dokumentet, ligesom Googles, skal det tilføjes efter banneret, altså nederst i dokumentet. Så efter sidste < / div> tilføjes dette script hvori clicktagget vil virke derefter. Her kan URL'en ændres, så den matcher den URL, som udbyderen af banneret ønsker at banneret skal linke hen til:
Nexta io Clicktag
Nexta vil gerne have, at vi kalder deres bibliotek først. Så øverst i HTML dokumentet, hvori banneret er, skal der efter sidste < meta > og inden < /head > slut, tilføjes dette kald:
Derefter skal selve kliktagget tilføjes banneret, og det gøres ved at tilføje et HTML link rundt om selve banneret, efter < body > start:
<a href="javascript:void(0)" onClick="window.open(APPNEXUS.getClickTag(), '_blank');"> Her er banneret </a>
Her er der brugt en javascript variabel i linket, som hedder getClickTag og som er det kliktag som Nextas servere reagerer på.
Med Nexta skal der ikke indtastes eller sættes en manuel URL eller script med dette i, som i andre ad servere, da det er noget der bliver indsat i systemet når de uploader banneret. Derfor husk altid at fortælle AdOperations eller dem der skal sætte banneret ind, hvilken URL banneret skal linke hen til.
Adnami Clicktag
Adnami's clicktag er et stykke javascript kode, hvori selve clicktagget er lavet som en variabel der reagerer på det ID der er rundt om banneret. Dvs. den < div > der ligger uden om banneret skal have et ID, enten "banner" eller "klik".
const clickTagPrefix = "${CLICK_URL}",
clickURL = "https://www.example.com",
clickElement = document.getElementById("banner");
function exitHandler(e) {
let clickTag;
try{
__adnamiAdsAPI.v1.tracker.trackExit();
clickTag = clickTagPrefix + clickURL;
}catch{
console.log("Adnami API Unavailable");
clickTag = clickURL;
}
window.open(clickTag, '_blank');
}
Her skal blot udskiftes den URL hvor udbyderen af banneret ønsker at banneret skal linke hen, samt ID'et som er rundt om hele banneret.
Skriv en kommentar