Dynamic Banner Ads With PHP and Javascript

Last month we struck a deal for Detailed Image to sponsor Autopia.org, definitively the largest online community of auto detailers.  Clearly our target market for DI – a community that can exponentially increase our foothold in the detailing community.  The potential is very large.

Part of the sponsorship agreement included a 120 x 600 banner ad thrown into the rotation on the homepage.   George came up with the idea of having the banner show our automated Daily Special.  Autopia (like most sites) will pull your ad from an image or from Javascript.  So he approached me and asked me if it was possible for me to create said banner that updated daily as our specials updated.  I said yes, but I hadn’t done it before so I’d have to do some research.

In my research I basically found nothing.  No examples of anyone with a similar issue.  I’ve seen the end result before, but couldn’t find a tutorial to help me or even point me in the right direction.  It’s been a few weeks, but I wanted to make sure I came back to this and posted about it because sometime, somewhere, someone will have the exact same problem and hopefully this post will help.  I’m sure there are other (possibly better) ways to do this, but the technique below was what I came up with.  Since it’s gone live we’ve yet to have any issues.

Step 1 – Create the static portion of the banner

I had George and Mike create a PNG graphic of the portion of the banner that would remain unchanged.  You can layer any type of image with PHP, but our product pics are PNGs so I kept uniformity by using only PNGs for this process.

Detailed Image Daily Special Banner

Step 2 – Create a PHP script to overlay Daily Special Image

I take the 500 x 500 image of the Daily Special product, re-size it to 100 x 100 using PHP function imagecreatetruecolor, and then overlay it using the PHP function imagecopymerge.

Detailed Image Daily Special Banner

Step 3 – Create a PHP script to write the HTML and CSS using Javascript

This might be a bit confusing.  I created a PHP script that retrieves the information for the current special.  Once I have that information, I can write the product title and price with Javascript using the document.write function.

Even though this is a PHP page, it needs to be viewed by a browser as a Javascript page so you should to declare the page as a Javascript application using the PHP header function prior to outputting any text:

header(‘Content-type: application/javascript’);

Now within the document.write function you can write the HTML/CSS for the banner like you normally would.  I created a div with a size of 120 x 600 and the background image being the image above.  From there I wrote and styled the text using CSS/HTML in the div.  I put a link around the div so the entire thing links back to Detailed Image. The end result is the text overlayed on top of the banner.

Step 4 – URL rewrite Step 3 as a Javascript file

The file above creates the Javascript, but can’t be called remotely as a Javascript file since it has a .php extension.  Thankfully, URL rewriting allows you to “change” a file named autopia_banner_javascript.php to autopia_banner.js.

Step 5 – Set up a Cron Job for the image generation

We’re almost done.  The Javascript file updates the title and the price each time it’s called, but the picture remains the same unless the script from Step 2 is executed.  We have our Daily Special change at midnight EST each night with a cron job.  I set up a cron job to run immediately after, which executes the PHP script from Step 2 and updates the image with the current special.

Step 6 – Include Javascript on a page to display the banner ad

Assuming the location of the javascript is http://www.detailedimage.com/banners/autopia_scripts.js, you can give anyone the following code to include it on their site:

 <script src=”http://www.detailedimage.com/banners/autopia_scripts.js” type=”text/javascript”></script>

Which produces:

Detailed Image Daily Special Banner

And finally, the banner on Autopia:

Detailed Image Daily Special Banner

Wohoo – success!

4 comments on Dynamic Banner Ads With PHP and Javascript

  1. Adam Gilbert says:

    This is very cool. Well done man. I love your willingness to just learn and make it happen!

    -A

  2. Adam McFarland says:

    Thanks Adam – I know you’re the same way.

  3. I like it.
    With the time that went into this, are you planning to unleash this on a few other sites?

  4. Adam McFarland says:

    Thanks Brandon -

    I definitely want to use this same banner on other sites, and also the same technology for similar things.

    As you know, the once nice thing about programming/development is that if you do something right once and it works, you can use it on future projects for years to come. Over the course of several years you build up lots of these little “techniques” and programming becomes a whole lot easier.

Leave a Reply

Your email address will not be published. Required fields are marked *

Commenting Rules

Wow. I'm honored that you found this post interesting enough to leave a comment. Before posting, I have a few ground rules:

  • Please keep your comments as relevant to the post as possible.
  • No personal attacks or any other nastiness.
  • Your first comment is subject to my approval.

Thanks!