FREELessons: 35Length: 7.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.1 Banners Component

Creating banners is very important for sites that rely on advertisements or similar types of media. Joomla offers the ability to track ads, banner categories, clients and more. This lesson will cover creating a client, a banner category and a banner ready to be displayed on the front-end.

6.1 Banners Component

Hi guys. Welcome back to a beginner's guide to using Joomla. And in this lesson we want to take a look at the banners component. So what is the banners component? And where is it located in the Joomla back end? Well, if we drop down the Components menu, we can go to Banners and from here we have, Banners, Categories, Clients and also Tracks as well. So where do we actually begin with this component and what is it all about? The Banners component is Joomla's own in house implementation for monitoring and tracking ads on your website. Very important for let's say blogs that have a lot of clients that come to them and ask them to advertise on their website. So there are a lot of options under the Banners component. So where do we actually start? Well let's take a look at a real world example where a client will first approach you and ask you if they can advertise on your website. So the first thing we're actually going to do is not create a banner. We're actually going to create a client first that we can associate with a banner so we know who is advertising with what advertisement. So I'm going to create a new client. The name is Sally Salon, the content name is Sally, the contact email is Then the purchase type is a subscription for the banner. So I can say Use Global, I could say Unlimited, which means they've paid a one-off fee and they advertise forever on the site. And also I can say yearly monthly weekly and so on and so forth. I'm going to stick with monthly so now I know the company Sally Salon has purchased a monthly subscription. Then on top of that we can say whether we want to track the impression. So this is the views on the page. Not necessarily if its been clicked. But just viewed on the page. That's classed as an impression. So I can either say, no don't track that. Or I could say, yes track it. Or I could use the Global settings if I wanted to. But I'm going to override the Global settings and say yes. I also want to track the clicks as well. And then on top of that we're going to provide little additional information about this client. And then also we can set the status of the client, such as Publish. So is this client currently active? Or Unpublish, not active? And then also Archive and so on and so forth. Then we can have a version note. So this client is Sally 1.0. Now we can take a look at the metadata. So the metadata is associated with the banners the client will be advertising. Such as salon, Sally Hair and hair styles. Again these are keywords and also key-phrases separated out with commas. Now we can also say Use Our Own Prefix. So I can say Yes. Now if I set it to Yes and the meta-keyword the prefix field is blank. It will actually use the default configurations, the default meta keyword prefix that I set up in the components configuration, and we'll talk about that later, but right now what that will do is it will add that prefix onto the keywords and key phrases. This helps improve performance when searching for the banners. Now on top of that, we can also assign our own custom meta keyword prefix for this specific client, and the banner's associated with the client. So I'm going to say ss_ for Sally Salon. So now we have created a client that can be associated with a banner or multiple banners. Now let's say Sally wants multiple banners. Well the best thing to do is to categorize our banners so we can quickly find the banners associated with Sally Salon. So let's very quickly go to Categories and then we have Uncategorized, which will be the default category. But now I'd like to create a new category for Sally Salon. So first of all, we need to define a title for this category. An alias will be automatically generated from the title. Again an alias is for our SEO friendly urls. Then, we can provide a description for the category, and also, we can take a look at nesting the banner category that we're creating here, Sally's Salon, in another banner category, as well. So, you can have categories inside of categories. And hopefully, you're noticing a trend here with the categories. Also you can associate tags with this category, you can also define the status such as published, unpublished, archived, and so on and so forth. We can set the viewing access level so must they be registered users to view this category and so on and so forth. Then we can assign a language. So our language will be English UK as the banners will be in English. But I'm just going to leave the language set to all. And we'll talk about languages later. Then we can assign a note that will show up in the back end. And on top of that we can also assign a version note. So, as soon as we save this, that version note will be added to the first version of this banner category item. Next up we can take a look at the publishing options for the banner category. So again I can say, who published this? And I can also get other information, such as how many hits there has been on the category, the category ID, when it was last modified. I can also provide some SEO information, such a meta keywords, meta description and so on and so forth. Then we can take a look at the Permissions. So which user groups get to create from this category? So, Save and New, and Save and Copy. Which user groups are allowed to delete the Sally Salon category. Also, who's allowed to edit it. And also, who's allowed to edit the state of this category. It's published, unpublished, and so forth. Then, we have the Options. We can provide an alternate layout from the global layout. Fortunately, I'm on the default installation of Joomla and there are no alternative layouts. So I just have to use the global. Then also we can assign an image to this category. So now that I've gone ahead and done that, let's go ahead and save and close, and now we have a category that allows us to group multiple banners into a single category. So now we've created the client and the category relating to the client. Now it's time to create the banners for the client. So first of all we're going to provide a name for this banner. It must be a unique name, so I'm going to say Sally Salon Pink. Then we have the ability to create an alias or let it auto-generate from the title. Now this alias is not to a page, obviously this is a banner that we're talking about here. This alias is different, it's not for SEO friendly URLs. It's just for internal use only. Then on top of that we have the ability to set the type of banner. So do we want it to be an image or custom? Custom will allow us to inject our own custom code, such as a YouTube video or any type of HTML that you'd like to include. But in my case I'm going to keep things simple and go ahead and make the type an image and upload an image as the banner. So now I can select and image and upload an image through the media manager, then I can set the width, the height, the alt text. So, the text that goes in the alt attribute in the image element. I can also specify the click url. So, when they use a clicks on the banner, where do they go, so I'm just going to say You can also provide a nice little description for this banner as well. On top of that we can set the category, which the category will be Sally Salon, don't forget we created a category specifically for this company so we can easily group together all the banners to do with that specific company. And then on top of that we can also say "status," do we want it published, unpublished archived, and so on and so forth. I'm going to say "published," so it's enabled. Now Sticky is to do with importance. Now we'll come back to Sticky at a later date. But right now, I'm going to leave Sticky as No then we can assign a language to the banner, which I'm just going to leave as all because I only have one language installed which is English UK. Then on top of that you can provide a version note because don't forget a banner is classed as an item in Joomla and you can have multiple versions of your banner. So now let's take a look at the banner Details tab. And the first thing we get to do is set the maximum amount of impressions. Now don't forget with impressions the user does not have to click on the banner in order for an impression to be made. An impression is simply a view. So if I'm a user I click I go to a page and let's say this Sally Salon Pink banner is rendered on that page that is classed as one impression. Even if I don't click on it. Now what we can do here is say we'll only show let's say 50 impressions of this banner maximum. And then after that we simply want to stop rendering this banner altogether. Now if we don't want to limit the amount of impressions just tick unlimited. Then on top of that, we can see the total amount of impressions on this banner. We also have the ability to reset the impressions. So bring the counter all the way back down to zero, and we start from zero and carry on from there. And then same with the clicks. I can see how many physical clicks there has been. And also, I can reset that counter back to zero as well. On top of that we can associate a Client with the banner. Now I know what a lot of you may be saying, you may be going, why do we have categories and clients? Surely having a client associated with a banner is almost like having a category. Well not necessarily. Let's say I'm dealing with a very large corporation. Well there may be several people within the corporation that are trying to have different adverts running and so on and so forth. This is why I say the category should ideally be the company and the clients are the individuals from that company that want to have certain banners and ads showing up. So, that's why we have a distinct difference between categories and clients. Now, once we've targeted a client, we can use the client default settings. What do I mean by that? Well when we created a client, we set the Purchase Type, whether we wanted to track the impressions and also track the Clicks as well. Well, I can override those settings here. Or, I could use the clients settings for the Purchase Type and the Track impressions and clicks. So now let's take a look at the Publishing tab. So first of all we get to define a Start Publishing date and time. So I can initially set the banner status to unpublished or disabled so don't render this banner. And then at this specific date and time it will enable the banner by setting the status to published. If the status is already at published, which it currently is, then it won't do anything. I can also define a finish publishing date and time. And at that specific date and time, you'll find that the banner will automatically be switch to unpublished, disabled. Then on top of that we can also change the Created Date for this banner item. Then on top of that we also have the Created By and we get to select from a list of users. To assign that user to say that they were the ones who created the banner. Now on top of that you can also create an alias for that user. So instead of it saying Lawrence created this banner item it could say Laws created this banner item if you provide an alias, but it's entirely optional of course. And then also you have the Modified Date, which currently we haven't saved it nor have we modified it, then we have modified by and it will tell us the user who modified it. How many revision there has been so think of revision as edit. Then we have the ID which again is not being associated because we haven't created it yet. We must save it first. Then it will associate an ID with this banner item. Then also we have the meta keywords that we can associate with this banner specifically. And on top of that we can also say whether we want to use the prefix. If we say yes and we don't define a custom prefix here. It will use the global prefix setting, which currently that's blank as well. So you could say in here SS_ or something like that, and for all your keywords and key phrases, the SS_ will be prefixed before the keywords and key phrases. So now I can go ahead and save this banner item and now what I'd like to do is pause the video and then you'll be able to see when we come back that I will have three banner items. So now I've created three banners, Sally Salon Pink, Orange, and Peach as well. So if we click on one of those and get a quick preview you'll notice this looks a little different to the pink banner. So we have all these three banners right here. We've assigned the client and also assigned the category Sally Salon as well. Now what we need to do is get these banners to show on the front end. Well, how do we do that? Well we can't create a menu item that links directly to a banner, because this wouldn't really make an interesting page if we did. So we don't actually have the menu item type that allows you to link to a banner. But we need these banners to show up on the front end. How we do it is by simply injecting a little bit of HTML code that produces the banner. So now we can associate that with a module not a menu item, but a module. And the module would generate the HTML code that will be injected into a certain position within the template. And it will produce the code in order for the banner to be visible. So thank you for watching me in this lesson. And please join me in the next lesson, where we'll take a look at the banner module and producing these banners on the front end. Then we'll take a little bit more of in depth look at the tracks within the banners component. And also the configuration for the banners component as well.

Back to the top