wave your banner high!
How to build your own banner advertising system with ExpressionEngine and Google Analytics
I speak from experience when I say that OpenX is an advanced product that doesn't suit everyone's needs. When I was developing the new Whitehorse Star website, I successfully installed and configured OpenX but felt uneasy handing over the reigns to the client. This anxiety was due to the OpenX inventory and campaign management tools being unattractive and difficult to use for all but the biggest of geeks.
Taking what I learned from my encounters with OpenX, I came up with a more straightforward approach that perfectly suited our needs. Here's how you can deploy the same system for your website in nine simple steps.
1. Set up custom fields
Log into your control panel and go to Admin > Weblog Administration > Custom Section Fields. Click the Create a New Weblog Section Field Group button and create a new group titled Advertising. Click the Create a New Custom Field button and fill in the form as follows. You'll end up creating four custom fields, just like the following group.
2. Set up weblog
Head over to Admin > Weblog Administration. Click the Create a New Weblog button, title the Field Section Name as Advertising and fill out the rest of the form as follows (don't worry about setting up a template group titled advertising as shown; that's for another purpose).
Next, go to Admin > Weblog Administration > Weblog Management > Edit Preferences of the Advertising weblog. Under Weblog Posting Preferences, ensure the preference for Automatically turn URLs and email addresses into links? is set to No.
3. Set up file upload location
One last field configuration step. Go to Admin > Weblog Administration > File Upload Preferences. Click the Create New Upload Destination button and fill out the form as follows. Depending on how your hosting server is configured, modify the contents of the Server Path to Upload Directory field. You'll also need to log into your FTP account and add a new directory titled advertising. When there, change the permissions for this new directory to 777 in order to permit system uploads.
4. Publish entry
Now that you've set up the essential elements, it's time to publish a new entry. Hover over the Publish tab and select Advertising from the list that appears.
You'll end up at the New Entry > Advertising screen. As you'll see, this form contains the custom fields you set up for the related weblog.
A) Enter a Title for your advertisement. It's best to use a unique title that combines the names of the advertiser and their particular campaign. If an advertiser has multiple campaigns running at the same time, this split helps you identify their entries, i.e. Hank's Burger Shack: 2-1 for Cheeseburgers.
B) Upload the appropriate banner advertisement artwork by placing your cursor in the Banner artwork field and clicking the Upload File button. Choose the file from you computer and select the Advertising directory. Once the file has been uploaded, click the Place Image and Close Window button. The required code will be inserted into the Banner artwork field.
C) Next, choose a Banner rank. If there are multiple banners in the same area of a page, this number will automatically decide which advertisement takes precedence. This is actually an optional field that I didn't end up using in the Whitehorse Star website templates, but you can still add it if you wish.
D) The website I built has three sizes of advertisements in two page locations: rectangle advertisements (300 x 250 and 300 x 600) run alongside the right side of the page while leaderboard advertisements (728 x 90) are placed along the bottom. Choose the correct type for this entry.
E) If this particular campaign includes a website that people go to when the advertisement is clicked, enter the full URL in the Banner link field. While the system supports non-clickable ads, I strongly recommend including a URL because it makes the results trackable. Otherwise, they are just static images on a page.
Once you've got everything in order, click the Submit button to publish your entry.
This article assumes you already have a free Google Analytics account set up and ready to use. Log into your account, choose a website and copy the New Tracking Code (ga.js) from under Profile Settings > Tracking Code.
Now head back to your ExpressionEngine control panel.
As mentioned, the Whitehorse Star website uses two placement areas for advertising. Let's focus on the right side of the page where the rectangle advertisements will be shown.
Go to Templates and choose the template where you'd like to place advertising.
At the top of your template, paste the Google Analytics code directly after the opening body tag. This is different from what Google recommends for their standard configuration, but is necessary for the system to function.
7. Add EE code to website template
Scroll down to the part of your page where you'd like to display advertising and enter the following code.
Unless you're well-versed in ExpressionEngine, this big block of code probably won't make a lot of sense. Here's how it works (click the image to view a text version):
A) The exp : weblog: entries tag contains the name of your weblog. Since the page I built should only display two ads at once, I've set the limit at 2. The advertisements will be served at random, ensuring fair exposure for all campaigns. The search : banner-type ensures that only rectangle advertisements are shown in this space, both of which must be open (e.g. not saved as draft, but ready to be displayed).
B) As I previously mentioned, not all advertisements require an outgoing link. The system will check to see if a link exists and if it does, will append a link attribute with the if banner-link != "" conditional statement, which wraps around the entire block of code.
8. Add PHP code to website template
Due to the different sizes of advertisements being displayed, the system needs to be able to dynamically assign an image width and height to the individual files. PHP acts as the magician here (this is the same code as above, simply highlighted):
Click the Submit button to save your altered template.
By default, ExpressionEngine templates do not allow PHP but in the case of this step, PHP is required. Return to Templates and choose the Template Group where the file you just edited exists. Click Preferences and then select Allow PHP? = Yes and PHP Parsing Stage = Output.
9. Head back to website and view the page where advertising is included
If all has gone well, the banner advertisement will appear. Give yourself a pat on the back! Using this system, you're now able to publish and manage advertising campaigns and track their progress with Google Analytics.
Speaking of Analytics, you can find out how many people are clicking on your advertisements during specific timeframes by going to View Reports > Content > Top Content and entering outgoing in the Find URL field. The screen refreshes with the data your advertisers are after.