Third Party Banner Specifications
Third Party banners have to be approved per client level and there has to be a good reason for using them.
Responsiveness
If the banners are responsive and created by the client without our assistance, then responsive banners are allowed. Otherwise the banner should be created as a static 300x250 creative.
Fonts
- Google fonts are allowed
- Custom fonts should be images
Weight limit
Total weight limit is the same as for our normal banners. The difference is that Adform scripts are not accounted for total banner weight. When the creative is served from another third party, then we have to account for their scripts.
Third Party Banner Testing
We will include our method of checking banner weight
- Upload banner to blank page
- Remove Adform scripts from network log
- Calculate rest of the assets weight
Example calculation for Adform banner
- Total banner weight is 251 kb
- Add all images/media weight, 68kb
- Add banner javascript weight, 11.7kb
- Add CDN weight (createjs in this example), 62.8kb
- Conclusion: banner weight is 142.5kb
Example calculation for Google banner
- Total banner weight is 283 kb
- Add all images/media weight, 76.3kb
- Add banner javascript and CDN weight, 195kb
- Conclusion: banner weight is 271,3kb
Example image of how we get banner weight
Responsive Third Party Banner Examples
From the client we expect two files: Zip, where the code has been placed into HTML and the serving script that is inserted inside the HTML code.
We have 2 solutions that we mainly use to make banners responsive
Example 1:
Only works with third party banners that injects image.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Huawei P30</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1">
<script type="text/javascript">
document.write('<script src="'+ (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random()) +'"><\/script>');
</script>
<style>
html,body {
-webkit-font-smoothing: antialiased;
margin: 0;
height: 100%;
width: 100%;
padding: 0;
top: 0;
left: 0;
position: relative;
}
.adform_ad, .adform_ad div {
display: block !important;
width: 100% !important;
height: 100% !important;
position: absolute;
top: 0;
left: 0;
}
.adform_ad {
position: relative;
}
.adform_ad img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
position: relative;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="adform_ad">
<script src="https://bs.serving-sys.com/BurstingPipe/adServer.bs?cn=rsb&c=28&pli=27939404&PluID=0&w=1024&h=675&ord=[timestamp]&ucm=true"></script>
<noscript>
<a href="https://bs.serving-sys.com/BurstingPipe/adServer.bs?cn=brd&FlightID=27939404&Page=&PluID=0&Pos=199254030" target="_blank">
<img src="https://bs.serving-sys.com/BurstingPipe/adServer.bs?cn=bsr&FlightID=27939404&Page=&PluID=0&Pos=199254030" border=0 width=1024 height=675>
</a>
</noscript>
</div>
</body>
Example 2:
Works with image or html5 banner.
<head>
<title>Adform Toolkit Ad</title>
<meta charset="UTF-8">
<!-- Adform API Script -->
<script type="text/javascript">
document.write('<script src="'+ (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random()) +'"><\/script>');
</script>
<style>
body {
background: #fff;
}
</style>
</head>
<body>
<div id="container">
<script language="javascript" src="//track.adform.net/adfscript/?bn=35118127;OOBClickTrack=%%c1"></script>
</div>
<script>
var container = document.getElementById('container');
function ResizeHax() {
var width = 600;
var w = window.innerWidth;
container.style.transform = 'scale(' + (w/width) + ') translateZ(0px)';
}
container.style.transformOrigin = "0 0";
ResizeHax();
window.addEventListener('resize', function() {
ResizeHax();
});
</script>