Denna specifikation är ämnad för producenter av annonsmaterial baserat på HTML5 och som ska användas till digital annonsering på Add Health Medias sajter. Följande riktlinjer är viktiga för kampanjens framgång och leverans, och material som inte följer riktlinjerna kommer därför inte att godkännas. Specifikationen är skriven för kampanjer som ska gå på annonsservern Xander (f.d AppNexus).
Generellt
- Materialet ska endast innehålla en (1) index.html-fil.
- Alla externa referenser måste vara https.
- Alla anslutningar måste göras genom https.
- Det är inte tillåtet att bryta sig ur iframes, s.k. framebusting.
- Vi rekommenderar att materialet max gör 15 requests (bilder, JS-bibliotek, fonter etc.)
- Vid ljus eller vit bakgrund måste materialet ha en svart 1px border.
- Använd inte animationer som tar stor datorkraft, t.ex. javascript-animerade snöfall.
- Animationer bör inte vara längre än 30 sekunder per loop.
- Använd CCS-animationer istället för Javascript-animationer i största möjliga utsträckning.
- Materialet får inte ta över sidans scrollfunktion.
- Observera att alla resurser räknas in i annonsvikten utan cache.
- Maxvikt 500kb.
Klick
Instruktioner från Xander:
- För annonser skapade i Google Web Designer
- För annonser skapade i Adobe Edge
- För annonser skapade i Adobe Animate
- För annonser skapade i övriga program
Rekommendationer
- Vi rekommenderar att 100% av annonsytan är klickbar.
- Klick på annons måste öppnas i ett nytt fönster/flik.
- Landningssidan får inte vara hårdkodad i annonsen, eftersom Xander kräver att den definieras i adservern i samband med uppladdning av materialet. Implementera istället klicken enligt nedan instruktioner:
1. Lägg till följande JavaScript i index.html
<script type="text/javascript"> function getParameterByName(name) { var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search); return match && decodeURIComponent(match[1].replace(/\+/g, ' ')); } var clickTag = getParameterByName('clickTag'); </script> |
2. Addera clickTag variabeln till valfritt element i HTML-koden,
Här följer några exempel:
Exempel 1 - div
<div onclick="window.open(clickTag, '_blank');"></div> |
Exempel 2 - JavaScript
<div id="banner"></div> <script> document.getElementById("banner").addEventListener("click", function() { window.open(clickTag, '_blank'); }, false); </script> |
Exempel 3 - a href
<a href="javascript:void(0)" onclick="window.open(clickTag, '_blank');"> |
3. Testa lokalt på datorn genom att öppna upp html filen i önskad webbläsare och sedan addera ?clickTag=http://www.example.com i webbläsarens adressfält, ladda om sidan med den nya adressen och sedan klicka på bannern. Hamnar du på www.example.com fungerar bannern som den ska.
-------------------------------
Information in English
This specification is intended for producers of advertising material based on HTML5 and which will be used for digital advertising at Add Health Media sites. The following guidelines are important for the success of the campaign and its delivery. Therefore materials that do not follow the guidelines will not be approved. The specification applies to campaigns that will run on Xander (former AppNexus) ad server.
Generally
- The material should only contain one (1) index.html file.
- All external references must be https.
- All connections must be made through https.
- It is not allowed to break out of iframes, also known as framebusting.
- We recommend that the material has a maximum of 15 requests (images, JS library, fonts, etc.)
- For light or white backgrounds, the material must have a black 1px border.
- Do not use animations that take a lot of computer power, e.g. javascript-animated snowfall.
- Animations must be no longer than 30 seconds.
- Use CCS animations instead of Javascript animations as much as possible.
- The material is not allowed to take over the scroll function of the page.
- Please note that all resources are included in the ad weight without cache.
- Max. weight 500kb.
Click
Instructions from Xander:
- For ads created in Google Web Designer
- For ads created in Adobe Edge
- For ads created in Adobe Animate
- For ads created in other programs
Recommendations
- We recommend that 100% of the ad space is clickable.
- Click on ad must open in a new window / tab.
- The landing page must not be hard-coded in the ad, as Xander requires it to be defined in the ad server when uploading the material. Instead, implement the clicks according to the instructions below:
1. Add the following JavaScript to index.html
<script type="text/javascript"> function getParameterByName(name) { var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search); return match && decodeURIComponent(match[1].replace(/\+/g, ' ')); } var clickTag = getParameterByName('clickTag'); </script> |
2. Add the clickTag variable to any element in the HTML code
Here are some examples:
Example 1 - div
<div onclick="window.open(clickTag, '_blank');"></div> |
Example 2 - JavaScript
<div id="banner"></div> <script> document.getElementById("banner").addEventListener("click", function() { window.open(clickTag, '_blank'); }, false); </script> |
Example 3 - a href
<a href="javascript:void(0)" onclick="window.open(clickTag, '_blank');"> |
3. Test locally on the computer by opening the html file in the desired browser and then adding? ClickTag = http: //www.example.com in the browser's address bar, reloading the page with the new address and then clicking on the banner. If you end up on www.example.com, the banner works as it should.