BuySellAds Content Portal

Creating Native Ad Experiences With Ad Serving Templates In Publisher Pro

Want to create a complex native ad unit? Learn how to create a custom ad serving template using Publisher Pro.
by , UI & Product Designer @BuySellAdson January 14, 2014

We’ve been hard at work on our Publisher Pro product the past couple months, and one of the things I’m most excited about is the recent addition of custom ad serving templates within the app.

This feature is now available to all Publisher Pro users. To access it, simply hit the cog icon in the top right corner, and select Ad Serving Templates from the drop-down menu.

Ad Serving Templates

I’m sure all of you are very familiar with good old banner ad formats like 728×90, 300×250, 125×125, etc. Well, advertising is evolving and BuySellAds is kicking things up a notch with custom ad serving templates.

Ad serving templates let you achieve pretty much anything you can dream of in terms of ad units. Of course we’ve taken care of creating a lot of them already, from interstitial to fully responsive ads and retina creatives, fly out boxes, fancy bars, and page peel ads. We now have over 15 ready-to-use ad serving templates which you can use right out of the box, or customize to better suit your needs.

Though the fun begins when you start creating your own templates. If you have basic knowledge of HTML and CSS, you can spin up new custom ad serving templates in no time at all.

How It Works

At BuySellAds, we’ve been using ad serving templates internally for years. Every time you see a 300×250 on a site, or an image+text ad like on Fusion Ads, there’s an ad serving template that powers it. When you create an ad serving template in your Publisher Pro account, you essentially tell our ad server exactly what you want it to serve when an ad is booked in that zone.

Creating Your First Ad Serving Template

The first thing you need is an idea. Once you know what you want your ad unit to look like and you have an idea of the markup/css you’ll need, the sky is the limit. Let’s take one of our own demos (the fly-out box demo) as an example, and I’ll walk you through how I created it.

The concept is simple. This ad unit is hidden by default and slides into view in the bottom right corner of the browser window as you scroll down the page. If you scroll back up, the fly-out box goes away. It’s a great way to grab the attention of visitors.

The fly-out box ad unit needs several elements in order to work and look like the demo. It needs an image, a short description, a call to action, and a close button.

Header, Ad, Footer

An ad template has 3 possible sections: a header, the ad’s content, and a footer. The Header box is where you would put your CSS, just like you would with a HTML document. The ‘Ad Content‘ box is where you should put the markup and JS you need to generate the ad unit – that means, the full HTML code as well as any javascript that you need. As for the Footer box, it’s the perfect place to put something like an ‘Advertise Here‘ link.

The Markup

The first thing I did was create a div and give it an id of #bsa_flyout. I could have called it simply #flyout (or even use a class instead of an id, like .flyout), but to make sure my markup and CSS would not interfere with other code that may run on someone’s site I used a more specific ID. This #bsa_flyout div is what holds the whole thing together as far as the markup goes.

Then inside that container, I put my close button link, and then a href with a class of .bsa_creative. Inside that href goes everything that I want to be made clickable.

To ensure this ad unit gets the most clicks possible, making the whole container clickable was the way to go (rather than create a linked image, and then link the text and then the button, etc… that’s just too much markup and it’s not as effective).

Here is what my markup looks like:



As you can see, every id or class I used has the bsa_ prefix. I think it’s better to stay on the safe side when naming classes and id. As you can see in the markup above, we have values such as ##statlink##, ##creative## and ##description##. Those are what we call Template Tags. Let’s see how that works.

Template Tags

Template tags are an essential part of ad serving templates. The template tags you create can be links, images, text, etc… for example, in our fly-out demo, we have a 125×125 image, some description text and a click-through URL. So we have the following template tags:

  • ##statlink##: this is the click-through URL
  • ##creative##: this is the 125×125 creative image
  • ##description##: this is the short text description

I should mention that when you create your own ad serving templates you can name template tags anything you want. For example, you could name your banner graphic BannerAd, and our system will automatically wrap it with # signs.

Then, you need CSS to make this look pretty.

The CSS

The CSS is also rather simple. I made my #bsa_flyout { position: fixed; } so it would always be visible as the you scroll the page, and I hid it by giving the “right” property a value of -322px, which effectively puts the container outside the viewport.


