Cloudinary Blog
Learn more...

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

Aug 29, 2013 by Nadav Soferman
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
blog comments powered by Disqus