How to Add Google Adsense Search Box On A Website

Google Adsense is one of the popular ways to make money online by placing advertisements on the website. To get the approval of Adsense, you are required to submit your website for review. Once you get approval from Google Adsense, they provide a JavaScript code that you need to place on a website. From the Adsense dashboard, one can get different sizes of ad units like 728*90, 336*280, 320*100, and 300*600 to be displayed on a website.

Apart from placing ads, Google Adsense provides a Search engine for a website which helps to earn more revenue. If you are an Adsense publisher, you should try this method to make more money with Adsense. When the user enters a keyword in your website search field, a user will redirect to the search page, where the search result will be displayed along with some relevant ads. If a user clicks one of the ad links from the search result page, you get a commission for this.

One more benefit of using the Google Search engine is it reduces loads on your server. When a user searches for a keyword, results will come directly from Google’s server which removes extra calls on your server.

Adsense provides a JavaScript code for the search form and search result which you should place in appropriate places. When you add JavaScript code for the Google search form, the default search form layout provided by Google will display on a website.

Google Search Form

You may want to replace this default search form with a different layout. I will show you how to do this at the moment. Before that let’s see a step-by-step guide on integrating the Google Search engine on a website.

Add Google Adsense Search Box and Search Result Code

Login to your Adsense account. From your Adsense dashboard, click on Ads->Overview->By ad unit->Search engines.

navigate-search-engine

Give the name of your ad unit. Under the What to Search? section choose Only sites I select option. Enter your website URL and hit the Create button.

add-site-google-search-engine

Next, fill out the form. Scroll down the page, click on the Search results, select the last option ‘on my website’, and enter the URL of your search page where you will display the search result.

Website Search Page

Finally, hit the Save and get code button. It will open a pop-up window. Copy the code for both the Search box and the Search result.

The search box code will go into the place of your search form. And Search result code will need to be placed on your search result page.

Now, you can search for a keyword, and the result will be displayed from the Google Search engine.

Replace Adsense Search Box

The default search box provided by Google is not that nice. It may not fit with your website design.

Don’t worry. You can easily replace this default search form with yours.

When we enter a keyword in the Adsense search box and hit the submit button, it will redirect to a search page with the parameter ?q=YOUR_KEYWORD.

For instance, if your search result page URL is http://yourdomain.com/search. Then your dynamic URL will become http://yourdomain.com/search?q=wordpress. Here ‘wordpress’ is the keyword to search for.

Now to replace the default Google Adsense search box, you should keep this structure intact. For this, you need to set the action URL of your form to the search page and give the name to the search field as ‘q’.

<?php
$q = isset($_GET['q']) ? $_GET['q'] : '';
?>
<form class="search-form" method="get" action="http://yourdomain.com/search">
  <input type="search" name="q" value="<?php echo $q; ?>" />
  <input type="submit" name="search" value="Search" />
</form>

This code adds your own search form on the website. After this, you don’t need that search form JavaScript code anymore.

That’s it! I hope you got to know about adding Google Adsense search on a website. I would like to hear your thoughts and suggestions in the comment below.

Related Articles

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

7 thoughts on “How to Add Google Adsense Search Box On A Website

  1. Hello Bro.
    Please your tutorial was really helpful but the Custom search ads code i was given by google was two.

    1. Search Box
    2. Search result

    How do I implement that? because of the no. displayed but when i tried to search took me to homepage. please try to use your own AdSense account again to look into what I was saying.

Leave a Reply

Your email address will not be published. Required fields are marked *