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

Introducing Website Speed Test: An Image Analysis Tool Integrated with WebPagetest

Because images dominate page weight, methodical image optimization can have a significant effect on conversions and user experience. And the performance tools you choose to use can have a powerful impact on how websites are built and maintained. One such popular open source tool is WebPagetest. It is designed to measure and analyze webpage performance, which is why Cloudinary chose to partner with our friends over there to launch Website Speed Test.

Read more

You might have read some tutorials or articles explaining the importance of images and how to optimize them to deliver a great experience to your users. But does this work really translate into wins for your company? In this talk, you see real-world examples of the positive impact that image optimizations can have on metrics that your bosses and clients care about. You will walk away from this talk with compelling data and useful tools to help you get buy-in and support for this important user experience work at your company.

Read more
Don’t let your digital assets become a liability!

Everyone is a content producer today - from the largest publishing house and entertainment studio, down to the smallest ecommerce store, corporate website or personal blog.

If content is the lifeblood of your website or application, images and videos form the heart that makes it tick and creates an emotional connection with the audience. But, using images and videos to make the content visually engaging and meet your conversion goals, you face a new challenge: managing your digital assets. Because the images and videos are created by different teams for different channels - such as website, social media, ecommerce store, blogs, partners and digital agencies to name a few - chaos can ensue.

Read more

Image Optimization in Python

By Prosper Otemuyiwa
Image Optimization in Python

Approximately 62 percent of today’s internet traffic is made up of images. Media-rich websites must ensure that all images are optimized to speed up the site. A faster site will make your visitors happy; and when they are happy you will likely see increased conversion rates.

Read more