Archive for the 'Design Advice' Category

BrianR

Implementing Flash Click Tags

Now where was the IAB at when they were handing out flash clickTAG specs to the publishers?

There are several variations of Macromedia Flash clickTAG implementation types that the different publishers require so that you can have your Flash banner ads tracked properly. These clickTAG’s need to be integrated into .fla file before it gets trafficked to the sites.

For detailed instructions on how to build and insert click through tracking on flash banners check out the Macromedia tutorial page below:

Building Macromedia Flash Banners with Tracking Capabilities

Below are some additional examples of the different variations of clickTAGs that are used with particular ad publishers and networks:

MSN DR Flash ClickTAGs:

on (release) {
getURL(clickTag, “_blank”);
}

MSN Network ClickTAGs:

on (release) { fsCommand(”URL1″); }

United Online Flash ClickTAGs:

on (release) { fscommand (“”); }

Earthlink.net Tags:

on(press) {
getURL(”http://www.example.com/trk.asp?CID=1234″, “_blank”);
}

Advertising.com Tags:

on (release) {
getURL(/:AceClick, target=”_blank”);
}

AOL Network Flash Coding:

Macromedia recommends a “clickTag” method to track clicks for flash ads. This method uses variables to pass the click tracking string and URL into the Flash creative movies. As a result, the only text in the URL box is _level0.clickTag. Be careful of the capitalization on clickTag. The _level0. Here is what the coding will look like when you are done:

on (release)
{
getURL(_level0.clickTag, “_blank”);
}

The clickTag is a variable and the text that is entered into the URL box is an expression. When the flash movie is playing, the expression will be replaced with the click tracking string and destination URL. In order for this method to function properly in Flash 5 or 6 (MX), you must indicate that the text is an expression by checking the expression check box. Be sure to also set the Variables drop down box to “Don’t send”. No check boxes or drop down selections are required for Flash 7 (MX 2004) or Flash 8 Pro, just don’t put the clickTag coding within quotations.

The target window for the click through URL needs to be set to “_blank” so the click through will open in a brand new window per AOL’s requirements. Do not leave the target statement undeclared.

Flash MX 2004/Flash 7 ClickTAG Script Example

In the example below, a getURL action is being assigned to a button that will direct the browser to [clickTAG]. The getURL(clickTAG,”_blank”) statement will append the variable data passed in via the OBJECT EMBED tag and points the browser to that location. It is the tracking code assigned by the ad serving network, which allows them to register a user’s click activity on that advertisement.

The URL variable, clickTAG should be inserted without “” for the creative to work properly. See image below.

To open a new browser window when the ad is clicked on, enter “_blank” for the window variable. See image below.

Flash Action Tags

Here are some other useful flash designer resource links:

Flash Performance Hints
clickTAG Security Document
Macromedia RichMedia Resource Center

MSN Flash Ad Tracking Specs - very helpful click through tracking instructions.

AOL Flash Coding Instructions - complete instructions for AOL’s flash ad tracking requirements.

BrianR

Online Banner Ad Specs

In getting ready to buy large online display banner campaigns you need to provide a boiler plate of ad specs for your designers. Here are the Internet Advertising Bureau (IAB) approved Ad unit guidelines that most publishers adhere to: (ad sizes are listed in pixels as width by height and the ad weight is what is recommended by the MSN Ad Network unless specified and is usually a good guide to start with.)

Rectangles and Pop-Ups
300 x 250 - (Medium Rectangle or called the Box Ad) - gif, jpg, html, flash (20k standard, 30k flash)
250 x 250 - (Square Pop-Up) - gif, jpg, html (20k AOL)
240 x 400 - (Vertical Rectangle) - gif, jpg, html (20k AOL)
336 x 280 - (Large Rectangle) - gif, jpg, html (20k AOL)
180 x 150 - (Rectangle or called a Mini-Rectangle Ad) - 15k AOL

Banners and Buttons
468 x 60 - (Full Banner or called the Old School Banner) - 15k AOL
234 x 60 - (Half Banner) - gif, jpg, flash, html-no forms (10k standard, 15k flash)
88 x 31 - (Micro Bar) - gif, jpg (3k file size)
120 x 90 - (Button 1) - 12k AOL
120 x 60 - (Button 2) - gif, jpg, flash, html (5k standard, 10k flash)
120 x 240 - (Vertical Banner or called a Mini-Tower or Condo Ad) - 15k AOL
125 x 125 - (Square Button) - 15k AOL
728 x 90 - (Leaderboard) - gif, jpg, flash (20k for standard, 30k for flash)

Skyscrapers
160 x 600 - (Wide Skyscraper or called a Big Sky Ad) - gif, jpg, html, flash (20k standard, 30k flash)
120 x 600 - (Skyscraper) - 20k AOL
300 x 600 - (Half Page Ad) - gif, jpg, flash, html - (30k standard, 40k flash)

MSN Banner Ad Specs

AOL Ad Specs

Yahoo Ad Specs

DrivePM Creative Specs - pdf

Real Cities Network Ad Specs

CNET Flash Tag Specs

EyeWonder.com Rich Media Specs

Standard Ad Units

For Rich Media specs and guidelines refer to the publishers ad specs for more details on accepted file types and sizes that aren’t listed above.

Check out our blog on Implementing Flash Click Tags for rich media tracking.

When designing banners or writing text links for your product or service its very important to determine which creatives will be used in a CPC (cost per click) or CPM (cost per impression) environment. A general rule of thumb is the following:


CPM = More agressive design
CPC = Less agressive design


Lets break this down further and discuss the importance of pre-qualifying your traffic in a CPC environment.


What does it mean to pre-qualify traffic?


Pre-qualifying traffic essentially means that you are providing more information in regards to a purchase on the banner *prior* to the surfer clicking thru. In other words if you are purchasing traffic and paying for every click (CPC) you want to ensure that the click has the highest possible chance of converting to a sale. It is very important that if you are paying by the click that the user understands as much as possible what you are offering and clicks because he is interested in your product or service.


How do I pre-qualify traffic?


There are some good rules of thumb when designing banners or writing text link meant to pre-qualify traffic. First include as much information as possible regarding your service. So if you are selling widgets be specific about the exact widget you are selling. Its also a good idea to include price points on the creative so the user will only click on the banner if the price seems reasonable to them.


Example messaging would be: “Buy Blue Widgets For $9.95 - Click Here To Purchase”


The user knows the specific type of widget (blue) and the price ($9.95) and the call to action (Click Here To Purchase) specifically mentions an action (purchasing the widget). The odds that this user is a buyer is significantly higher than a banner which did not utilize these concepts.


The difference between this style of design vs. designing for a CPM environment is that every click costs you money so you shouldn’t be too agressive in driving click thrus. You want to drive *qualified* click thrus. So while your average CTR (click thru rate) will be considerably lower your conversions on this traffic should be considerably higher thus optimizing your media buy.

We have recently covered ways to employ effective banner design in your marketing efforts. Getting traffic from your PPC of display advertising however is only half of the equation. A second crucial aspect of converting your traffic is having an effective landing page.

1. Don’t Just Use Your Home Page.

I am always amazed how many purchasers of traffic simply send this traffic to their main home page. This is a bad idea for a couple of reasons. First you don’t have the control of being able to specifically tailor your messaging and unique selling proposition to your advertising. Your home page is for the average surfer wandering in where as a landing page is used as a very specific means to an end with careful pinpoint tailoring to match your marketing efforts. You have already pre-qualified the user to some extent via your marketing. They already have expectations as to what they want, its your job to deliver it without the user having to drill down from your main page. Second your home page is full of traffic leaks which is a bad thing. See point #6 below.


2. Be Consistent From Ad To Landing Page


Wether you are marketing via display, text links or email it is vital that you ensure that your messaging and “look and feel” or your marketing closely matches your landing page. Make the colors and fonts consistent. If you are using text links ensure that the headline used in your advertisement is repeated prominently in your destination page. This creates a smooth flow of experience for the user and greatly increases your potential of generating a sale.


3. Keep It Simple


The same rules of banner design apply to landing page design. You need to keep your messaging and value proposition simple and direct. Explain what you are selling and list a few key reasons why your product or service is unique (you don’t need to list every single bell and whistle). Make sure the eye can easily grasp the key propositions in your pitch at a glance. Its also a good idea to not use large blocks or small text. Try to break them up with headlines.


5. Eliminate all traffic leaks


This is an error I see all the time. Eliminate all links on the page that lead the user away from a purchase. After you have a captive audience you don’t want to loose them on a link that leads them away from a purchase. If you need to provide more information try to use daughter windows (small pop up windows) to provide this. A click to another page on your site is counter productive.


6. Use strong calls to action.


Wether your are selling a product or service include a very prominent button or form to make it clear what the user is supposed to do on the page. This call to action should *always* be above the fold and separated visually from the other content on the page. It should leave no doubt in the users mind what to do next. If you are in doubt if your call to action is bold enough then it probably is not. Make it larger and bolder.


7. Make the user feel safe and secure.


If you are collecting user information or credit cards be sure to instill faith in the user that their information will not be mismanaged or abused. The first step to this is a professionally design landing page. The second is to let the user know their information is safe. If you are using a secure server include the padlock graphic and tell the user the site is secure. If you are approved by the better business bureau use their graphic. If you are hacker safe use that graphic as well. Don’t link these graphics to eliminate traffic leaks.


8. Break long processes into multiple shorter ones.


If a form cant be completed in 30 seconds or less then you need to break up the form into separate pages. Make the first page very brief, ask for a name, an email address and a zip code. Then have the user complete the rest of the form on the next page or pages. It is a well know psychological trait of humans that if you can get them to commit in a small way to a process they are more likely to complete. This technique gets the user to begin the process without scaring them away from a long form at first glance.


Two Good Landing Page Examples


I have include a couple examples below of landing pages i consider to be very well put together. I will explain why below the images.


netflix-small.gif


Netflix does a good job of showing the user their unique selling proposition with minimal text and a clean simple design. I really like how their form only asks for minimal information and uses a strong call to action “Start Here”. By placing this form on the right side of the page they keep it well above the fold and leave no doubt what the user is to do once landing on this page.


esurance-small1.gif


This is a perfect example of a clean well designed landing page. The value proposition is clearly explained at the top of the page with a strong call to action with “Get Your Insurance Quote”. There are literally zero traffic leaks and the only information they are requesting of the user is a zip code. The call to action is very clear with a nice clickable green button.

This is a very basic but important step in improving the click thru rates of your Google Adsense advertisements on your website. Essentially what we want to achieve is a more natural blending of the advertisements into your existing color scheme. Many webmasters are content to use the default Blue/Green color scheme that Google uses by default. In my opinion this is a huge mistake for three reasons.

1. Surfers are already banner blind and if your Google Adsense block is comprised of markedly different colors than the other areas of your site it makes there default shapes (728×90, 468×60 etc) more apparent to the eye and thus easily overlooked.

2. The Blue / Green color scheme already screams “Google Ads” to the surfer by the fact that many webmasters out of ignorance or laziness simply donut take the time to modify the color scheme. This instant recognition of the Google ad color scheme only exacerbates the banner blindness of your users.

3. We have found through countless tests that advertisements that appear to be part of a sites content as apposed to a advertisement both attract more visual attention as well as drive significantly higher click thru rates.

So how do we blend these ads more effectively into our site? This is what I will answer below.

First lets get aquatinted with the interface.


google-ad-colors1.gif


You can see on the right the default Adsense colors. Many webmasters are content to click no the color box and select from the limited amount of alternates available. This (while better than nothing) is still not what we want.

Here is what to look for in HTML.

View the source of the page these ads are going to appear. You will see something like the following if your site uses HTML tags to control color schemes.

<body bgcolor=”#330066″ link=”#ffff66″ vlink=”#ff9900″ alink=”#ffffff” text=”#ffffff”>

In CSS you would look for something similar to this:

A:link {color: #ffff66;}
A:visited {color: #ff99900;}
body {background-color: #f330066;}

The code above is essentially telling the page how to display the colors of the pages background, links and text. Lets now apply this to our Adsense.

Simply copy the following variable from the code on your page and apply it as follows to the Adsense.

bgcolor = Background
link = Title
bgcolor = Border (this prevents a box around your ads)
text = text
vlink = URL

Be sure to check the preview on the left side of the Google Adsense interface to ensure that the colors are looking correct.

Once that is done apply the new Adsense code to your done. Please send your feedback if you found this information helpful.

darnit

10 Tips For Effective Banner Design

These tips are intended for designers creating banner advertising for a CPM (per impression) environment. Please see my notes at the bottom for banner advertising in a CPC (per click) environment.

1. Keep your messaging brief. Even top performing banner ads only receive 1.6 seconds of viewers attention and a click thru rate of just 1% is considered a good response. In some studies it was found ads were only seen in ranges of 14 to 68 percent. Your messaging should be a short and strong as much of the time it will be in the periphery of the viewers gaze. Pick ONE theme or unique selling proposition and focus on only that messaging with a clear call to action. Sure your widget may have a hundred uses but focus on only one core message and leave the rest of the information on your website. In other words KISS (keep it simple, stupid)

2. Analyze where your banners will appear. Banner ads that blend into the website they appear on generate higher click through rates. This may be attributable to the banner blindness that is the woe of many online marketers. It appears that if the advertisement appears as part of the “content” of the website the response is considerably higher. It also helps reduce the appearance of the standard banner sizes allowing itself to not scream “I’m a banner” to jaded visitors. This also helps explain why text link advertisements dominate in terms of click through rates. Its good practice to study the site your banners will appear on and emulate some of their design elements.

3. The magic of the word “FREE”. Through extensive testing we have found that using the word free on a banner can positively impact the click thru rates. Consider your product and determine a way to use the term which is truthful yet compelling. For example “Free Trial” or “Free Demo”.

4. Effectively using imagery. We have found that when using imagery on a banner it is often helpful to slightly over saturate the image. This allows a visual “pop” that draws attention to the advertisement. It is also good practice if you use images of people or animals to select images where the person is making eye contact with the viewer. This “breaks the fourth wall” and because we are naturally drawn to eye contact this technique also improves response rates.

5. Buttons, Buttons, Buttons. Always use buttons on your banner ads with strong calls to action: “Click Here” - “View More” - “Learn More”. You must provide an area of the banner in which it’s clear to the user that they can click on it. The button should ideally be beveled or have a drop shadow to more clearly let the viewer now that it is interactive. It is also most effective on the right hand side of the ad with “breathing room” around it.

6. Effectively Using Animation. Animation is a easy and effective way to draw attention to your creative. The most effective place to incorporate animation is on your button. A *subtle* animation on your call to action (for example, slow blinking) helps improve your response rate. Don’t over do your animation with elements that are too rapid or flashes contrasting colors.

7. Clickable elements induce clicks, duh. Simple pulldown boxes, radio or check boxes can dramatically improve CTR. This is similar to the effect that a “clickable” looking button can have on your banners performance. It implies interactivity and gives a clear area of focus for the user to interact with your creative.

8. Flow from banner to destination. Your banner should be consistent with the messaging and “look and feel” of the target destination. While this doesn’t necessarily improve the click thru rates of the creative it does have a dramatic impact on the post click conversion rates. If there is a messaging and visual consistent flow from your banner to the landing page you are much more likely to make a sale.

9. Don’t try to tell a story. I often see this mistake particularly in Flash banners. The designers somehow expect the user to sit through 20 seconds of animation prior to providing them with a core message and something to click on. Remember you have a couple seconds at best to proposition the user for a response. A good rule of thumb is to imagine the user has the ability to pause your animation at any point. Are there moments where your core messaging is not viewable with a button and a call to action? If the answer is yes you should rethink your approach.

10. Design by numbers. The unique ability of the internet adverting to measure core metrics and response rates sets it heads and shoulders above traditional display or broadcast marketing. Use this to your advantage. Use these metrics as a bible and their values as gospel. We try to include at least three banner designs in a rotation. Find the top performer and design another two iterations using what is making that banner successful and ditch the rest. Make subtle changes, for example increase the size of the call to action or modify animation speed. Next run these two new banners in another rotation against the original. Rinse and repeat.

Special notes for designing banners in a CPC (per click) environment.

When making banners for use in a CPC campaign much of what I have discussed above can be thrown out the window. In this situation you want to “Pre Qualify” the user as much as possible prior to the click. In other words, you only want clicks from prospective buyers. In this situation you have more latitude to use more copy on the banner and use a less agressive calls to action. Make sure that the user knows exactly what he is going to get if he clicks on the banner. This way you don’t waste money on those users who aren’t potential customers.