JavaScript Positioning of AdSense Ads

I am trying to load my AdSense ads at the top of the page and then position them at different spots lower on the page by using JavaScript. However, only 1 of the 2 ads I am testing actually gets displayed and it gets displayed in the wrong position. I have my test page set up at http://www.romancestuck.com/test-pages/javascript-adsense-test.htm if you could offer any assistance.

Thank you so much!
webstuck5Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Amar BardoliwalaCommented:
Hello webstuck5,

I am not master of adsense but I was able to get both your ads with following code.

Please see if this helps you.

<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
    <title>JavaScript AdSense Test</title>
    <meta name="ROBOTS" content="NOINDEX, FOLLOW">
  </head>

  <body>
    

    ad_inline_1_position<br>
    <div id="ad_inline_1_position" >
		<div id="ad_inline_1" style="width:336px; height:280px;">
				<script>
					<!--
					google_ad_client = "ca-pub-3412735816916817";
			/* RomanceStuck.com-Inline #1-Content-336x280-Text/Image-Google default */
			google_ad_slot = "8287822334";
			google_ad_width = 336;
			google_ad_height = 280;
					-->
				</script>
			<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
			</script>
		</div>
	</div>
	
<br /><br /><br /><br /><br />
    ad_footer_1_position<br>
    <div id="ad_footer_1_position">
		
    <div id="ad_footer_1" style="width:970px; height:90px;">
		<script>
		<!--
		google_ad_client = "ca-pub-3412735816916817";
        /* RomanceStuck.com-Footer-Content-970x90-Text/Image-Google default */
        google_ad_slot = "8126261531";
        google_ad_width = 970;
        google_ad_height = 90;
		-->
		</script>
		<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
		</script>
	</div>
	</div>
  

</body></html>

Open in new window


Thank you.

Amar Bardoliwala
0
webstuck5Author Commented:
I can't do it that way because I am split testing AdSense ads. So, I am loading certain ones in my top JavaScript and then positioning them later using JavaScript.
0
webstuck5Author Commented:
I think the problem is that appendchild can't access my divs added to my web page through document.write. I have also tried to use:

    <script>
      <!--
        google_ad_client = "ca-pub-3412735816916817";
        /* RomanceStuck.com-Footer-Content-970x90-Text/Image-Google default */
        google_ad_slot = "8126261531";
        google_ad_width = 970;
        google_ad_height = 90;

        var div = document.createElement('div');
        div.id = 'ad_footer_1';

        var script = document.createElement('script');
        script.setAttribute('src', 'http://pagead2.googlesyndication.com/pagead/show_ads.js');

        div.appendChild(script);
        document.body.appendChild(div);
      //-->
    </script>

    <script>
      <!--
        google_ad_client = "ca-pub-3412735816916817";
        /* RomanceStuck.com-Inline #1-Content-336x280-Text/Image-Google default */
        google_ad_slot = "8287822334";
        google_ad_width = 336;
        google_ad_height = 280;

        var div = document.createElement('div');
        div.id = 'ad_inline_1';

        var script = document.createElement('script');
        script.setAttribute('src', 'http://pagead2.googlesyndication.com/pagead/show_ads.js');

        div.appendChild(script);
        document.body.appendChild(div);
      //-->
    </script>

to load my ads but I can't seem to get that working either.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Amar BardoliwalaCommented:
Hello webstuck5,

Following link shows how you can do that with plain Javascript. They are using appendChild and innerHTML to solve the problem.

http://stackoverflow.com/questions/6197768/dynamic-adsense-insertion-with-javascript

Following link should help you adding ad to div using jquery.

http://stackoverflow.com/questions/1142861/jquery-append-google-adsense-to-div

I think it should help you to solve your problem.

Thank you.

