Web Development Class: Adsense in Joomla!
One of the most common forms of advertising is the Adsense program by by Google. It's relatively easy to set up a variety of ad formats. In this article we're going to show you how to use the Google Adsense Easy Extension with Joomla!.
There are several different ways that you can use Adsense on your site. We'll look at two of these options here. One approach is to use tower ads. Another way is to insert banner ads into the footer. With the latter option it's possible to rotate the ads.
Before we dive into this subject, there's one more thing to know. You can insert ads into your pages manually, but this process can become labor-intensive if you have multiple pages and different styles of ads that you want to use. It's far easier to make use of an extension, which is what we'll do here.
I chose the Phoca - Google Adsense Easy extension because it seemed to be relatively straightforward. Also, it had 41 votes and 22 reviews, most of which were really positive. Note that this extension is a module.
One more thing about extensions; it's really important to check out the votes, but more importantly, I recommend that you read the documentation to see what's involved and have a look at the user comments. That will tell you very quickly whether or not this is an extension you want to use.
When you decide to download this extenstion, you'll probably be overwhelmed the number of choices on the page. The screen shot above will make it easier for you to find the extension. Downloading it is a snap and only takes a couple of seconds.
To install it, go to Extensions: Install/Uninstall, browse for the extension. then click on the Upload File and Install button. This will only take a few seconds.
Next, you need to activate the module. To do so, go to Extensions: Module Manager. In the Module Manager page, you'll see a full list of all the modules, if you don't see the Phoca - Google AdSense Easy Module, enter Phoca in the Filter parameters box and click on Go. This will bring up the Phoca module. Click on the "X" under the Enabled heading to enable it.
Now you're ready to use the module. Click on the New button at the top right. In the Module [New] page, click on Phoca - Google Adsense Easy.
This brings up the Module [Edit] page and now you're ready to insert your Adsense code. In this case, I've chosen to use a 160x600 pixel tower ad. Here are the settings:
Title: 160x600 Tower Ad Show Title: No Enabled: Yes Position: Right Order: 4: Who's Online Access Level: Public Menus: All
You'll note that in the Adsense Code box in the right, I pasted in my code from Adsense directly without modification. All the modifications were done in Adsense. There were no IP's to block nor other content. All that's necessary is to save the changes.
Refresh the frontend.
Regarding Adsense, I've chosen to use a particular ad style, largely due to articles that I've read which indicate that this type of ad is the one that gets the most clickthroughs. Here are my Adsense settings:
Border: # FFFFF Title: # 0000FF Background: # FFFFFF Text: # 191919 URL: # 666666 Font Family: Use Account Default Font Size: Use Account Default
To create new modules and positions, simply go back to Extensions: Module Manager. Click on the New button at the top right and in the Module [New] page, click on Phoca - Google Adsense Easy to begin the process again.
Placing Adsense Ads into the Footer
In this section we'll place an Adsense ad into the footer of this template. To get started, go to Components: Banner: Banner. Click on the New button at the top right.
In the Banner [New] page, enter the following:
Name: 468x60 Adsense Banner Show Banner: Yes Sticky: No Category: Text Ads (this is where you set your own category) Client Name: Open Source Matters (apply your own client settings here) Impressions Purchased: Unlimited Click URL: Leave empty Custom Banner Code: Paste in your Adsense code
Save the changes.
In the Banner Manager, note the new entry at the bottom of the page. Also note all the items with a checkmark. These will rotate in the footer at the bottom of the page.
Refresh the frontend until the Adsense banner ad appears in the footer.
You now know of a simple way to add Adsense advertising to your site. If you're not satisfied with the colors, you can experiment with those on the Google end, then copy those over to your template until you find one that works.