Loading Adsense inside of a <script>

[csdude55]

I swear, guys, sometimes I think I ask the most remedial questions! lol

I'm trying to load SYNC Adsense tags within a <script>. This is what I have:

document.write('<div data-b="' + lB + '" class="med_rect" style="margin: 10px 0 20px 0">');

google_ad_client = "ca-pub-xxxx";
google_ad_slot = "xxxx";
google_ad_width = 300;
google_ad_height = 250;

document.write('<scr' + 'ipt lang' + 'uage="jav' + 'ascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></scr' + 'ipt>');
document.write('</div>');

In reality, this is inside of a loop, so I show one banner, followed by an Ajax call to some local content, followed by a second banner, and so on until the end of the page.

The first Adsense banner loads, but then everything after that fails. If I remove the chopped up document.write('<scr' + 'ipt lang'... line, though, everything else works correctly. So my problem is definitely there.

Any suggestions?

[keyplyr]

There are odd issues sometimes when you nest JS.

Instead of a JS, have you considered using a SSI? IMO the fewer scripts the better.

[csdude55]

With this being Adsense code, I'm not sure what's allowed to try and what's not. Is using SSI allowed? I haven't used SSI in years... if it's OK to use, can you point me to a tutorial or something?

Since I'm using jQuery, I tried this, too, but it just returns blank:

$.getScript("//pagead2.googlesyndication.com/pagead/show_ads.js");

[edited by: csdude55 at 7:29 pm (utc) on Apr 17, 2017]

[londrum]

i might be wrong, but don't google allow you to include the script line just once, and then delete it from all subsequent ads? so you don't need it for the other ads anyway.
my ad code looks a bit different to yours, though

[csdude55]

I think that's the case if I use ASYNC, but when I switched to SYNC my revenue went WAY up.

With SYNC, I'm pretty sure that the <script> line is what's used to define where the ad is actually placed. I might not have to use the google_ad_xxxx parameters each time, though (I haven't tested, that's just a guess).

Regardless, the next section is an Ajax call that's failing, so I'll have to fix this issue anyway.

[csdude55]

FWIW, I just now tried using "concat", but it had the same effect (everything below the first one failed):

var js_1 = '<scr';
 var js_2 = 'ipt lang';
 var js_3 = 'uage="jav';
 var js_4 = 'ascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></scr';
 var js_5 = 'ipt>';

 var js = js_1.concat(js_2, js_3, js_4, js_5);

google_ad_client = "ca-pub-xxxx";
google_ad_slot = "xxxx";
google_ad_width = 300;
google_ad_height = 250;

document.write(js);

I DID get a warning in the console with this one, though... A Parser-blocking, cross site (i.e. different eTLD+1) script, ..., is invoked via document.write. This MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message.

I didn't have a separate console message, though, so maybe this is irrelevant?

[keyplyr]

I use Server Side Includes (SSI) for all my Adsense ads and have for over 10 years.

Not sure of your server set-up. SSI needs to be turned on at the server, either with htaccess or htconfig. Your host should have instructions how to do that and the code syntax.

But here is a generic tut:
[freewebmasterhelp.com...]

Then you can use a couple of different file types to house the code. I prefer HTML. Then call that file with the virtual SSI code put in the place you want the ad to appear.

[csdude55]

I used SSI a long, long time ago on SHTML pages, before I learned PHP. Once I moved to PHP I stopped using it, so I'm super rusty. Thanks for the link!

I could be misunderstanding here, but wouldn't I have to write the included file in Javascript, too? If it's going to be included within a Javascript section?

Maybe it will help if I show you my entire script... I'm checking the available height, then showing banners and other aside content for the full length of the page:

// Determine the numeric data-b to assign
var lB = $('[data-b]').last().data('b');

// Measure full height of <main>
var pH = document.querySelector('main').clientHeight;

// Determine how many iterations to have; 800px for each iteration
var sH = parseInt(pH / 800);

for (var i=0; i <= sH; i++) {
 lB++;
 document.write('<div data-b="' + lB + '" class="med_rect" style="margin: 10px 0 20px 0">');

 google_ad_client = "ca-pub-xxxx";
 google_ad_slot = "xxxx";
 google_ad_width = 300;
 google_ad_height = 250;

 document.write('<scr' + 'ipt lang' + 'uage="jav' + 'ascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></scr' + 'ipt>');
 document.write('</div>');

 document.write('<div id="local_' + lB + '">' + loading + '</div>');
 $('#local_' + lB).ajax('local.php?lb=' + lB);
}

[keyplyr]

• You copy the entire Adsense JS code.

• Paste that code into an empty text file, name & save to an appropriate directory.

• Put the code where you want the ad to display:

<!--#include virtual="example.txt" -->

[keyplyr]

Also, as I said earlier, you need to turn on this feature at your server.

I do it like this in htaccess:

AddHandler server-parsed .html
AddOutputFilter INCLUDES html

However, your server set-up may require different syntax. If so, they may have a knowledge base tutorial.

[csdude55]

Keyplyr, I tried it but nothing happened, so I'm not sure that SSI is enabled. I have a semi-managed server (from Softlayer), though, so I can do whatever I want with it.

I'm pretty sure that your .htaccess only works on HTML files, right? My site is all in PHP. I Googled but couldn't find, is there a way to make PHP recognize SSI? This just made the browser download the file:

AddHandler server-parsed .php
AddOutputFilter INCLUDES html

Regardless, I added this to the top and nothing happened, so I'm sure that SSI is what's not working, and it's not an issue with my coding:

<!--#config timefmt="%A" --> <!--#echo var="DATE_LOCAL" -->

BUT! If I understand correctly, wouldn't it just end up outputting something like this?

<script>
document.write('<div data-b="' + lB + '" class="med_rect" style="margin: 10px 0 20px 0">');

<script type="text/javascript">
google_ad_client = "ca-pub-xxx";
google_ad_slot = "xxx";
google_ad_width = 300;
google_ad_height = 250;
</script>
<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>

document.write('</div>');
</script>

Or does it automatically encode everything that's included to make it parse correctly?

FWIW, here is everything else that I've tried so far:

// First attempt, I still don't know why this didn't work
document.write('<scr' + 'ipt lang' + 'uage="jav' + 'ascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></scr' + 'ipt>');

// jQuery
$.getScript("//pagead2.googlesyndication.com/pagead/show_ads.js");

// Using concat
var js_1 = '<scr';
 var js_2 = 'ipt lang';
 var js_3 = 'uage="jav';
 var js_4 = 'ascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></scr';
 var js_5 = 'ipt>';

var js = js_1.concat(js_2, js_3, js_4, js_5);

document.write(js);

// Create separate script element
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://pagead2.googlesyndication.com/pagead/show_ads.js';
document.body.appendChild(script);

// Create working Adsense in HTML, hide it, then copy its contents to dynamic DIV
// in HTML:
<div id="adsense" style="display: none">
<script>
google_ad_client = "ca-pub-xxxx";
google_ad_slot = "xxxx";
google_ad_width = 300;
google_ad_height = 250;
</script>
<script language="javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>

// then in <script>
document.write('<div id="banner_' + lB + '" data-b="' + lB + '" class="med_rect" style="margin: 10px 0 20px 0"></div>');

var ad = $('#adsense').html();
$('#banner_' + lB).html(ad);

Then I tried this, which DOES give me an alert that it's successfully loading, but I just end up with a blank, anyway:

$.getScript("//pagead2.googlesyndication.com/pagead/show_ads.js")
 .done(function(script, textStatus) {
 alert('works');
 })
 .fail(function(jqxhr, settings, exception) {
 alert('doesn't work');
});

I'm starting to think that maybe NOTHING will work... which really sucks, because this is pivotal to my entire site :'-(

[edited by: not2easy at 6:26 am (utc) on Apr 18, 2017]
[edit reason] privacy [/edit]

[keyplyr]

If your pages are .php then use:

AddHandler server-parsed .php
AddOutputFilter INCLUDES php

To test whether SSI is set up on your server place the following code in an php page:

<!--#echo var="DATE_LOCAL"-->

Only put the Adsense code it the include file (no query code, no document write stuff)

********

Another good option is to just use PHP Includes:

<? php include "example.txt"; ?>

Here is a generic tut: [w3schools.com...]

Since your server is already paring your pages as PHP you wouldn't need to add the Handler or the Filter.

[csdude55]

I really appreciate it, keyplyr! I tried it using PHP include(), but that doesn't work, either; it just inserts the code in the middle of the JavaScript :-(

I've come across ONE option that "works", and I'm 90% sure that it's not a violation of Google policy. But I'm not sure if it will negatively affect the value of the banners? So any feedback on this would be greatly appreciated.

The concept is that I create a series of DIV tags dynamically in Javascript, named "aside_[0-9]". Then, at the bottom of the page, I create a butt load of hidden DIV tags (ie, display: none) with Adsense code inside of them; by "butt load", I mean "more than I could possibly need for the page" (I tried just creating one and then using it over and over, but that didn't work). Then, after that, I use jQuery to copy the innerHTML of those hidden DIV tags and assign it to the empty, dynamic tag.

// Declare array
var bannerArr = new Array();

// Determine the numeric data-b to assign
var lB = $('[data-b]').last().data('b');

// Measure full height of <main>
var pH = document.querySelector('main').clientHeight;

// Determine how many iterations to have; 800px for each iteration
var sH = parseInt(pH / 800);

for (var i=0; i <= sH; i++) {
 lB++;

 document.write('<div id="aside_' + lB + '" data-b="' + lB + '" class="med_rect" style="margin: 10px 0 20px 0"></div>');
 bannerArr.push(lB);

 document.write('<div id="local_' + lB + '">' + loading + '</div>');
 $('#local_' + lB).ajax('local.php?lb=' + lB);
}

# Then at the bottom of the page, just above </body>
<?php
for ($i=0; $i < 50; $i++) {
 echo <<<EOF
<div id="adsense_$1" style="display: none">
 <script type="text/javascript">
  google_ad_client = "ca-pub-xxxx";
  google_ad_slot = "xxxx";
  google_ad_width = 300;
  google_ad_height = 250;
 </script>
 <script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>


EOF;
}

echo <<<EOF
<script>
for (var i=bannerArr[0]; i <= bannerArr[bannerArr.length - 1]; i++) {
if (document.getElementById('aside_' + i)) {
var adsense = $('#adsense_' + i).html();
$('#aside_' + i).html(adsense);
}
}
</script>

</body>
</html>

EOF;

[keyplyr]

Includes, whether SSI or PHPI are simple to execute. You are doing something wrong. I think you are complicating things. It needs to be as I exemplified.

Anyway, that is my suggestion. I use includes on all sites. Makes it easy to switch code to different ad campaigns.

[csdude55]

Using PHP include(), this is what I have in the code:

echo <<<EOF
...

var lB = $('[data-b]').last().data('b');
var pH = document.querySelector('main').clientHeight;
var sH = parseInt(pH / 800);

for (var i=0; i <= sH; i++) {
 lB++;

 document.write('<div id="aside_' + lB + '" data-b="' + lB + '" class="med_rect" style="margin: 10px 0 20px 0"></div>');

EOF;

include 'adsense.php';

echo <<<EOF

 document.write('<div id="local_' + lB + '">' + loading + '</div>');
 $('#local_' + lB).ajax('local.php?lb=' + lB);
}

The file adsense.php is:

<?php
echo <<<EOF
<script type="text/javascript">
google_ad_client = "ca-pub-xxx";
google_ad_slot = "xxx";
google_ad_width = 300;
google_ad_height = 250;
</script>
<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>

EOF;
?>

And the HTML output I'm getting is:

var lB = $('[data-b]').last().data('b');
var pH = document.querySelector('main').clientHeight;
var sH = parseInt(pH / 800);

for (var i=0; i <= sH; i++) {
 lB++;

 document.write('<div id="aside_' + lB + '" data-b="' + lB + '" class="med_rect" style="margin: 10px 0 20px 0"></div>');

<script type="text/javascript">
google_ad_client = "ca-pub-xxx";
google_ad_slot = "xxx";
google_ad_width = 300;
google_ad_height = 250;
</script>
<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>

 document.write('<div id="local_' + lB + '">' + loading + '</div>');
 $('#local_' + lB).ajax('local.php?lb=' + lB);
}

What am I doing wrong?

[keyplyr]

You need to just follow the steps above. Again, only the Google Adsense JS code should be in the include text file:

<script type="text/javascript">
google_ad_client = "ca-pub-xxx";
google_ad_slot = "xxx";
google_ad_width = 300;
google_ad_height = 250;
</script>
<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>

The include file is called from the page by using this code:

<!--#include virtual="example.txt" -->

or

<? php include "example.txt"; ?>

Don't use any other method. Do not use a document write JS snippet.

You are complicating this. That's why it isn't working.

Sorry, I am away from my desk and not at a computer any more. If you are still having difficulties, refer to those tuts.

[csdude55]

I have no doubt that I'm doing something stupid, keyplyr.

What I posted above is using PHP include() instead of the SSI that you posted before. I just now changed adsense.php to adsense.txt and made it JUST the Adsense code:

<script type="text/javascript">
google_ad_client = "ca-pub-xxx";
google_ad_slot = "xxx";
google_ad_width = 300;
google_ad_height = 250;
</script>
<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>

But I had the exact same output as before. Maybe SSI does something that PHP include() doesn't?

So in my .htaccess, I added what you suggested:

RewriteEngine on

AddHandler server-parsed .php
AddOutputFilter INCLUDES php

(RewriteEngine is already there, along with a lot of other things I've added over the years, but I put the AddHandler immediately after RewriteEngine)

Then on the page I added <!--#echo var="DATE_LOCAL"-->. This resulted in a file being downloaded named download that, when opened in Notepad, showed the PHP source code of the page. It didn't matter whether I put it within an echo <<<EOF...EOF; or outside of one.

My only guess is that there's a setting in my Apache or PHP that's not allowing PHP to do this?

I really do appreciate your time on helping me with this, keyplyr. I don't mean to waste your time, I just don't know what I'm doing wrong.

[keyplyr]

Put the handler & the filter at the top, above anything else.

<!--#echo var="DATE_LOCAL"--> should have displayed the date, not caused a downloaded file.

After correcting the htaccess, if the date is still not displaying on the page, your server is not supporting those 2 lines of code.

If you want to use includes you'll need to find out how to turn it on at your server.

[csdude55]

I put it at the top, and before I even added the SSI I realized that the source code was showing up on the page instead of being processed. So it's definitely an issue of the server not recognizing it.

I'll move that question over to the cPanel message board, see if they can suggest how to turn it on.

Assuming that it's not an option, though, what are your thoughts on the Javascript code that I posted at 1:57am?

[keyplyr]

It seems like an overly complicated way of doing something simple.

[csdude55]

Would you mind PMing a link to me of a site where you are using an SSI to include adsense code into a Javascript section? Maybe if I can see how it's working on your end, I can emulate it.

[keyplyr]

Follow the link in my profile.

[londrum]

Probably a dumb thought, built its the page with the php code in it that needs to be parsed as php, not the page with the Adsense code in it. It sounds like you're saying that page just prints out the php code without parsing any of it (or maybe I just read it wrong).

What is the page that contains the 'include' line, a .html page?
Whatever extension that is, that's what you need to okay in your htaccess file

[keyplyr]

@londrum,

csdud55 said

My site is all in PHP.

Not all servers are set up to use SSI or PHPI. csdude55 needs to find that out from his server company. This first tut I suggested showed how to test for that:

To test whether SSI is set up on your server place the following code in an HTML page:

<!--#echo var="DATE_LOCAL"-->

But since csdude55 is using PHP generated pages, this seems to be the issue.

[csdude55]

That's correct, the main page is PHP. I first made the included page with PHP, then just made it a simple text file, but neither worked.

There's definitely an Apache configuration that's stopping this, though. For testing, I converted everything to an SHTML page and added this to the .htaccess:

Options +Includes

AddType text/html .shtml
AddOutputFilter INCLUDES .shtml

...and now the test SHTML page is working. I plugged in <!--#echo var="DATE_LOCAL"--> for a test, and it does show the date.

So on the SHTML page, I have:

for (var i=0; i <= sH; i++) {
 lB++;
 document.write('<div id="aside_' + lB + '" data-b="' + lB + '" class="med_rect" style="margin: 10px 0 20px 0">');

<!--#include file='adsense.txt' -->

 document.write('</div>');
}

The file adsense.txt is:

<script type="text/javascript">
google_ad_client = "ca-pub-xxx";
google_ad_slot = "xxx";
google_ad_width = 300;
google_ad_height = 250;
</script>
<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>

But again, the HTML output was:

for (var i=0; i <= sH; i++) {
 lB++;
 document.write('<div id="aside_' + lB + '" data-b="' + lB + '" class="med_rect" style="margin: 10px 0 20px 0">');

<script>
google_ad_client = "ca-pub-xxx";
google_ad_slot = "xxx";
google_ad_width = 300;
google_ad_height = 250;
</script>
<script language="javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>

 document.write('</div>');
}

I'm obviously misunderstanding something.

[edited by: not2easy at 2:50 am (utc) on Apr 19, 2017]
[edit reason] privacy [/edit]

[keyplyr]

Are you using a CMS or something else that is processing the output?

[csdude55]

Nope, I code everything by hand in either Notepad or Notepad++

[csdude55]

Thanks for all of your help, keyplyr!

As far as I can tell, my choices are down to (a) scrap the idea completely, or (b) use this earlier script that I posted:

// Declare array
var bannerArr = new Array();

// Determine the numeric data-b to assign
//  all previous banners have <div data-b='0-9'></div>, so this finds the number of the last one
var lB = $('[data-b]').last().data('b');

// Measure full height of <main>
var pH = document.querySelector('main').clientHeight;

// Determine how many iterations to have; 800px for each iteration
var sH = parseInt(pH / 800);

for (var i=0; i <= sH; i++) {
 lB++;

 document.write('<div style="min-height: 800px">');
 document.write('<div id="aside_' + lB + '" data-b="' + lB + '" class="med_rect" style="margin: 10px 0 20px 0"></div>');
 bannerArr.push(lB);

 document.write('<div id="local_' + lB + '">' + loading + '</div>');
 $('#local_' + lB).ajax('local.php?lb=' + lB);

 document.write('</div>');
}

# Then at the bottom of the page, just above </body>
#  50 is an arbitrary number; I just picked a number higher than I could possibly have in banners
<?php
for ($i=0; $i < 50; $i++) {
 echo <<<EOF
<div id="adsense_$1" style="display: none">
 <script type="text/javascript">
 google_ad_client = "ca-pub-xxxx";
 google_ad_slot = "xxxx";
 google_ad_width = 300;
 google_ad_height = 250;
 </script>
 <script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>


EOF;
}

echo <<<EOF
<script>
for (var i=bannerArr[0]; i <= bannerArr[bannerArr.length - 1]; i++) {
if (document.getElementById('aside_' + i)) {
var adsense = $('#adsense_' + i).html();
$('#aside_' + i).html(adsense);
}
}
</script>

</body>
</html>

EOF;

[tangor]

Are you calling the include correctly? (I don't PHP, so looked at a manual) and found this:

[php.net...]

Might check your code....

[csdude55]

I think so, tangor. The issue was that keyplyr didn't realize I was still needing to load the script within the Javascript loop.

I'm trying to dynamically show banners to match the full length of the <main> content. Some pages are 1000px in height, where others can be 50000px, and (to me) it doesn't make sense to only show 2 banners in the first 1000px and then have a ton of whitespace. Now that Adsense changed their policy on limiting the number of banners, I'm able to come up with something more functional.

I don't know of any way to measure <main> other than with Javascript, so the only way I can think to do this is within a Javascript loop. And since, as keyplyr originally stated, nesting a <script> within a <script> is a nightmare, the alternative that I can think of is to dynamically generate empty DIV tags, then code hidden Adsense tags at the bottom of the page, then use jQuery to copy the innerHTML of those hidden tags to the dynamically generated tags.