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 300×250 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

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>