Skip to main content

Joomla 3 tutorials

How to submit adsense and custom banners with Joomla 3 template?

How to add Google Adsense or a custom banner in Joomla?

Every Joomla user can set custom image banners as well as adsense banners on the site. It's needed if a user wants to get a profit from the advertisements on his site. For that purpose you should do a couple of things. This tutorial will help you to do it properly.

 

Google AdSense

If you haven't any Google account create a new one.

Step 1: Start with Google AdSense

For registration in Google AdSense system click on this link:
https://www.google.com/adsense/signup

1. Select your Google Account or create it, if you haven't done it yet.

 

Adsense1

 

2. Tell about your content. Type the URL of your site and choose the content language on your site.

 

Adsense2

 

3. Read Google AdSense Terms & Conditions and Program Policies.

4. The next step is to Submit AdSense application. Fill in all form fields and click the button Submit my application.

 

Adsense3

 

5. If you've done everything correctly, go to the Thank you for applying to AdSense page. There you can see that You will receive a message at the email address associated with your application regarding the status of your account within about a week.

6. After receiving an email with approvement of your joining Google AdSense request, follow the link mentioned in the email.

7. Now you are on the page Google AdSense Online Terms of Service. Read the document. In the end of the document place the check mark Yes, I have read and accept the Agreement and click the button Continue to my AdSense Account.

 

Adsense4

 

Step 2: Create ad unit

1. In your AdSense account go to the Welcome to AdSense page. Click the button Get started now.

 

Adsense5

 

2. Click the New ad unit button in the dashboard of Google AdSense.

 

Adsense6

 

3. Type the name of advertisement block, choose the size, type on the Ad units page and click the Save and get code button.

 

Adsense7

 

4. The script window of advertisement block will appear. Copy it and from the next step you will find out on how to to display the code on Joomla site.

 

Adsense7

 

Step 3: Configure Joomla editor to allows script tags

Usually banners can be set using iframe or script tags. The default editors in Joomla 3 delete such HTML tags automatically. Therefore, you need to configure the editor to allow them.

The most popular editors in Joomla 3 are TinyMCE and JCE.

Configuration of TinyMCE

Go to Extensions -> Plug-in Manager -> Editor - TinyMCE and you will see the plugin parameters:

 

Editors1

 

Change script, applet, iframe on empty and click the Save & Close button.

TIP: How to stop Joomla! editor from cleaning some HTML elements?

Configuration of JCE

If the JCE editor is installed, for its configuration go to the Components -> JCE Editor -> Profiles and choose the default profile.

 

Editors2

 

On the page JCE Administration :: Edit Profile - [Default] go to the Editor Parametrs tab, then choose the section Advanced and place Yes mark in the paragraph Allow Javascript. Click Save & Close.

 

Editors3

 

After that, you can add banners that are specified using the script tag.

Step 4: Display AdSense banner in custom HTML module

There are few easy steps for creation of new module to display AdSense banner on the site.

1. Сreate a custom html module.

Go to Extensions -> Module Manager in administrator back-end of Joomla 3. Click the New button on the Module Manager page:

 

Module1

 

2. After that, you will see a modal box where you need to choose Custom HTML type of module.

 

Module2

 

3. Choose the module position on which the banner will be shown on the site.

 

Module3

 

4. Click the Sourсe code button in the editor.

 

Module4

 

5. In the Source code window paste the banner script that you have got on the Google AdSense account. Click Ok and return to the editor.

 

Module5

 

Don't worry if you see the empty editor, it's ok as the script tag is not a visual tag.

6. On the Menu Assignement tab you need to assign the module for menu items.

 

Module6

 

Click Save & Close. Now, you should see your AdSense module on the website.

TIP: How to create a custom HTML module?

 

Custom image banners

If you have your own banner image you can place it on Joomla 3 site. For example:

 

Banner1

 

You can display a custom image banner in similar way as the Adsense banner. Please check the Step 4: Display AdSense banner in custom HTML module section for more details.

The only difference is that you need to display your banner image instead of the AdSense code in the content area of the custom HTML module:

 

Banner2

 

Banners component in Joomla

To display a banner on the website, Joomla 3 has a built-in component that can be used.
Check some quick steps on how to configure the component and module.

Step 1: Create a category

To create a banner category you need to go to Components -> Banners -> Categories -> New.

 

Banners1

 

On the next page you need to fill in the title and description. You can also adjust other category settings if needed.

 

Banners2

 

Step 2: Create a banner

To create a banner you need to go to Components -> Banners -> Banners -> New.

 

Banners3

 

On the next page you need to:

  • type the banner title
  • choose the banner category
  • choose the type of the banner Image or Custom
  • if it is Image banner, choose the image from the FTP server, set the width and height, type the alternative text
  • if it is Custom banner, type the custom code to display
  • type the URL to be used when you click on a banner
  • type the description
  • additional settings for banner can be done if needed. So on the tab Banner Details can be configured the number of banner displays on the site, selection of a client who ordered the banner placement, as well as counting the number of times a banner was displayed and how many times it was clicked.

Step 3: Display the Banners module

The Banner module displays the active banners from the component.

Go to Extensions-> Module Manager-> New-> Banners

In the module parameters you need to:

  • type the module title
  • choose if it will be displayed in the new window or in the same window afrer clicking on banner
  • choose the amount of banners to be shown
  • choose the category of banners
  • choose the position of placement banner on the site
  • adjust other settings if needed

 

Banners4

 

Step 3: Check the stats of your banner

In order to see the statistics of displays and clicks on your banner go to Components -> Banners.

 

Banners5

 

On the page you will see the amount of displays and clicks. The same information is in section Tracks, but also there is an option to filter by date or period.

Thank you for reading. Do not forget to share if you find it helpful!