Adsense Specifics

Adding AdSense to your GooglePage – step by step

 

Bookmark this page for future reference: Ctrl + D

 Site Navigation

 >> LifeSav Home <<

Optimization 'How To's'

Optimization Resources

Specific Help

AdSense links:
(turn AdBlock off to view)

 

Here is an easy way to add Adsense to any page. I offer more details below on how to find background colors for GooglePageCreator (GPC).

  • 1) Get the appropriate Adsense code and upload it as a file such as ads_hightower.htm.

  • 2) Edit the page where you want the ads to appear and insert:

    <iframe scr="ads_hightower.htm" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" frameborder="0" width="160" scrolling="no" height="600"></iframe> (the 160 and 600 being of course one of the Adsense Hightower sizes.)

  • Your done!

Here is a more detailed look (specifically for googlepages and how to get the background colors to match the ads). 

Create and publish the page you intend the AdSense adverts to appear on.
Use your browser to view the page and save your page to your hard-disk using your browsers built-in File, Save-as, Web page command. You should now have a 'mypage.htm' file on your computer.

Open the 'mypage.htm' using a text editor. (Right click mypage.htm and 'open with' your text editor.) Close to the top of mypage.htm you will see the <style type="text/css"> reference. Most of the 'mypage.htm' document is comprised of the CSS (Cascading Style Sheet) information. This information is what creates the look and colors of your page.

Let's suppose you want to add AdSense to a sidebar (left or right). Scroll about 2/3 of the way down 'mypage.htm' until you find

/* Sidebar style
  ----------------------------------------------- */
#sidebar .links {
      background: #F7F7F7;
      position: relative;
  }

This is the background color of the sidebar on the page you are viewing right now. The actual color is the 'F7F7F7' part. Open a new text editor page and copy the F7F7F7 statement into it so you have the reference later. You can now find other information such as the color of your link. In the case of this skin, #sidebar .links has no color associated with it, just the background color. That means that the links are black (#000000). However, most skins will have a statement something like:
    Color: #3366FF

You may of course be placing your AdSense into the main content area of your page. Most GooglePage skins have some color in this area (if your area is white, the color you need to know for AdSense is #FFFFFF). To find the color Google used for your skin, scroll back up to about 1/3 of the page till you find:

    /* Basic HTML style
  ----------------------------------------------- */

Under this section you will find 'a:link' and 'body' styles which will include a color: #xxxxxx statement if indeed a background color is used. Copy the a:link color # and the body color # into your other text editor page.

Assuming you already have a Google AdSense account, sign in and click the middle, Adsense Setup button. Next click the AdSense for Content button. Choose Ad unit or Link unit and press Continue. (Google updates and adds to these pages often so specifics here may change, but the basics will remain the same.) Here you can choose which ad format you want. However, ignore that just for one moment. Just below Format you will see the Color option and to your right, the Paletts box. Click Edit Palettes. Are you still with me? You should now be on the https://www.google.com/adsense/colors page.

Now you can change the AdSense colors to fit your GooglePage exactly. Your options are:

    Border #
    Title #
    Background #
    Text #
    Url #

What you create here is totally up to your taste, but it is recommended to blend your AdSense into your pages skin colors.

Using the example above of adding AdSense to the sidebar on my skin, I added the following:

Border # F7F7F7 (means that the border and background are identical)
Title # 24355D (actually a shade lighter than black)
Background # F7F7F7 (same as the border = no border noticeable)
Text # 000000 (makes the advert text black)
Url # 008000 (the light green color indicating where the advert came from)

Next, save these changes to a palette name such as GPC or Gpages or whatever makes sense and click Save Palette. (For some reason I am returned to the same page and have to click the Products tab (just under Reports) and again pick Ad Units, could just be my browser though.)

Now you should be back at the Products > AdSense for Content section. First pick your Format (size and shape of the AdSense advert). Staying with our Sidebar example, you might want to use the Vertical, 160 x 600 Skyscraper format from the drop-down list. Next, under Color, on the right, click the drop-down list in the Palettes box and you will see your newly saved GPC or Gpages palette – whatever you called it. On the left the screen will automatically show you the colors as they look on a white background.

Continue down the page adding the options and Continue till you get the code offered to you.

Copy that code (just click in the box) and press Control C to copy the code and paste it (Ctrl P) into a new text editor file. Save that on your computer as GPageAdsense.txt or whatever name you prefer.

If you still have your 'mypage.htm' file open, you can now scroll down near the bottom to wherever you want to place the AdSense. In keeping with our sidebar example, watch for a statement reading:
      <div id="sidebar">

You probably already have links or text or a picture in the sidebar, so scroll down further until you come to the 

        </div></div>
            <div style="clear: both"></div>
statements (before      <div id="footer"><div class="wrapper">

Place your AdSense code BEFORE the </div></div> statements. Here is an example from my AdSense page.

<h3 style="text-align: center;">Google links:<br></h3>
<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
google_ad_width = 160;
google_ad_height = 600;
google_ad_format = "160x600_as";
google_ad_type = "text";
google_ad_channel ="3599716003";
google_color_border = "F7F7F7";
google_color_bg = "F7F7F7";
google_color_link = "24355D";
google_color_url = "008000";
google_color_text = "000000";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div></div>
            <div style="clear: both"></div>
          </div>
   
        </div>
      </div>
     
      <div id="footer"><div class="wrapper">
etc etc.

Save 'mypage.htm' and close the text editor. Log into your GooglePage account and Upload (on the right-hand side) 'mypage.htm'. Edit one of your existing pages (home for example) and create a link to 'mypage.htm'. Test your link to see if the AdSense is there and delete the original text page.

NOTE: Do not edit 'mypage.htm' with GooglePage Editor since it will delete the AdSense code (at the moment, I suspect that will change soon). If you need to make changes to 'mypage.htm' do so with your text editor on your computer and Upload any changes.

Continue through our pages here for tips on getting visitors to view ‘mypages.htm’ so you can make money with your new adsense adverts.


See also Rami's site for detail on how to edit GooglePage Creator (GPC) pages. 


|| Related: Testing with Search >>