Setting up Google Custom Search Engine(CSE) and AdSense

Google CSE

First we set up the Google Custom Search Engine by going to Google CSE Home where you will find the following : Google Custom Search Home

Click on the button that says, "Create a Custom Search Engine" which will take you to a page that looks like :

Create a Custom Search Engine

Now, in the order of the red pointers :

In the
Search engine name
section, give a name to the CSE. Since one can publish one's CSE for the use by others, use a name similar to what you would use as a page title so that others can quickly identify what your custom search is all about.
In the
Search engine description
section, similar to the relationship between the CSE's Name and a page title, the description should be a short snippet of information that can help one to understand what type of search the CSE is customized for.
In the
Search engine keywords
section, pick keywords that your site ranks well for. If someone searches on a keyword or phrase that is not in your list, that does NOT mean that your site will then not show up in search results, just that searches will try to focus on the listed keywords as much as possible.
Decide
what do you want to search
. For best results and to ensure that relevant results are always returned, preferably from your site, be sure to select "Search the entire web but emphasize included sites." If you only want results displayed from your site, you could always select "Only sites I select" and then only list your site or if you just want to enable searching the entire Web, select "The entire web".
If you selected either "Search the entire web but emphasize included sites." or "Only sites I select" you now need to
select some sites
.
Make sure to enter the URL(s) of the site(s) you want included.

When entering URLs, you have various options to decide how deeply a listed site is searched. To perform a search among all pages within a certain domain or directory, make sure the URL ends with a /*. If you only want a single page included, leave off the trailing *.
Following the examples given what is searched among would be as follows :
- All indexed pages of www.my-site.com will be searched.
- All indexed pages of www.another-site.com will be searched.
- Only indexed pages at or below www.part-of-another-site.com/dir/ will be searched but anything above, www.part-of-another-site.com/, for example, won't be.
- Only the entrance page at www.single-page.com.
Make sure to check the box indicating you have read and agree to the Google Custom Search Engine Terms of Service but more importantly make sure you actually have read and understand the ToS!
Any elements not specifically mentioned or highlighted in this walkthrough may safely be left in its default state. You may also try various settings but note that some options selected will change options that may or may not be available later on. But, the organization of elements is logical and options irrelevant to a given state are hidden from view so it is fairly easy to see what effects what.
Finally, click the Next button to submit the form to create your Google CSE!

Customizing the Google CSE

Now that we have the core of the Custom Search Engine set up to execute searches the way we want, it is now time to set up how the CSE looks and how the the CSE acts when a search is executed.

CSE Control Panel - Look and feel

Clicking on the Look and Feel tab of the control panel, you will see something similar to the following : Google Custom Search -> [Look and Feel]

Although there are a number of other controls you can play with, the primary control for this walkthrough is that which controls the CSS styling of the Search Results.

There are many different schools of thought as to "blend or not to blend" and what I have chosen to use on this site is a combination of blending the background, border and text while the links and URLs are differentiated from all other types of links to highlight the fact they are search result links or ad links.

Although the search results will end up looking like the ads displayed in the search results, there is no way, that I know of to set a different color scheme for the organic results as is to be used for the ads displayed along with the search results but then again, it seems to work well the way it is.

Where you get the colors from to populate the list from is up to you but what I did in the case of Cass-hacks is to use the same colors for the search results as I use for AdSense Context Ads so that I have a consistent look and feel across all advertising.

To use colors styles from any existing ads you may have configured, you can go to your AdSense account and go to the [AdSense Setup] tab and then click on the [Manage Ads] sub-tab.

Pick an ad you know to have a color scheme you would like to use and click the [Edit Ad Settings Бт] link to the far right.

From there, look to the Colors section and select from any available Pallettes.

Copy each of the appropriate ad element color numbers to their counter-parts on the Google CSE Look and Feel page.

Click on the Save Changes button just underneath the ad element color settings and you are ready to move on to setting up how the Google CSE functions when in use.

CSE Control Panel - Code

Clicking on the Code tab of the control panel, you will see something similar to the following : Google Custom Search -> [Code]

This page is where all of the magic happens. We start off with the

search results hosting options

The first decision is whether to let Google create the search results page, boring, or allow you to host the page within your own site, which is MUCH more interesting!

The most interesting of all is a new option to use a scripted overlay that uses an Google AJAX API to allow you to process and display the search results in many different interesting ways.

Unfortunately the overlay method does not support the use of AdSense within the search so except when experimenting, I always use the iFrame option.

If search results are to be displayed on a page within your own site, you need to let Google know the URL of the results page.

In the

specify search results details

section, enter the URL of the page you will set up to receive results. Don't worry too much about the results page yet, it is usually very easy to make.

If you will be using AdSense with your CSE, you can select your preferred ad location(s). If you have the width available, top and right seem to work well although usually an available width of around 750px is needed. The second best option is easily top and bottom

Search box code

After selecting the desired options already mentioned, the first code box on the page should have the code needed to create the search box on your site's pages.

Simply copy and paste it wherever you want a CSE to appear on your site's pages.

Search results code

To make a search results page, I simply took an existing page and deleted all the content in the main area and then replaced it with the code provided in the search result code box.

There, that's it, you should now have a fully functioning Google Custom Search Engine operating on your site!

Google CSE with AdSense

Why give Google all earnings from ads clicked in search results from your custom search engine when Google is willing to share?

If you already have an AdSense account, you should see an option in the menu of the Control panel that says "Make Money".

You probably noticed it before I even mentioned it but clicking on it you will see a page similar to the following :

Towards the bottom you are asked to enter an AdSense Channel name. This allows you to see how your custom search engine is performing from an AdSense point of view.

After selecting a channel and clicking the Submit button, you should be all set to start earning from ads clicked on search results pages generated due to searches executed using your new Google Custom Search Engine!