Cloudinary Blog

How to create ad banners dynamically for A/B testing and better audience targeting

How to generate dynamic banner ads on-the-fly
Online advertising is one of the most popular tools to drive traffic to your website and mobile application in a consistent and cost-effective manner. Online text ads play a very big role in this strategy. 
 
Building an effective ad campaign usually involves the write-up of different textual content to perfectly target your audience based on their currently viewed content (or search keywords), demography, and other relevant metrics. For textual ads, the marketing expert can use existing online tools to create and maintain many different ads and experiment with different wordings to optimize the expected conversion rates.
 
But what about image ads and ad banners? 
 
This is a completely different challenge. First, you need your graphic designer to prepare a nice looking graphical ad banner concept. The concept should then be extended for the different banner dimensions and aspect ratios required. For example, in Google's ad network, you can create up to 12 different-sized banners: rectangle, square, skyscraper and others. After having all the different banner templates in place, you'll want to create multiple versions of each template using different wording, labels and possibly different graphical elements.
 
But that's not the end of it. After launching your campaign, you'll probably want to continue modifying the texts, colors and sizes of your ad elements. You might want to do that in an A/B testing environment to make sure you have a positive impact on your campaigns.
 
Requesting the graphic designer to create new banners for every text change is very tedious. With just 12 different banner dimensions, 10 campaign wordings with 2 text variations in each one, you're left with 240 different images!
 
As it happens, Cloudinary is an online image management solution that offers many interesting features, covering aspects of image uploads, storage, administration, manipulation and delivery. Cloudinary is also capable of powerful, on-the-fly image generations and transformations. So when we wanted to create a banner ad campaign experiment for Cloudinary, we realized that we can use Cloudinary itself to dynamically create as many image banners as we wanted, dynamically modify texts, colors and layouts and easily tweak them for our A/B testing needs.
 
We wanted to share this experience with you and describe how you too can build image ads dynamically using Cloudinary.
 

Banner building blocks

First, we asked a graphic designer to prepare an initial ad concept. We decided to go with a standard rectangle of 6:5 aspect ratio (336x280). You can see the banner skeleton below:
 
336x280 General layout
 
 
Then we asked the designer to extract the relevant elements into separate images. We uploaded these to Cloudinary - the blue background, the yellow action button, Cloudinary's logo and the logos of PHP and Rails frameworks:
 
Blue background  Yellow button
                                      bn_bg                                                               bn_btn
 
Small logo          PHP Logo             Rails logo
                                          bn_logo                       bn_php                  bn_rails
 
Then we used Cloudinary's API to create 3 different text styles (title, description and button). See this blog post for more details about text layers. For example, the following Ruby command creates a text style for the action button. It is a 24 pixels Helvetica Bold font, and it assigned with the public ID of 'helv_bd_24_black'.
Cloudinary::Uploader.text("Helvetica Bold 24px Black",
                          :public_id => "helv_bd_24_black",
                          :font_family => "Helvetica", :font_size => 24, 
                          :font_weight => "bold", :font_color => 'black')
Here's a sample of the generated text style:
 
Sample text
 
 

Generating a dynamic banner

Now that we have all building blocks ready, we can quite easily use Cloudinary's URL-based transformations and overlays to generate the actual image ad. 
 
