How to Include Sponsored Ads such as Google AdSense

How to Include Sponsored Ads such as Google AdSense

Contents

Overview
The following is an illustration of an XLEcom published website displaying six (6) sponsored Google AdSense Advertisement Blocks, One each on top and bottom of the page and two each on the left and right sides of the page. The two Featured Product Advertisement blocks, one left and one right, are for "your" website product ads which can be created automatically by the XLEcom program.

View a Live Website Demonstration utilizing Google AdSense Ads
You can view a Live Website Demonstration here: Mal's Cart and Google AdSense Ads Demo
 


Creating the Left and Right side Google AdSense Advertisement Blocks
Below is an illustration of a Google AdSense advertisement. It was created using the following JavaScript code provided by Google. In order to get the Advertisement code you must first have a Google AdSense account. Next, you need create a Ad channel within your Google account in order to get the code. Your actual Ad code may will vary a little from the example code shown below. It really depends on the type of Ad you want to display.

120 x 240 Vertical Banner Ad

Google AdSense code

<script type="text/javascript"><!--
google_ad_client = "pub-4846252889647883";
/* 120x240, created 5/14/08 */
google_ad_slot = "5457590999";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

The AdSense code provided by Google contains Comments, line breaks, and extra spaces. You first need to remove the comments and line breaks such that code will appear on one line. You may also need to remove some of the extra spaces within the code such that the code will fit within XLEcom Advertisement block's 256 characters limit.

Removing the Comments, line breaks, and extra spaces from the original Google AdSense code results in the following:

    <script type="text/javascript">google_ad_client="pub-4846252889647883";google_ad_slot="5457590999";google_ad_width=120;google_ad_height=240;</script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

To utilize the Google AdSense code within an XLEcom Advertisement block, copy and paste the code into the Custom Code Block area as shown in the images below. You can preview the Ad by pressing the Preview Layout button.

Adding the Code to the Left side Area
Activate the Site Setup - Left Frame Page / Area Dialog box and then press the Additional User Code button near the bottom right to bring up the Left Side Additional User Code Dialog box. Next, enter you Ad code into the Custom Code Blocks.

In the following example, the Ad code is placed in both Custom Code Block 2 and Custom Code Block 3.

 

Adding the Code to the Right side Area
Activate the Site Setup - Right Frame Page / Area Dialog box and enter your Ad code into the Custom Code Blocks. In the following example, the Ad code is placed in both Custom Code Block 1 and Custom Code Block 2.


Creating the Top and Bottom Google AdSense Advertisement Blocks
To Ad and Advertisement to both the top and bottom of the page, you will need to enter in your Ad code into the Add_Code Sheet. This feature is accessible via the Site Design, Home Page Design, or Support Pages Sheet >> Additional Code function. You can check out the sample include in this section by pressing the "Show Sample" button within the program.

The Additional Code (Add_Code) sheet is shown in the image below.

Preparing Your Ad Code
Prepare your Ad Code as stated above in the Left and Right Block section. Tee only difference is that you want to have the Advertisement displayed in the center, meaning centered justified. You will need to place the Ad code between the <div align="center"></div> tags in order to center the Ads. The bottom Ad code must be preceded with a line break by adding the HTML line break <br> tag to the beginning of the code.

Top of the Page Code (Beginning of the <body> section)
<div align="center"><script type="text/javascript">google_ad_client="pub-4846252889647883";google_ad_slot="5410591102";google_ad_width=728;google_ad_height=90;</script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></div>

Bottom of the Page Code (End of the <body> section)
<br><div align="center"><script type="text/javascript">google_ad_client="pub-4846252889647883";google_ad_slot="5410591102";google_ad_width=728;google_ad_height=90;</script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></div>

Enter you Ad code into the cells as shown in the Additional Code (Add_Code) image below. Next, check the corresponding check boxes to activate the code for Publishing.

That's It. All you have to do now is Publish your website.

View a Live Website Demonstration utilizing Google AdSense Ads
You can view a Live Website Demonstration here: Mal's Cart and Google AdSense Ads Demo
 


More Information
More information on creating Advertisement blocks can be found here: