A zone tag is the code chunk that places your banner on a page. It passes along the banner information, and usually some extra information, for tracking and display. Choosing the right type is really important because, depending on the situation, your banner might not show or you might miss some features if the zone isn’t properly configured.

For most people the asynchronous JavaScript tags will work, and if you’re not sure, they’re definitely the ones to start with. But if you’re interested in the other types, that’s what this video is here for, so let’s get started.

The five types of zones we have are:

1. Asynchronous JavaScript (which I will refer to as async)
2. JavaScript
3. Iframe
4. Basic Image
5. JSON API

No matter what zone you want to use, you will always get the zone tag in the same spot: by clicking the ‘get zone tags’ button in the top right of the zone. Here, you change the tag type by clicking it from the drop down menu. We can see that as I select each option the zone tag below is changing to reflect the new style. The zone tag, of course, is what we actually put onto the page to make the banner zone appear. I’ve already set up instances of the five zone tags on some test pages, so I’ll be heading over to those in order.

The zone we’re working with today has a few different banners in it. I’ll try and focus on both the big points as well as some of the technical aspects of each zone tag, using the banners as an examples.

I’m going to start with the show stopper. Async tags are what almost all situations call for because they have three distinct advantages over most of our other tags: They change their behaviour based on the type of banner, they don’t hold up the page load, and they collapse when nothing can serve. They are, as I’ve said, almost always the best choice.

An async tag will check the incoming banner and make allowances for how it should display. For example, if it’s an image, it’ll display it in an image tag, but if it’s an custom HTML banner, it will put it in an iframe (which is basically a webpage within a webpage). AdButler will read the incoming banner, and react to it. That’s what I meant by changing its behaviour. The other benefit to the tag is the async loading. Async means that the user’s browser will request the banner and then keep on loading the page while the banner is on its way. This is especially important for banners with large file sizes or when you’re tapping into exchanges. If some part of your chain is taking longer, or if the user has a slower internet connection, the experience won’t be held up. Finally! If for whatever reason you don’t have any banners in AdButler to serve, whether there’s a quota or there’s targeting or anything else, Async zones will collapse down into nothing. Using async tags is a very important part of keeping users happy. Basically, use Async unless you can’t.

JavaScript tags are almost exactly the same as async except there’s no, well, async property. The javascript tag will serve creatives in their proper containers, like this Rich Media Banner in an iframe and this image banner as an image tag, but the request will hold up the page load, so be careful if you’re using exchanges or serving large files like videos. This can be a feature for some kinds of websites, as async loading can mess up certain aspects of programming. JavaScript tags also don’t deliver custom HTML banners in iframes, which might be required to make use of our responsive features. So, if you need custom HTML inline or your banner to not be async, use JavaScript.

Now, our iframe tags are available as two different kinds: JavaScript delivered, so placed by a script and we just call iframe, and the straight html version. They both function almost identically, but we would recommend using the normal iframe unless you’re in a situation where you cannot run scripts. The main benefit of iframes tags is that everything, including images, are delivered in an iframe. Publisher’s might request this from time to time. A benefit of iframes is that, one they’re placed, the page doesn’t have to wait for their interior to load, so they’re semi async. However, iframes cannot participate in responsive design, so if that’s what you’re looking for, you’re best off heading somewhere else. Really, only use iframes if you want an image banner to be in an iframe.

Our second to last tags are basic image tags. They skip all the scripts and bulk and just deliver an HTML image and click tag. However, there are some downsides to this delivery method. Impressions and clicks may not track properly, especially on mobile, because image tags work off of cookies for tracking. Image tags also, due to not using scripts, can’t make use of our advanced features like unique delivery. Because of these drawbacks, we really only recommend using basic image tags if they are specifically requested by one of your partners. Basic Image tags should be seen as a last resort.

Finally we have our JSON API tags. Now, these are a bit different, and are only meant for really specific-use cases, usually requiring some custom coding on your end. If you aren’t up to it, you can skip past this part. However, if you want to do some custom implementation, or you’re just curious, I’ll quickly go over the basics.

JSON, for those who don’t know, refers to a standard object format in JavaScript that is used for most requests. When using our JSON tags, you place a request and they return a JSON object, so you can’t just place them onto a webpage. The JSON response looks a like this, and you can see it contains all the information needed to display a banner however you want. This is a response for a simple image banner. We give you the ID of the banner, the destination for the click and the location of the image, as well as the dimensions and any other settings you’ve set for the banner. You can do whatever you want with this information, that’s what the response is here for.

Now that all our tags have been covered, you should be a bit more prepared for the different situations that might come up. As I said before, and I’m going to keep saying it, we do recommend async tags in almost all cases. But I do understand that, in some specific situations, you might want something else.