First we pad the background image to fill a 336x280 rectangle (which is Google's Large Rectangle ad dimensions) and add a blue border using Cloudinary's chained transformations:
 
 
336x280 Background with border
 
You can also build this URL programmatically using our client libraries. For example, in Ruby on Rails:
<%= cl_image_tag("bn_bg.jpg", :transformation => 
         [ {:width => 336, :height => 280, :crop => :pad, :gravity => :north }, 
           { :border => "1px_solid_#044475" }]) %>
Now we can place Cloudinary's logo, the action button and the PHP framework logo on the banner. This can be done using the 'overlay' transformation parameter (or 'l' for URLs). You can control the position using the 'gravity', 'x' and 'y' parameters. Below you can see the the overlay transformation components as well as the generated image:
 
 
336x280 With image overlays 
If PHP is your language of choice, the following PHP code generates the same transformation programmatically:
<?php echo cl_image_tag("bn_bg", 
   array(
     "transformation" => array(
       array( "width" => 336, "height" => 280, "crop" => "pad", "gravity" => "north"),
       array( "overlay" => "bn_logo", "x" => 10, "y" => 8, "gravity" => "north_west"),
       array( "overlay" => "bn_btn", "y" => 8, "gravity" => "south"),
       array( "overlay" => "bn_php", "y" => 91, "gravity" => "north"),
       array( "border" => "1px_solid_rgb:044475")
   ))); ?>
The next step is to embed the text layers using the three text styles we've prepared earlier. We'll accomplish that using Cloudinary's powerful dynamic transformation URLs that allows us to easily embedding text overlays in image (URI encoded). 
 
Below you can see the transformation components that were chained to add the custom textual content. Text layers, similar to overlays, can be positioned using gravity, and x and y offsets. We also reduced the opacity of the description part to make it lighter:
 
 
336x280 With text overlays
 
Here's a code snippet that creates the same result programatically, this time using Cloudinary's jQuery integration library:
$.cloudinary.image("bn_bg.jpg", 
   { "transformation": [
     { width: 336, height: 280, crop: "pad", gravity: "north" }, 
     { overlay: "text:helv_bd_30_white:" + encodeURIComponent("PHP Ad Banners"), 
       x: 12, y: 48, gravity: "north_west" }, 
     { overlay: "bn_logo", x: 10, y: 8, gravity: "north_west" },
     { overlay: "text:helv_bdic_18_black:" + 
          encodeURIComponent("Create Ad Banners in PHP.\n100% Cloud Based!"), 
       y: 36, gravity: "center",  opacity: 60 }
   ]})


Different dimensions and layouts

The generated image ad above is a 336x280 rectangle. However, we should also generate an 'Inline Rectangle' sized ad (300x250) as Google suggests. Fortunately, they share the same aspect ratio, so we can simply tell Cloudinary to resize the previous image:
 
 
300x250 Resized version
 
But now we also want to create a 250x250 Square. This requires changing the layout, size and positions of the graphical elements. 
 
In the following example, we have reused the same building blocks of the previous rectangular banner with different transformation parameters and built a 250x250 image. You can click on it to see the full transformation URL:
 
250x250 Square image
 
 
And now for our final challenge - creating a 728×90 Leaderboard Banner. 
 
This requires a different layout. While we can reuse most of our existing building blocks, we did uploaded a wider blue background for this new layout.
 
The 728x90 image below was dynamically generated by Cloudinary using a transformation URL. Notice that we also rounded the corners using the 'radius' parameter ('r' for URLs) and converted the resulting image to PNG to allow transparent edges. The resulting image, as always with Cloudinary, is delivered cached and optimized via a fast CDN:
 
728x90 Leaderboard
 
 
The following Ruby on Rails code programmatically generates the same image manipulation URL:
<%= cl_image_tag("bn_bg_wide.png", :radius=>6
     :transformation=>[ 
       { :width=>728, :height=>90, :crop=>:fill, :gravity=>:north},          
       { :overlay=>"text:helv_bd_30_white:" + URI.encode("PHP Ad Banners"), 
         :x=>93, :y=>15, :gravity=>:north_west }, 
       { :overlay=>"bn_logo", :x=>12, :y=>8, :gravity=>:north_east }, 
       { :overlay=>"text:helv_bdi_20_white:"
           URI.encode("Create Ad Banners in PHP. 100% Cloud Based!"), 
         :width=>0.97, :x=>12.0, :y=>13.0, :crop=>:scale, 
         :gravity=>:south_west, :opacity=>90 }, 
       { :overlay=>"bn_btn", :width=>0.8, :x=>6.0, :y=>5.0, :gravity=>:south_east }, 
       { :overlay=>"text:helv_bd_24_black:" + URI.encode("Start Now!"), 
          :width=>0.85, :x=>20.0, :y=>20.0, :gravity=>:south_east },        
       { :overlay=>"bn_php", :width=>0.8, :x=>8.0, :y=>10.0, :crop=>:scale,
         :gravity=>:north_west}
    ]) %>


Dynamic versions and experiments

So far we've shown how to use Cloudinary's cloud-based image transformations and overlays to generate different-sized banners that share the same building blocks and text. But what if you want use a single banner but with different versions targeting a different audience? (in our example, Rails instead of PHP developers).
 
To accomplish that, you can simply modify the long transformation URL either manually or using any of our client libraries (Rails, PHP, jQuery, Node.js, .Net, Java, iOS, Android and others). For example, the image below is generated by applying a red 'hue' effect to change the ad colors from PHP blues to Rails reds without uploading a new red background. The same goes for the different shades of the action button. 
 
 
336x280 Rails version 
After deploying your ad campaigns and determining their effectiveness, you'll probably want to tweak the textual content to try and improve your click conversion rates. Thankfully, since you've decided to use a dynamic method for generating your banners, you no longer need to manually edit dozens of images and update their textual content one at a time. Instead, you can simply update your Cloudinary URLs with the updated texts or possibly let your campaign manager do it himself.
 
The following dynamically generated image shows a previously created image banner with modified texts. You can now perform A/B testing to compare the conversion rate of the two image versions:
 
 
336x280 Modified texts

Summary

Isn't that cool? Easily create image ads and banners of any dimension. Quickly change look & feel, and color scheme. Modify texts and performing layout and content A/B experiments without involving a graphic designer or performing tedious manual editing. Treat your images in the same way you treat your dynamic code modules. And as the sample banners says, it's 100% cloud based, so you don't need to install any image editing or processing software on your side.
 
We used this approach for our own purposes and we think it's quite powerful. Of course it would be great to add a UI layer for interactively positioning elements and modifying text styles and content. But we thought we can leave some homework for the reader, at least for now…
 
The capabilities required for creating the dynamic image banners described in this blog post are available with any of Cloudinary's free and paid plans. Create your free acount

Recent Blog Posts

Analyze and auto tag images with Amazon Rekognition

Knowledge is power. And if you allow your users to upload images, you also probably want to better understand what their images contain. Whether a photo is of a building, people, animals, celebrities, or a product, image processing and analysis can assist in further comprehension. The benefits of this knowledge can go beyond "merely" categorizing your content and making your image library searchable: drawing insights from user generated content can be very useful! What better way to learn more about your users than to analyze the images they upload and find out what they care about and then have the ability to display relevant content to them according to their interests or even match them with other users that share similar interests.

Read more
Automatically moderate your user uploaded images

Allowing your users to upload their own images to your website can increase user engagement, retention and monetization. However, allowing your users to upload any image they want to, may lead to some of your users uploading inappropriate images to your application. These images may offend other users or even cause your site to violate standards or regulations.

Read more
Cloudinary Uses Scale API to Focus on Image Compression

Here at Cloudinary, we provide a cloud-based tool that enables our users to compress images and video for their websites and apps. Our goal is to preserve the visual integrity of the content, but deliver the smallest file size to any device or browser to ultimately optimize website performance and end user satisfaction.

Read more
CloudinaryAndroid SDK

Developing applications for mobile consumption requires facing, and overcoming, some difficult challenges. Apps need to limit their RAM, CPU and battery usage while still performing the required tasks in a reasonable time frame. If too many background tasks are running, the mobile device can become sluggish, with the battery running out very quickly. Coordination with other apps is crucial to keep the device responsive and make the battery last longer.

Read more
forLoop: Nigeria Event on Building for The Next Billion Users

TL;DR

Since Google shared their intent for the next billion internet users, some African developers thought this was pointing right at them and they needed to act fast. The mission to bring the next billion users from Africa to the internet kicked off a storm of enthusiasm. This community event turned into a success story and this is a summary of what happened.

Read more