How to Add Google Advertisements (AdSense) to Your Website Using Dreamweaver

By Christopher Heng

If you use Adobe Dreamweaver, a well-known What-You-See-Is-What-You-Get (WYSIWYG) web editor, to create your website, adding Google advertisements, or AdSense, to your site is simple. This tutorial takes you through the steps of getting the ads onto your website.

Preliminary Matters

• Creating a Website

  This article assumes that you already have an existing website. If this is not true, please read the How to Start Your Own Website: The Beginner's A-Z Guide. That article takes you through all the steps necessary to get your website started, and points you to my Dreamweaver tutorial so that you can design your website.

• Signing Up for a Google AdSense Account

  You should also have signed up for an AdSense account. If not, and you want to have an overview of the entire procedure, read my article How to Add Google Advertisements to Your Blog or Website.

Steps to Inserting Google Ads on Your Website

1. Log into your AdSense account and click "AdSense Setup". A new page will load. Click "AdSense for Content". You will be taken through a series of steps that lets you choose the type of advert you want for your site, as well as customize its size and colours. This is necessary because everyone's site looks different, and you will want to change the ad to suit your site's design.
   When you are through customising ("customizing" in other variants of English) your advertisement to your satisfaction, click "Submit and Get Code". You will be given a snippet of code to insert into your web page. Click somewhere inside the box with this code. The code will automatically be selected. Then click your right button on your mouse and select "Copy".
2. Start up Dreamweaver and load the page where you want to insert the ad. Adverts can be inserted anywhere on your web page. Their placement on the page depends entirely on you. Common places where people place ads include the side panel, the top of the page, or even within your page's main content.
   Note that there is a trade-off involved in your ad placement. Advertisements that are placed in a prominent position on your web page, such as embedded right in the middle of your content, get better clicks and hence better income. This is because more people actually see those advertisements when they're right under their noses. However, putting ads in this position also puts off some visitors, since they interrupt the flow of reading when they're looking at your site.
   Advertisements that are tucked away in obscure places on the web page, such as the placements you see on thesitewizard.com, tend to fare poorly, since most people don't notice them. (If they don't see the ad, they won't realise that it is relevant to them, and therefore they won't click it.) However, such placements makes your website more pleasant to use for your visitors.
3. After your page is loaded in Dreamweaver, make a space for the advertisement. For example, if you are putting your ad near the top of your page, you may want to create a blank line before the advert and one after it. Then click the exact spot where the advertisement is to appear so that your blinking text cursor will appear in that spot.
   Without moving the cursor from that spot, switch to Dreamweaver's Code View by clicking the "View" menu followed by the "Code" item. In the future, I shall refer to this sequence of clicking the menu items as "View | Code".
4. Dreamweaver now shows you the "raw" HTML code for your web page. You should be able to spot the blinking cursor. Select "Edit | Paste" from the menu. If you remember, this means that you should click the "Edit" menu, and then the "Paste" item on the menu that appears.
   The supplied code from Google will appear immediately in your window.
5. Return to the Design mode in Dreamweaver. To do this, select "View | Design" from the menu. You won't be able to see your advertisement in Dreamweaver. That's normal. If you have completed all the steps mentioned, the code is there. It's just not visible in the web editor. Publish your web page to your site in your usual way.
6. Now go to the page you've just published using your web browser. Note that this must be your "live" published copy on your website, not the local copy on your own hard disk. Make sure that JavaScript is enabled in your web browser, or you won't be able to see your advertisement. If you don't know what JavaScript is, or you don't know how to "make sure" that it is enabled, it means that it's already enabled.
   Don't worry if the advertisement does not show up at first. When the page is first loaded, Google needs to send its AdSense bot (computer program) to grab a copy of your page and "read" its content. That's why your page has to be on your website and not your computer before the advertisement will show. After it has retrieved your page, it will select ads that are relevant to it.
   To see your ads if you don't see them the first time you load your page, wait a while, then refresh your browser to force the page to be reloaded. If you have waited long enough (to give the AdSense bot time to get a copy of your page), you should be able to see the advertisement. Remembernot to click on your own Google ad! If you don't know why, read my other article on AdSense.

Congratulations!

Congratulations. You have successfully added Google AdSense advertisements to your site using Dreamweaver.

READ MORE: thesitewizard.com