Advertising on your site using Google Adsense is a simple way to earn money from your site visitors. This tutorial will describe how to place a Google Adsense ad on your Joomla! 3.1 site.
You will need the following:
- The location on your site where you will be placing your ad. This depends entirely on how you want the ad to look (tall and skinny, short and wide, a box, etc.) and where the template you are using for your content pages has room.
- A Google Adsense account (http://adsense.google.com). In this account you should have created an ad of the size you want. I have several ads I use, the one I'm using in this tutorial is 120 pixels wide by 620 high.
In this example, the template I am using (Pixeldot from freshjoomlatemplates.com) has a position labeled as "right" on the template. I'll be placing a tall and skinny ad (120 px wide by 620 px tall) on my pages along the right hand side. In fact if you look to the right on this page you should see an ad from Google.
The Joomla! banner model supports three important concepts, clients, categories and banners. A client is who is supplying the advertisement, a category is used to group ads from one or more clients and a banner is the actual representation of a single ad (or in this case, the JavaScript from Google that displays the ad).
Let's start first by setting up Google as a client. A client is the organization that is paying you (hopefully!) for placing their ads on your site. They may have a budget for impressions or clicks or have other constraints. Google adsense has none of these, but it's helpful to create a client for Google anyway so you can track impressions and clicks.
Log in to your Joomla! 3.1 site as administrator and click on the Components Menu, select Banner and then Clients.
This brings you to the client manager.
Click on the (+) New button in the upper left corner and the "New Client" form appears. We're going to fill in our client's name and contact information – you would only fill in the contact information if you were personally contacting the client and the click the v/ Save & Close button.
Next we're going to create a category. Categories allow you to pick and choose which ads, either by content, source or – very importantly – size and placement will appear on various pages. For example, if on some pages you wanted a horizontal box (short and wide) ad and on others a vertical (tall and narrow) you might set up those two categories. You will then place specific banner ads inside of them.
I'm going to set up a simple category called "Google" in which I will place my one and only ad for the site.
Click on the "Categories" menu selection in the upper left below the (+) New button.
This will show you the default category of Uncategorised but we want our own category, so click the (+) New button. We'll enter the title of "Google" then click the v/ Save & Close button.
We now have a client and a category; it's time to put our banner in. The Joomla! banner model is designed for rotating advertisements and for having the ability to limit the number of impressions each advertisement gets. Since we're just putting up a single Google ad in which Google is in charge of impressions and rotations, we don't have to worry about most of that.
Log in to your adsense account at Google and select which advertisement you want to display. In this case I'm using my 120x600 advertisement; your ad name may be different. Click on the "get code" link below the advertisement title.
This will pop up a screen containing some JavaScript, conveniently marked for you. Copy this code and then switch back to your Joomla! administrator page.
Click on the "Banners" link on the left just below the (+) Save button and enter the name of the ad. I find it useful to include the ad dimensions in the title. Select the Category of "Google", set the Type to "Custom" and insert your copied JavaScript code into the "Custom Code" box.
I suggest clicking (+) Save to save the banner as it is, then click the "Banner Details" tab link. On the details page click the "Unlimited" checkbox, select the "Client" as Google and the "Purchase Type" as unlimited. Save the banner by clicking the "Save" button.
Now comes the part that was most confusing for me when I first started using Joomla!, how to get the ads to actually appear. Everything that you see on a Joomla! page has been assigned to some location in the template, but nowhere in the banners do you get that option.
The solution is to go back to your main administrator menu and go to the Components menu and select Modules.
From the Module Manager, click the (+) New button. You're now asked to select a module type – and there are the banners! Click on this link to create a new Banner module.
For the module you can put in a banner title, I used "right 120x600" to remind me of the exact configuration where I'm planning on placing the ads. For some reason the "Show Title" option defaults to "Show", you should probably set this to "Hide". The only reason I can think of for showing the title is if it's something like "Please visit our sponsors" or equivalent. From the dropdown for "position" I chose where in my template I wanted to place the ad, in the module position in my default site template that's off to the right side of each content page. Depending on your template and where you want to position the ad this may be different. Save the banner at this point if you wish then click the "options" tab link.
On this page you select your client and category both as Google. You can ignore the "Randomise" option since with only one advertisement, it will always put up your Google adsense advertisement.
Save the banner – and that's it. Now go back to your home page and your Google ads should be appearing.
Troubleshooting:
If your ads are NOT appearing, go back to the Module Manager, click on the banner module you created and look at the "Position" again. Make sure that the position you have selected is under the default template for your pages – not the administrator template or a template you're not using. The drop down has grayed subheadings showing the template name; make sure you only pick positions that are below your default template.
Also go back to your Banner, your Client and your Category and make sure that any time there's a choice for "Published", that setting has been made. This should always be the default, but it's possible you clicked "Unpublished" by mistake.
If you're not sure what your default content template is, click on the Extensions ? Template Manager option. Look for template that has the yellow star in the "default" column and "site" in the "Location" column.
If the position is correct but ads are not displaying, go back to the module and turn the banner title back on ("show" instead of "hide") and redisplay your content page. Look around for that text – perhaps it's in a place where you don't expect it or where there's not enough room for the ad to appear.
If the title is not on the page at all then it's possible there is something wrong with your template; that it's been configured wrong or that someone has edited the template file and somehow messed it up.
If the title does appear but the ad does not then go back to adsense, copy the JavaScript again and edit the banner. Empty out the "Custom code" text box (mark all and then delete) then repast the JavaScript. Save the banner and try redisplaying the page again.