Ad rotator - add supporting gif for flash file

Question

Hi there, I am using the ad rotator to host 3rd party advertising. I have been supplied with a flash file (swf) and also a gif version of the ad. I want to be able to point to the gif file if the swf file is not able to be played by the browser/device. Is this possible within the ad rotator to have a fall-back gif file?
thanks

Answer 1

This functionality isn't native to BC but I've done this before for a client.  Just beware that using an .swf (flash) file embed for the ad won't let you track the BC Ad Rotator links.  Typical, image-only ads in the AdRotator can be tracked in BC's reporting but using a .swf file doesn't work and you have to embed the link in the actual .swf file itself.  Before we get you working with a flash fallback solution, if you have access to the .swf file or can tell your client what URL to use in the flash ad then you should use the AdRotator trackign URL if you can.  Do do that, setup an image-only ad rotator item first in one of your ad rotators.  Add that rotator to a demo page to get the URL of the ad rotator (it contains the unique id of your ad for tracking). Once you have that URL you can update your flash file to use that URL to take advantage of tracking on BC or give it to your customer to update the flash file themselves before sending you the flash file.
Once you've taken care of the link in the flash ad or if you don't care about not tracking flash ad clicks in BC's reporting system, let's move on to building a flash fallback ad solution. We'll be using SWFObject which is the correct way to embed flash with fallback content.  The hardest part of this whole scenario is we have to get the ID of the ad rotator item (not the ad rotator ID) below.
The javascript I came up with requires jQuery and it's usually already loaded on many sites. Make sure jQuery is loaded in the HEAD of your page or page template where you'll be serving the ads in the ad rotator.
Download the SWFObject project and unzip it locally.
Upload the whole "swfobject" folder to the root of your website.
In your page template or page that you will be serving your ads on, add this script reference to the HEAD of your HTML doc:<script src="/swfobject/swfobject.js"></script>
Download my custom javascript function and upload it somewhere on your website. For this example we'll assume you are placing it in the "js" folder in the root of your site.
In your page or page template where you'll be serving ads, reference the script you just downloaded. Make sure it goes after our swfobject.js and jquery references in the head of your HTML doc:<script src="/js/adRotatorFlashFallback.js"></script>
Now that our jQuery, SWFObject & adRotatorFlashFallback scripts are in place in the HEAD of our page or page template, let's move on to creating your ads with fallback content
Upload the backup image you want to use for non-flash devices to your website and remember the URL/path of that image. For our example we'll use "/images/demoad.gif".
Upload your .swf file to your site and rember the URL/path to that file. We'll need it later.
Once the image and flash file are uploaded we'll create our ad rotator item for that ad:
Create a new ad rotator item
Choose the Item Type as HTML
Add your Label (title) and Item Click-thru URL
In the Item HTML box manually insert your HTML markup for the image:
<img src="/images/demoad.gif" width="125" height="125" />
(I won't be covering styling the ad so you can wrap a div around that image if you want to use some CSS to target the ad:(Optional) <div class="ad-item"><img src="/images/demoad.gif" width="125" height="125" /></div>
Save the ad first before we add the flash option. We need to get that ad rotator item's ID first before we can hookup javascript to embed the flash over the backup image. If you have many ad rotator items already in place you might want to temporarily disable all the ads already setup except the one you are working on so you don't have to refresh the page a bunch of times to wait for your ad to randomly appear.
Goto a test page and use BC's module manager to insert your AdRotator.
Preview your test page with your ad rotator and once you see your ad you are creating, right-click the ad (this works in Chrome for sure) to copy the URL of the ad. You can also see what the URL is just by hovering over the ad in most browers.  The goal here is to jot down or grab the ID of the web app item and that should be in the URL similar to this: "/BannerProcess.aspx?ID=32713&URL=%2ftest".  I bolded the ID we'll be grabbing. This ID is unique to each ad rotator item and we need that so that we can embed a specific flash file for that specific ad rotator item. 
Once you've got your ID of the item, head back to the Ad Rotator Item you just created in the BC Admin.
You'll want to add some javascript after your image markup in the "Item HTML" box
Before we had: <img src="/images/demoad.gif" width="125" height="125" />
and it becomes:<img src="/images/demoad.gif" width="125" height="125" />
<script>adRotatorFlashFallback('32711','/demoad.swf', '125', '125');</script>
Replace the bolded items above with the ID of your ad rotator item we pulled from the URL before and the URL to the flash file we uploaded to the site before.  In our case, I uploaded "demoad.swf" to the root of the website. Also, the '125' and '125' above are the width and height, respectively for your flash file. For instance if your flash movie is 300 pixels wide and 100 pixels in height then calling our functions with those dimensions would look like:<script>adRotatorFlashFallback('32711','/demoad.swf', '300', '100');</script>
Make sure the ad rotator item is enabled and you're all set.
You can see a demo of it working at http://www.chrismatthias.com/demos/swf-fallback-ad-rotator
After your initial setup of downloading the javascripts and referencing them in your page or template, the hardest thing about creating new ad rotator items with fallback is getting the ID of the ad rotator item from the URL in steps 12-14, but it's the only way I know of to get the ID of the ad rotator item. I can't find it in the BC Admin anywhere.