JSON Work: Making An Ad Carousel

Read Time: 8 minutes

One of the Adbutler’s best features is it ability to serve pretty much anything you throw at it. Besides the basics like image and VAST banners, we can also do HTML5 Rich Media, Email Banners, pure HTML bits, and even have the ability to return a JSON object.

Today’s post is going to be about that last bit, the JSON part. Specifically, how you can combine a JSON tag with a little JavaScript and get something like this:


Our JSON tag returns a standard JSON object with all the parts you need to build a banner. As a sort of introduction to it, I’ll go over the basic response and parsing of the JSON object to build the carousel.

You can download the code for the carousel here.

What Are We Doing?

To begin with, the carousel we’ve created makes use of two JavaScript plugins, jQuery and Owl Carousel. Owl Carousel is a great plugin with lots of customization options and a pretty easy learning curve. It depends on jQuery to work, so if you already have jQuery running on your website, make sure Owl Carousel loads after it to avoid conflicts. We’re also going to be using our JSON API zone tag to get the information we need, and parse the response.

Before we get into the actual code of the carousel, let’s talk about what we want it to be. We want to serve a certain number of unique banners in a carousel and we want them to each send the user to a unique destination. We also only want the carousel to show once everything is done loading. Let’s work through those problems one by one.

An AdButler JSON response

The Code

First, the CSS:

Pretty simple CSS. We give the carousel some basic dimensions, and set it to display:none so that it isn’t visible. We then create the HTML hierarchy:

 

 

Once again, pretty simple. The hierarchy is based on Owl Carousel, which requires an outer container and an inner container. Everything else is that will be visible is going to be created and resized by our JavaScript later. First, we need to tell the Carousel how many banners we want to show, and what zone we’re going to get it from.

Make sure to place the JSON version of your zone tag in the script, as any other type won’t work. The next tiny bit generates a random number to use as a page ID (which works with unique delivery), and then we move into the function that builds the banner.

‘); retrieveAdCarousel(tag,i); }; }

Our function here loops through the creation of a slide however many times we specified (that was the length), and does two things: creates a container for a banner, and then fills the container with the retrieved image. The retrieval function is a simple ajax request with some URL modifications you can ignore (once again related to unique delivery).

A bit longer, but let’s break it down.

  1. We make the request to the JSON tag we filled in.
  2. If the request is successful, we parse it.
  3. If it’s the first request, we set the carousel to be the same dimensions as the image, and make it visible. We also create the carousel and pass in the parameters for how we want it to display.
  4. Finally, we pass the image banners to the carousel to use, along with the click destination, as an <image> and <a>.

If at any point during the function we run out of banners, receive the wrong banner, or don’t get a response, we destroy the carousel.

Finally, at the very bottom we start the entire process by calling the function.

Okay, I Get It. What’s Next?

To go ahead and get started, all you need to do is paste the code snippet where ever you want your carousel to show up, and pass in your JSON tag. If you want your carousel to look different, head on over to Owl Carousel and check out their documentation.

Now, the carousel was just a little example of what’s possible with the JSON tag. With a little bit of work and some basic JavaScript knowledge, the possibilities are endless. Keep your eyes out for more posts and demos of our JSON tag, as well as our other AdButler features.

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.