Joomla Tutorials and Blog Posts

Joomla's Banner Component for Banner Advertisements

December 15, 2010 | Written by Nick Savov

Joomla's Banner Component is perhaps one of Joomla's least used features, yet at the same time one of its more advanced features that comes with the core installation of Joomla.

One of the primary reasons this powerful component is not utilized is because of users' lack of familiarity with it. When you are given a banner to put on the site, the tendency is to create a custom module and insert the banner in there, then assign it to a module position and menu item.

However, there is very little organization with this approach and if you are managing a bigger site, you will soon be wasting needless hours that you could have spent elsewhere. Furthermore, with that approach there is no way to keep track of the number of impressions and clicks on the banner, thus the reason for the banner component and this tutorial.

The tutorial will walk you step-by-step through how to set up a banner via the banner component and shed some light on it along the way.

Joomla Banner Video Tutorial

Accessing the Banner Component

tutuploadstutuploadsmedia_1292369862511.png

Go to Components >> Banner >> Categories. We are going to the categories section of the banner component first because in order to create a banner you must assign it to a category, so we need to create the category first.

 

Create Your First Category

tutuploadstutuploadsmedia_1292370242820.png

Click New to create a new category in the categories section.

 

tutuploadstutuploadsmedia_1292370441945.png

Fill in your information appropriately. There usually is not a need for an image as that is just an image for the category which in most instances will not be displayed in the front end.

Once finished, scroll down to the category description.

 

tutuploadstutuploadsmedia_1292370974277.png

Enter your category description.

 

tutuploadstutuploadsmedia_1292371143958.png

Save when finished.

 

Create Your First Client

tutuploadstutuploadsmedia_1292371321067.png

Next we are going to create at least one client. Click on the clients tab to go to the client section.

 

tutuploadstutuploadsmedia_1292371455428.png

Click New to create a new client in the clients section.

 

tutuploadstutuploadsmedia_1292371620013.png

Fill in the information appropriately.

 

tutuploadstutuploadsmedia_1292371856451.png

Here you can type in any extra information about the client that you may need to reference later.

 

tutuploadstutuploadsmedia_1292371925228.png

Save when finished.

 

Create a New Banner

tutuploadstutuploadsmedia_1292372177668.png

Click on the banners tab to go to the banner section.

 

tutuploadstutuploadsmedia_1292372398867.png

Click New to create a new banner in the banners section.

 

tutuploadstutuploadsmedia_1292409102396.png

Fill in the information appropriately.

All the settings are pretty self explanatory except for two: Sticky and Impressions Purchased.

Sticky specifies the priority of the banner over other "non-sticky" banners. E.x. If you have sticky banners and non sticky banners and you set the banner module (we will explain the banner module shortly) display setting to "Sticky, Randomize" then any banners in that category that are sticky will display until all the impressions run for the sticky. Then the non-sticky banners will display.

Impressions purchased specifies the maximum number of times the banner should be displayed on the front-end.

Once finished with this section, scroll down.

 

tutuploadstutuploadsmedia_1292409810202.png

Fill in the information appropriately.

We have two options for displaying:

1) Use Custom Banner Code
Or
2) Upload Banner to /images/banners folder (which you can access via Joomla's Media Manager)

I have chosen option one as it is a lot easier and the code is already provided by our affiliate program and I just have to copy and paste the exact code.

Tags are optional keywords to be used for displaying specific banners based on the content of the Article being viewed. It relates to the Search By Tag parameter in the Banners Module (explained later).

 

tutuploadstutuploadsmedia_1292371925228_1.png

Save when finished.

 

Displaying the Banner Using the Banner Module

tutuploadstutuploadsmedia_1292410642419.png

Almost finished! Now we just have to display the banner on the front end and we are going to use the banner module to do that.

Go to Extensions >> Module Manager.

 

tutuploadstutuploadsmedia_1292372398867_1.png

Click New to create a new banner module in the module manager.

 

tutuploadstutuploadsmedia_1292411320514.png

Select Banner.

 

tutuploadstutuploadsmedia_1292411371379.png

Click Next.

 

tutuploadstutuploadsmedia_1292411668277.png

Configure appropriately with special attention given to setting it to enabled (as it is often forgotten) and the module position in which you want the banner to appear.

 

tutuploadstutuploadsmedia_1292411903346.png

Select which menu items (i.e. pages associated with a menu item) you want the banner to appear on.

 

tutuploadstutuploadsmedia_1292412140324.png

Fill in the information appropriately.

All the settings are relatively self explanatory except for three: Count, Search by Tags, and Header/Footer text.

Count is number of times that the banner should be displayed. E.g. 500; the banner will be displayed 500 times in the pages that you assigned it to in the previous step.

If Search By Tags is set to 'Yes', Banners whose Tags match the keywords entered for each article will display when that article is being viewed.

Header/Footer text is simply text that you can put before and after the banner, respectively.

 

tutuploadstutuploadsmedia_1292371925228_1_1.png

Save when finished.

 

Check the front-end

tutuploadstutuploadsmedia_1292371925228_1_1_1.png

Preview the site and go to the menu item that you set the banner to appear.

 

tutuploadstutuploadsmedia_1292413504152.png

Beautiful!

 

Check the Statistics

tutuploadstutuploadsmedia_1292413792496.png

Next we want to check the statistics on our banner.

In the back-end, go to Components >> Banner >> Banners.

 

tutuploadstutuploadsmedia_1292413998283.png

Now you can keep tracking of which banners are doing well and which are not doing so hot, thus allowing you optimize your advertisment space and be organized at the same time!


 

Comments  

 
#1 Anja Nielsen 2011-01-16 12:38
But you alter the time span between the different banners? I would like my banners to change more often.
 
 
#2 iowawebco 2011-01-16 22:39
Hi Anja,

You can set the Randomise parameter in the module to Sticky, Randomise, and this will allow it to be different on each page refresh. However, you would either have to have no banner be sticky or many banners be sticky to ensure that is changing after each page refresh.
 
 
#3 lsidders@examiner.org 2011-10-13 14:11
I feel like I've done everything correctly in setting up my banners, but they are not randomizing on my site.
 
 
#4 iowawebco 2011-10-13 14:13
Hi and welcome!

Sorry for the inconvenience, but if you're a student at OSTraining, could you copy and paste this into the support forum so one of our support techs can look into it for you? All you have to do is log in at www.ostraining.com and click on Support Forum in the main menu.

Please see the support FAQ for more information:
www.ostraining.com/.../

Kind regards,
Nick
 
 
#5 Juan 2011-11-25 06:52
Hi,
The problem I have is that I cannot assign a banner to a specific space/module. How do you do that?
I´m getting large banner appear cropped in smaller ad spaces...
Thanks.
Juan
 
 
#6 iowawebco 2011-11-25 12:27
Hi Juan,

You have to create a banner module in module manager and then assign that module to the module position and menu items that you'd like. Then just make sure that the banner is resized properly.

Hope this helps!

Kind regards,
Nick
 
 
#7 Juan 2011-11-25 12:33
Thanks Nick! I already created a few banners without any problems!

The next question is how to handle flash banners with the standard manager, since it simply doesn´t show flash files when browsing any folders online.

Thanks again!
Juan
 

Add comment