ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

How to create a banner ad rotating system in Expression Engine

July 26, 2009 5:18pm

Subscribe [13]
  • #1 / Jul 26, 2009 5:18pm

    Avi Frier

    59 posts

    I promised earlier that I would share this with everyone. I hope you all find it useful!

    This idea was developed based on Subvert Marketing’s blog entry on the same subject, found here:
    http://subvert.ca/blog/archive/expressionengine-advertising/
    Thank you, Subvert!

    My method takes Subvert’s method a little further, with the following enhancements:
    1. No need to add PHP code to your pages
    2. The ability to add to your rotation banners that are called up through Javascript and other code, such as Google adsense or Commission Junction links, etc.

    So, here’s what you do:

    1. Create a new set of custom fields.

    Field name: banner-type
    Field label: Banner type
    Field type: Drop-down
    Dropdown options: image | HTML
    Default text formatting: None / Hide formatting menu

    Field name: banner-artwork
    Field label: Banner Artwork
    Field type: Text
    Default text formatting: None / Hide formatting menu

    Field name: banner-width
    Field label: Banner width
    Field type: Text
    Default text formatting: None / Hide formatting menu

    Field name: banner-height
    Field label: Banner height
    Field type: Text
    Default text formatting: None / Hide formatting menu

    Field name: banner-link
    Field label: Banner link
    Field type: Text
    Default text formatting: None / Hide formatting menu

    Field name: banner-target
    Field label: Target
    Field type: Drop-down
    Dropdown options: _blank | _top
    Default text formatting: None / Hide formatting menu

    Field name: banner-html
    Field label: HTML (if no image)
    Field type: textarea
    Default text formatting: None / Hide formatting menu

    Field name: banner-rank
    Field label: Banner rank
    Field type: Drop-down
    Dropdown options: 1|2|3|4|5
    Default text formatting: None / Hide formatting menu


    2. Create a new category group.

    I created one called Advertising. Create a category for each location where banners will be placed on your page. Examples: right sidebar | header | footer

    When you view the list of categories in the Add/Edit Categories screen, you’ll see that each one has been assigned a number (in the far left column).  Make a note of these numbers.


    3. Create a new Weblog.

    I created one called Advertising. Associate it with the custom field and category groups created in #1 and #2 above.  Also, in the Weblog Posting Preferences, make sure “Automatically turn URLs and email addresses into links?” is set to “No.”


    4. Set up a file upload location

    (This one is recommended by Subvert, but may be optional as you’ll see later on)

    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.


    5. Obtain Google Analytics javascript code

    This is how you’ll be able to track click-thrus for your advertisers. You’ll need to 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.


    6. Add Google Analytics javascript code to template

    Go to Templates and choose the template(s) 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. Create some ads

    Publish some new ads to your Advertising weblog.  Here’s what you’ll be doing with each field:

    Category: Select the place(s) in your template where this ad will appear.

    Entry Date/Expiration Date: Use these fields if the ad will start running on a particular date and/or stop running on a particular date. Otherwise, you can leave them blank.

    Banner type: Do you have an actual banner or will you be pasting some Google AdSense or other code?  Select “image” for a banner; otherwise select “HTML”. If you select HTML, you can skip the next 5 fields to the “HTML” field below.

    Banner Artwork: You can either click your mouse in this field and then click “Upload Image” or you can upload the image to your banners directory via FTP and simply type in the file name of the uploaded image.

    Banner Width: The width of the image. This avoids the need for PHP on the page as you see in Subvert’s method.

    Banner Height: The height of the image. Ditto the above comment.

    Banner Link: The URL people will be taken to when they click the banner. This is optional if you’d like to display a banner that people can view but not click on.

    Target: Do you want the above link to open in a new window or replace the page they’re currently viewing? My rule of thumb: If the link is an internal link on my site, I set this to “_top” (same window); if it is an external link, I set it to “_blank” (new window).

    HTML (if no image): Paste the code for your Google AdSense, CJ SmartZone, or other banner code that isn’t a simple image called up from your server.

    Banner Rank: Like Subvert, this is a field I have set up but have not yet implemented. It is intended to determine the rank of banners when more than one will appear. For the time being I am setting all of them to “1”.


    (continued in the next post in this thread…)

  • #2 / Jul 26, 2009 5:19pm

    Avi Frier

    59 posts

    (continued from the previous post in this thread…)

    8. Implement the code in your page
    Here are 2 examples of where I’ve done this. You can view these in action at http://www.floridapokerinfo.com/

    Don’t forget to replace “(path to your banner upload directory)” with the actual path and replace the category # with the number corresponding to the category for the page location where you’ll be placing this code.

    a. Right sidebar, displaying 6 random banners:

    {exp:weblog:entries weblog="advertising" limit="6" orderby="random" category="1" status="open" sort="desc" dynamic="off"}
    {if banner-type == "image"}
    {if banner-link != ""}<a href="http://{banner-link}">{/if}_(path to your banner upload directory)/{banner-artwork}_{if banner-link != ""}</a>{/if}
    {/if}
    {if banner-type == "HTML"}
    {banner-html}
    {/if}
    
    
    
    {/exp:weblog:entries}

    b. Top of page, displaying only one banner:

    {exp:weblog:entries weblog="advertising" limit="1" orderby="random" category="2" status="open" sort="desc" dynamic="off"}
    {if banner-type == "image"}
    {if banner-link != ""}<a href="http://{banner-link}">{/if}_(path to your banner upload directory)/{banner-artwork}_{if banner-link != ""}</a>{/if}
    {/if}
    {if banner-type == "HTML"}
    {banner-html}
    {/if}
    
    
    
    {/exp:weblog:entries}

    I hope this is helpful for you and welcome your comments!

    Avi

  • #3 / Jul 27, 2009 2:41pm

    ChiefAlchemist

    913 posts

    Thanks Avi.

    Nice. Interesting.

    Question (and forgive me for being a bit rusty on a Monday): How can the analytics code help to produce click reports for clients?


    A few thoughts / suggestions

    1) Location (aka slot) assignment should be done with categories. This way if a given location has the same dimensions the same ad can be available to both slots without having to put the ad in twice.

    2) Categories might also be helpful to assign ad “type” and then only pull certain types on certain pages. For example, an ad might be targeted to men and therefore should not appear in the pages for women. Or some ads could be target for the home page, while others are not.

    3) I think it would be helpful to mention (to the less EE savy) that the publish / edit date tab could be used to assign an expiration date for each weblog entry (i.e., each ad).

    4) For the single ad slots one might also consider producing a <ul> and using jquery to rotate the ads not just on page refresh. Jquery could be used in other way depending on how fancy you get.

    5) Finally, for what it’s worth, if there’s no interest in Jquery then the integration of Google Ad Manager might be best way to go. It’s free. It’s more robust. And it’s probably about as simple to implement as this example.

    This is a great example. And in some cases Ad Manager might be mo’ helpful 😊

  • #4 / Jul 27, 2009 4:27pm

    Avi Frier

    59 posts

    Question (and forgive me for being a bit rusty on a Monday): How can the analytics code help to produce click reports for clients?

    I’m still new at this part, but doesn’t including the analytics code in the link ensure that Google will count how many times it gets clicked?

    1) Location (aka slot) assignment should be done with categories. This way if a given location has the same dimensions the same ad can be available to both slots without having to put the ad in twice.

    Fantastic idea, thanks!  I have updated my instructions to use this method instead of my original method.

    2) Categories might also be helpful to assign ad “type” and then only pull certain types on certain pages. For example, an ad might be targeted to men and therefore should not appear in the pages for women. Or some ads could be target for the home page, while others are not.

    Also a great idea, but since I’m already using categories for the page placement, I’m thinking of adding a future field called “audience” and using that when it’s appropriate to make the banners more specific on a given page.  For the time being, I don’t have the need but others may.

    3) I think it would be helpful to mention (to the less EE savy) that the publish / edit date tab could be used to assign an expiration date for each weblog entry (i.e., each ad).

    Another great point. I’m updating the instructions to take this into account as well.

    4) For the single ad slots one might also consider producing a <ul> and using jquery to rotate the ads not just on page refresh. Jquery could be used in other way depending on how fancy you get.

    I haven’t played much with Jquery, so I can’t really comment on this one.

    5) Finally, for what it’s worth, if there’s no interest in Jquery then the integration of Google Ad Manager might be best way to go. It’s free. It’s more robust. And it’s probably about as simple to implement as this example.

    I looked at Google Ad Manager before I went to all the trouble to create this. The reason I opted not to use it was this: G.A.M. lets you choose whether the ads appearing in a particular location will open in the same window or a new one. It doesn’t let you make this choice on an ad-by-ad basis.  My problem is that some of my advertisers are pointing their ads to pages within my site, while others point off-site, so I needed the ability to mix and match within any given location.

    Mind you, I didn’t spend a huge amount of time playing with G.A.M., and there bay be a way around this issue, but I didn’t find it.

  • #5 / Jul 27, 2009 4:34pm

    Avi Frier

    59 posts

    Question (and forgive me for being a bit rusty on a Monday): How can the analytics code help to produce click reports for clients?

    I’m still new at this part, but doesn’t including the analytics code in the link ensure that Google will count how many times it gets clicked?


    Oops!  I just noticed that the EE forum seems to have stripped all of the Google javascript code out of the code I posted.

    Please have a look at the original Subvert Marketing blog page, linked below. Scroll down to #7 and you’ll see how the links are supposed to look.

    http://subvert.ca/blog/archive/expressionengine-advertising/

  • #6 / Jul 27, 2009 4:46pm

    ChiefAlchemist

    913 posts

    Good point about GAM and opening windows. I’ll have to think about that.

    The thing is… I think GAM will also count impressions as well, no? I too want to count clicks but I’m still believing GAM will be of a bigger benefit - even for links within the site.

    That said, you raised a good point that I didn’t consider - yet 😉 I was actually going to use GAM for the client’s intra site banners. Client’s ad for the client is not a typicaly way to use GAM but in theory, why not?

    Also a great idea, but since I’m already using categories for the page placement, I’

    What do you mean about by this? Can you clarify?

  • #7 / Jul 27, 2009 4:56pm

    Avi Frier

    59 posts

    The thing is… I think GAM will also count impressions as well, no? I too want to count clicks but I’m still believing GAM will be of a bigger benefit - even for links within the site.

    True, but since each ad is its own weblog entry, the impressions can be counted using the built-in hit counter.

    Also a great idea, but since I’m already using categories for the page placement, I’m thinking of adding a future field called “audience” and using that when it’s appropriate to make the banners more specific on a given page.  For the time being, I don’t have the need but others may.

    What do you mean about by this? Can you clarify?

    Sure.  You suggested using categories to determine the placement on the page.  I took you up on that suggestion.  Then you suggested using categories to filter ads based on the audience for a particular page (e.g. if a page on your site contains content of interest to women, to only show ads that target women).  But if you’re already using the categories to determine the placement in the template, it would be complicated to also use the category to filter the audience.

    So, if you add a drop-down field called “banner-audience” and fill it with choices such as women, men, teens, etc., then on a page that appeals to teens, you could add

    search:banner-audience="teens"

    to your {exp:weblog:entries} tag.

    But I’m not ready to do that just yet, so I’m reserving it as a future addition.

  • #8 / Jul 27, 2009 5:24pm

    ChiefAlchemist

    913 posts

    Hey Avi

    Another “Yes, you’re right about EE” 😉 None the less, I still like GAM cause it keeps it all one spot. Also, from a management perspective it’s possible to assign GAM to one person/group and the site content to another. I think it all depends on how far you wanna take it.

    Moi? I’m leaning to MAG (obviously) since it’s an interesting tool, and ad serving is that it’s designed to do. I don’t think I can out code Google 😊

    But if you’re already using the categories to determine the placement in the template, it would be complicated to also use the category to filter the audience.

    Actually, a weblog can have multiple category groups. And an entry can have multiple categories picked across all the groups assigned. So…

    You can have a category group for: Size, Placement, and content type/target. In fact, if your pages are built using categories then that same category group can be assigned to the Ads_weblog. In short you would be able to say what pages an ad should appear on.

    Thanks for your help. You should mention to Google about that new window vs current window option. That said maybe it’s a global default setting that can be adjust post-new entry submit on a ad by ad basis. I do think there are couple setting that work that way but it’s been a few weeks since I last played with GAM

  • #9 / Jul 27, 2009 5:34pm

    ender

    1644 posts

    OpenX is a very nice alternative to GAM and doing it yourself in EE.  It’s particularly nice because you can host it yourself and run your ads with PHP to avoid the javascript requirement of GAM.  I haven’t seen anything proposed here with the EE-only approach that can’t be done just as easily with OpenX, either.  EE is a pretty decent CMS and can be contorted to fit a number of other roles, but I firmly believe in using the appropriate tool for the job when possible, and an ad server EE is not.

  • #10 / Aug 16, 2009 3:04pm

    wecreateyou

    86 posts

    I agree with ender. I was pleasantly surprised at how great OpenX is. Anyone who has installed EE will find that installing OpenX is pretty straight forward and “easy”. The features in 2.8.1 are mature and robust.

    Big benefits of OpenX over using EE for ad serving are:

    1. Advertisers have access to detailed reports.
    2. Integration with OpenX Market & Double Click.
    3. Very atractive and intuitive UI.

    I haven’t tried this yet, but there is an add-on for EE called “Frames” It lets you embed any web-page into EE’s control panel. Pretty slick potentially keeping everything in one place.

    Another though is that if you using MSM there’s probably no better solution for managing ad’s across several domains and websites.

  • #11 / Aug 16, 2009 3:10pm

    wecreateyou

    86 posts

    On another note… I do appreciate this thread because Avi’s methods can be used to create a unique publishing work-flow. It has a related entries vibe to it when I think about it, but with a bit more versatility and UI control. I’m thinking about alternate usage for this method like “Call to Action” linkage and such.

  • #12 / Aug 17, 2009 4:29pm

    grrramps

    2219 posts

    I haven’t seen anything proposed here with the EE-only approach that can’t be done just as easily with OpenX, either.

    Ditto.

    I’ve been using OpenX since it was phpAdsNew. It’s heavy with features, priced right, and performs well, with scads of options for almost any advertising requirement. I’ve had better success with the self-hosted OpenX vs. OpenX Hosted, but dislike all the system admin requirements.

    EE is a pretty decent CMS and can be contorted to fit a number of other roles, but I firmly believe in using the appropriate tool for the job when possible, and an ad server EE is not.

    What he said. OpenX installation takes about the same amount of time as installing EE, and less time to configure to deliver ads. More features, more options, more capability, less time.

  • #13 / Aug 17, 2009 4:59pm

    ChiefAlchemist

    913 posts

    I haven’t used OpenX so I’m not sure.

    I can say that thus far Google Ad Manager has been very very good to me. (Hopefully someone got the SNL reference). And that’s coming from someone who doesn’t even like Google all that much.

    What I like about GAM is that it’s hosted. No install to worry about, etc. Just log in and get to work. I would guess that Open X is more mature in feature set but that might be overkill depending on the need.

  • #14 / Aug 17, 2009 5:04pm

    grrramps

    2219 posts

    What I like about GAM is that it’s hosted. No install to worry about, etc. Just log in and get to work. I would guess that Open X is more mature in feature set but that might be overkill depending on the need.

    Spot on.

    OpenX is loaded with features that GAM just doesn’t have, but GAM is hosted, which is a big deal for some, and very attractive. The only major issue I have with GAM is the interface. Seriously. The UI came from a parallel universe which isn’t all that parallel (as in Bizarroland).

  • #15 / Aug 17, 2009 5:09pm

    stphnmartin

    28 posts

    For those who haven’t checked recently, OpenX offers a hosted version as well.

    http://www.openx.org/ad-server

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases