JSON Work: Interstitial

Read Time: 6 minutes

As we’ve talked about before, AdButler has a great JSON zone tag that opens up quite a few doors. Using the tag, you can build a bunch of great ad formats, like native ads, never ending pages, and carousels. Today, I’m going to tackle one of the most common ad types: Interstitials.

An interstitial is a pop-up banner that displays within the same window as a website, covering parts of it. Sometimes they display videos, sometimes they display surveys, but in general you know you’re looking at an interstitial because it’s in a modal and it has a close button.

The below code is designed to adhere to the IAB’s guidelines on interstitials, which is an important part of keeping advertisements good. The banner is designed to be completely customizable and properly respond to the size of zone served.

As always, you can find the template on our Ad Format page. Now that the explanation is out of the way, let’s get to the banner.

An AdButler JSON response

What are we making?

So, to make an interstitial an interstitial, we have some criteria. We need an ad that displays over everything. We need a backdrop to focus attention on the banner. We need a container that resizes depending on the zone, and we need a way to display the returned JSON object, whether it’s an image or HTML, in our container. Finally, the banner needs to adhere to the IAB guidelines. When programming it is always easier to outline your big problem (building an interstitial) as a bunch of smaller ones which are more manageable.

As a side note, the only plugin we’re using today is good ol’ jQuery. If you already have it on your website you can delete this instance of it, as it’ll cause problems. Let’s move through the code.

 

 

The code

First we have the style and html hierarchy. Pretty standard stuff, the only thing I want to point out is the very high z-values and that the dimensions of ‘#adContainerInterstitial’ are temporary and will be changed to match the zone. Besides that, we have a container, a background, a little bit of text, and a button. Everything we need that we listed before, with the background having a nice faded opaque grey to it and a properly sized close button. Then we have the JavaScript.

The code is a  bit simpler than our carousel banner. As usual I’ll break it down bit by bit. First you need to pass in your JSON zone tag so the interstitial knows where to grab the banner from. Second, we have the ajax request, which is sent to the zone tag and either starts constructing the banner or closes the interstitial if it didn’t find anything.

Next, we have the function which destroys the banner when the user closes it or when nothing is returned.

Finally, we have the function which creates the banner. First, it changes the interstitial container to be the same size of the zone and keeps it center via the returned values. It then parses the JSON response to see if it’s an image banner that has been returned or an HTML5 Rich Media Banner. If it’s an image, it adds the image and redirect link to the interstitial before making it visible. If it’s not, it appends the proper code to the interstitial to display the banner. Either way, the accupixel gets loaded in (if it’s turned on), and the banner appears .

We end it by calling the function that starts the whole process.

What next?

To get the interstitial running on your website throw the code where ever you want it to go and pass in your JSON tag. Feel free to mess around with the code, or use it as a base to extend out for another ad type. We also have other examples on our ad format page, so take a gander over there as well.

Advertisement

Liam Workman


Liam is an account manager and blog king at SparkLit, the SaaS company behind AdButler and FourEyes. He loves rock climbing, hiking, coding, and being your friend.