The code that you ad to your website which actually loads your ads, is called an Ad Zone.
Typically, an Ad Zone represents a single banner size, such as a 300×250 graphic or creative type that you want to have load in a specific spot on your website. Usually, this can require some work up front when you’re first getting set up, and then for the most part you can leave it as-is for months or even years without making further changes to your site.
There are generally three steps for creating your ad zones and adding them to your site:
1. Configure your ad sizes
Advertserve comes with a whole bunch of IBA-recommended creative sizes right out of the box. This means that you won’t need to configure many of the common sizes, they will be readily available. However, if your site has specific ad sizes that are unique to you, you’ll need to head over to the Settings > Ad Sizes area in the AdvertServe menu. There, you can define that new creative size that you’ll want to be using.
2. Define your zones
Once you have your banner dimensions defined, head over to the Zones area in the AdvertServe menu. Here, you’ll select the type of ad zone you want to create, in this case, a banner ad. You’ll then define the dimension you want this zone to serve.
You can also configure what devices you want this zone to load from. This is a great way to make a certain ad size not show on a certain device. You can also configure an ad zone to automatically be replaced with a different ad zone on a different device, which is a great way to quickly make your website’s ads responsive (imagine loading a 728×90 on desktop but then having the same spot load a 300×250 on mobile).
Note: in this post, we’re focusing on banner ads, which are still the most common type of ad most websites used. Zones are also the way you’ll add all the other types of creatives, like popups, wallpapers, dynamic ads, HTML5 banners, Video ads, and all the other types of ad styles that AdvertServe offers.
3. Generate the code and add it to your site
Once your zones are configured, it’s time to add them to your site.
Here’s an important thing to keep in mind: assuming you are treating all the ads of a certain type the same way, you can use the same ads in multiple locations on your site. For example, say you have a standard 300×250 banner size that you sell that you have rotating throughout your site.
Assuming you charge your advertisers the same price no matter where the ad appears, you can use a single “300×250 zone” and just place its code in multiple locations on your site. You might have some of these square banners on your site sidebar on desktop, and some more between your articles on mobile. As long as they are the same to you and your advertisers, you can use one zone for all of them.
However, let’s say you have a special “premium” spot in a highly visible are of your website, this would be the right time to create a separate zone specifically for that one zone, and name it “300×250 Premium”, for example. This will then allow you to make sure that only certain campaigns (that assumingly have paid extra), get to appear in that spot.
With all that said, how do you add the code to your site? You can do that either with the small “generate code” icon beside the zone, or through the code wizard if you need more advanced options. Right out of the box, here are a few best practices to consider:
- Use AJAX whenever possible, this will make your ads load asynchronously, which means your site will load faster and can be configured to only show ads on parts of the page where people actually scroll to.
- Generate your code with comments, so you can quickly see exactly what type of zone you’re looking at when the code has been added to your site.
- Generate your code with secure HTTPS enabled. This solves a lot of problems with ads not showing up because of insecure sources.
- If you want to have multiple ads appear side by side or one above the other, no need to copy and paste your ad zone code twice! Instead, use our handy feature to automatically generate multiple ads with spaces in between them.
You can then add this code to your site yourself or with the help of your site developer. Many websites, like WordPress, make it easy to add “custom HTML” code into different areas of your site, all you need to do is paste your ad code into those spots.