Amar Bardoliwala
0
webstuck5Author Commented:
I'm not sure that is exactly what I want. My problem is when I use document.write to make a div tag, I can't seem to access the div contents later by using appendChild.
0
webstuck5Author Commented:
I have also tried:

  <body>
    <div id="ad_footer_1" style="width=970px; height=90px;">
    </div>
    <div id="ad_inline_1" style="width=336px; height=280px;">
    </div>

    <script>
      <!--
        google_ad_client = "ca-pub-3412735816916817";
        /* RomanceStuck.com-Footer-Content-970x90-Text/Image-Google default */
        google_ad_slot = "8126261531";
        google_ad_width = 970;
        google_ad_height = 90;

        document.getElementById('ad_footer_1').innerHTML = '<scr' + 'ipt ' + 'src="http://pagead2.googlesyndication.com/pagead/show_ads.js">' + '</scr' + 'ipt>';

        google_ad_client = "ca-pub-3412735816916817";
        /* RomanceStuck.com-Footer-Content-970x90-Text/Image-Google default */
        google_ad_slot = "8126261531";
        google_ad_width = 970;
        google_ad_height = 90;

        document.getElementById('ad_inline_1').innerHTML = '<scr' + 'ipt ' + 'src="http://pagead2.googlesyndication.com/pagead/show_ads.js">' + '</scr' + 'ipt>';
      //-->
    </script>

    ad_inline_1_position<br>
    <div id="ad_inline_1_position">
    </div>
    <script>
      <!--
        document.getElementById('ad_inline_1_position').appendChild(document.getElementById('ad_inline_1'));
      //-->
    </script>

    ad_footer_1_position<br>
    <div id="ad_footer_1_position">
    </div>
    <script>
      <!--
        document.getElementById('ad_footer_1_position').appendChild(document.getElementById('ad_footer_1'));
      //-->
    </script>
  </body>
0
webstuck5Author Commented:
Any ideas?
0
Amar BardoliwalaCommented:
Hello webstick5,

I have modified your code as following. See if that helps you.

<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
    <title>JavaScript AdSense Test</title>
    <meta name="ROBOTS" content="NOINDEX, FOLLOW">
	<script type="text/javascript" charset="utf-8">

		function adsense(w, h, slot) 
		{
			google_ad_client = "ca-pub-3412735816916817";
			google_ad_slot = slot;
			google_ad_width = w;
			google_ad_height = h;
			
			var url = "http://pagead2.googlesyndication.com/pagead/show_ads.js";    
			document.write(
				 '<sc' + 'ript src="' + url + '">'
				+ '</sc' + 'ript>');
		}
		
		

	</script>
  </head>

  <body>
    

    ad_inline_1_position<br>
    <div id="ad_inline_1_position">
    <div id="ad_inline_1" style="width=336px; height=280px;"><script type="text/javascript">adsense(336, 280, '8287822334');</script></div>
	</div>
    

    ad_footer_1_position<br>
    <div id="ad_footer_1_position">
    <div id="ad_footer_1" style="width=970px; height=90px;"><script type="text/javascript">adsense(970, 90, '8126261531');</script></div>
    </div>
  
	
</body></html>

Open in new window


Thank you.

Amar Bardoliwala
0
webstuck5Author Commented:
Sorry, but that doesn't work because I need to load the ads in order of their best performance. AdSense shows ads according to how well they think they will perform on the web page. My best performing ad spot is at the bottom of the page so I need to load that ad first on the web page and then move it to the bottom of the page.

Thanks for all your help so far (even though it hasn't been quite what I want)!
0
Amar BardoliwalaCommented:
Hello webstuck5,

It might be that I did not understand your problem well and I also do not know how adsense exactly works.  Also I think if you have your adsense ads in order when your page loads you should be able to set that with the code above.

Also the way you are trying not working because google code uses document.write in its code as well so that is creating problems.

Apart from that look at following link, which shows how to add ads dynamically using array of slots.

http://www.skipser.com/p/2/p/dynamic-responsive-adsense-ads.html

I think if your position to show ad is fix you should be able to show any ad slot anywhere.

see if this helps.

Thank you.

Amar Bardoliwala
0
webstuck5Author Commented:
The line that actually loads the ad is:

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

So, I need to load that at the top in a div tag so I can reference it when I move it lower on the page. Rewriting the document.write statement may be what I need but having a tough time implementing that code with my code.
0
webstuck5Author Commented:
My big problem seems to be that http://pagead2.googlesyndication.com/pagead/show_ads.js, which loads each ad, has to be in a separate script for each ad or it only loads the last ad. I figured out a way to decide what ads to load in one script and then load each relevant ad in its own script and then move the ads later on. It isn't as elegant of a solution as I would like and uses a lot of separate scripts, but it works. Thanks for all your help and if you have any thoughts on how to make this solution better, please let me know.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
webstuck5Author Commented:
I wasn't thrilled with my solution so I asked if anyone could improve upon it. After a number of days, no one had commented.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.