#bsa_flyout {
	position: fixed;
	z-index: 10001;
	bottom: 0;
	right: -322px;
}
#bsa_flyout a.bsa_creative {
	background-color: #333333;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(51, 51, 51)),to(rgb(34, 34, 34)));
	background-image: -webkit-linear-gradient(top, rgb(51, 51, 51), rgb(34, 34, 34));
	background-image: -moz-linear-gradient(top, rgb(51, 51, 51), rgb(34, 34, 34));
	background-image: -o-linear-gradient(top, rgb(51, 51, 51), rgb(34, 34, 34));
	background-image: -ms-linear-gradient(top, rgb(51, 51, 51), rgb(34, 34, 34));
	background-image: linear-gradient(top, rgb(51, 51, 51), rgb(34, 34, 34));
	overflow: hidden;
	width: 320px;
	height: 125px;
	display: block;
	border-left: 1px solid #000;
	border-top: 1px solid #000;
}
#bsa_flyout a.bsa_creative img {
	width: 125px;
	float: left;
}
#bsa_flyout a.bsa_creative span.bsa_flyout-content {
	line-height: 100%;
	padding: 10px 15px 15px;
	width: 165px;
	float: right;
}
#bsa_flyout a.bsa_creative span.bsa_flyout-recommended {
	float: left;
	width: 100%;
	clear: both;
	color: #666;
	text-transform: uppercase;
	font-size: 10px;
}
#bsa_flyout a.bsa_creative span.bsa_flyout-title {
	float: left;
	font-weight: bold;
	font-size: 13px;
	width: 100%;
	line-height: 120%;
	clear: both;
	margin: 10px 0;
	color: #fff;
}
#bsa_flyout a.bsa_creative span.bsa_flyout-cta {
	float: left;
	font-size: 10px;
	font-weight: bold;
	clear: both;
	margin: 5px 0 0;
	padding: 2px 10px 3px;
	text-align: center;
	color: #fff;
	background: #85B543;
	border-radius: 3px;
}
#bsa_flyout a.bsa_creative:hover span.bsa_flyout-title {
	color: #388acc;
}
#bsa_flyout a.bsa_creative:hover span.bsa_flyout-cta {
	background: #fff;
	color: #000;
}
a#bsa_close {
	cursor: pointer;
	position: absolute;
	right: 10px;
	font-size: 12px;
	top: 0;
	line-height: 100%;
	padding: 3px 6px 4px;
	border-radius: 3px;
	background: #000;
	border: 1px solid #555;
	border-top: none;
	color: #fff;
	text-decoration: none;
	z-index: 10002;
}
.flyoutbox_show #bsa_flyout{
    right: 0;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.5s;
}
.flyoutbox_hide #bsa_flyout{
    right: -322px;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

Javascript

The JS is where the magic happens. It’s what shows and hides the ad. Obviously not all custom ad serving templates will need Javascript, but the fly-out box does. We’ve used Javascript here rather than jQuery or another JS library. This is to make sure the code that is being served to display ads does not interfere with any pre-existing code or library you may be running on your site.


var _flyoutbox_##org_zoneid## = {
	//
	hide: function () {
		this.removeClass(document.getElementById('bsap_##org_zoneid##'), 'flyoutbox_show');
		this.addClass(document.getElementById('bsap_##org_zoneid##'), 'flyoutbox_hide');
	},
	show: function () {
		this.removeClass(document.getElementById('bsap_##org_zoneid##'), 'flyoutbox_hide');
		this.addClass(document.getElementById('bsap_##org_zoneid##'), 'flyoutbox_show');
	},
	//
	hasClass: function (el, name) {
		return new RegExp('(\\s|^)'+name+'(\\s|$)').test(el.className);
	},
	addClass: function (el, name) {
		if (!this.hasClass(el, name)) {
			el.className += (el.className ? ' ' : '') +name;
		}
	},
	removeClass: function (el, name) {
	   if (this.hasClass(el, name)) {
	      el.className=el.className.replace(new RegExp('(\\s|^)'+name+'(\\s|$)'),' ').replace(/^\s+|\s+$/g, '');
	   }
	}
};
// click to close
document.getElementById('bsa_close').onclick = function () {
	document.getElementById('bsa_flyout').style.display = 'none';
	return false;
};
var flyoutbox_didScroll;
window.onscroll = function () {
    flyoutbox_didScroll = true;
};
// check and see how far they have scrolled
var flyoutbox_scrollInterval = setInterval( function () {
    if ( flyoutbox_didScroll ) {
        flyoutbox_didScroll = false;
        // figure out how far the user has scrolled from the top of the page
        var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
        //alert(scrollTop);
        // if they have scrolled > 250px
        if (scrollTop > = 250) {
        	_flyoutbox_##org_zoneid##.show();
        }
        // if they scroll back to the top, we need to hide the ad
        if (scrollTop < 250) {
            _flyoutbox_##org_zoneid##.hide();
        }
    }
}, 500);

If you're building your own custom ad serving template and you already have the jQuery library loaded on your site, feel free to write jQuery instead of raw Javascript. Custom ad serving templates are meant to be highly customizable. So if you want to run jQuery, MooTools, Prototype, or even Scriptaculous on your site, that's all fine.

Conclusion

As you can see it's rather easy to create ad serving templates. If you have an idea and can write the necessary markup, we can serve it via Publisher Pro - and more importantly, you can sell ads in those zones!

On the other hand, you can always use one of our pre-made templates if you prefer. Or, use a pre-made template as a starting point and customize it to better suit your needs.

Join BuySellAds Publisher Pro!

BuySellAds Pro is open for public registration and we're constantly adding new and exciting features. If you're not yet a BSA Publisher Pro user, now would be a good time to join!

Recommended Article Template Monster’s BuySellAds Success Story

Helen Bailey of TemplateMonster.com wanted to share her company's experience with BuySellAds. They've had to tackle a lot of issues faced by advertisers online, so we thought some advice would be helpful to our advertisers (and…