Adsense content just displaying blank square

Question

On my site, the AdSense content is loaded dynamically via javascript. The article content is retrieved via AJAX then displayed on the page. When it is displayed, the AdSense code is appended to the article.

You can see it in action at: http://thepresslist.com.au/

The code should appear just above where you can see the word 'Advert'. On my end, I can only see a blank area where the ad should appear, but no ad. Looking at the source of the final page, the code appears to be correct. AdBlock is disabled and Javascript is on. I see no obvious errors in my AdSense account.

Is anyone able to shed some light onto why no ads are displayed?

This is the code that generates the ad placement (the array is the Google AdSense script, exploded, to split up the </script> tags.

articleAd.innerHTML = <?php 
    $numItems = count($site_content_adverts); 
    $i = 0; 
    foreach ($site_content_adverts as &$value) { 
        if(++$i === $numItems) { 
            echo '"' . $value . '" + ';
        } else { 
            echo '"' . $value . '" + "pt>" + ';
        }
     }
?> "Advert";

On the loaded page, the above script looks like this (after the exploded string is echoed):

articleAd.innerHTML = "<style>.press-list-ad-1 { width: 320px; height: 50px; }@media(min-width: 500px) { .press-list-ad-1 { width: 468px; height: 60px; } }@media(min-width: 800px) { .press-list-ad-1 { width: 728px; height: 90px; } }</style><script async src=\"//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></scri" + "pt>" + "<!-- Press List Ad 1 --><ins class=\"adsbygoogle press-list-ad-1\"     style=\"display:inline-block\"     data-ad-client=\"ca-pub-1801533XXXXXXXX06\"     data-ad-slot=\"68XXXXXXXXX105\"></ins><scri" + "pt>" + "(adsbygoogle = window.adsbygoogle || []).push({});</scri" + "pt>" + "" +  "Advert";

This is the code that is rendered each time a new article loads:

<style>.press-list-ad-1 { width: 320px; height: 50px; }@media(min-width: 500px) { .press-list-ad-1 { width: 468px; height: 60px; } }@media(min-width: 800px) { .press-list-ad-1 { width: 728px; height: 90px; } }</style>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Press List Ad 1 -->
<ins class="adsbygoogle press-list-ad-1" style="display:inline-block" data-ad-client="ca-pub-1801XXXXX58006" data-ad-slot="6898XXXXXXX05"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

The AdWords script, exploded, to break up the tags. You can see that it parses correctly by the output rendered. — Tomn8r, Mar 02 '14 at 23:58
@Daedalus, the last chunk of code is from the final rendered document, so it must have appended to the document correctly. articleAd is a div that is then appended to the end of each Article div. You can see it in action on the link... — Tomn8r, Mar 03 '14 at 00:12
I deleted my comment for a reason; it was a mistake, chrome dev tools didn't render the rest of the script. — Daedalus, Mar 03 '14 at 00:12
As far as I can tell though, the script simply isn't being loaded. It may have been added to the document, but it was not loaded by the browser. Looking into this. — Daedalus, Mar 03 '14 at 00:21
Thanks! I have a feeling that in needs to be 'called' or something. That is, it's printed, but because the page has already loaded it doesn't ever run/load. — Tomn8r, Mar 03 '14 at 00:28
In case my previous edited comment didn't alert you, it turns out there was a typo in my answer, and I apologize there, but the new code works. I just tested it. — Daedalus, Mar 05 '14 at 07:14

Daedalus · Accepted Answer · 2014-03-05T07:07:22.040

3

It would appear that browsers will ignore script tags created with innerHTML(just search for innerHTML here to find the reference).

The proper way to insert scripts into the page is with document.createElement. Here is an example for your above code:

var articleAd = document.createElement("script");
articleAd.async = true;
articleAd.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
var articleIns = document.createElement("ins");
articleIns.dataset.adClient = "stuff goes here";   
articleIns.dataset.adSlot= "stuff goes here";
articleIns.className = "adsbygoogle press-list-ad-1";
var googlestuff = document.createElement("script");
googlestuff.text = "(adsbygoogle = window.adsbygoogle || []).push({});";
document.getElementsByTagName("body")[0].appendChild(articleIns);
document.getElementsByTagName("body")[0].appendChild(articleAd);
document.getElementsByTagName("body")[0].appendChild(googlestuff);

Note that I removed your ad id information as I don't believe it right to include such in this answer.

edited Mar 05 '14 at 07:07

answered Mar 03 '14 at 00:56

Daedalus

7,518
3
29
56

@Tomn8r I recommend you check out [this answer](http://stackoverflow.com/questions/2342974/when-does-the-browser-execute-javascript-how-does-the-execution-cursor-move/2343051#2343051)(and upvote it) for more information. – Daedalus Mar 03 '14 at 01:01
unfortunately it didn't behave any differently using your code. I've now resorted to pre loading the ad into a hidden div then inserting it into the visible div upon each article load. I've not yet posted here because it's still not working flawlessly - requires a page refresh before the ads will load... – Tomn8r Mar 05 '14 at 06:53
@Tomn8r I take back what the previous comment that existed here said. There was a typo. Typo fixed. I just tested this (corrected code), and it does work. Please try it out. Just in case you're curious, though, the typo was here: `articleIns.dataset.adclient` should be `articleIns.dataset.adClient`. The capital C makes all the difference. – Daedalus Mar 05 '14 at 07:06
@Tomn8r This time, even more time has passed. I'm trying to help you; the least you could do is respond :/ – Daedalus Mar 09 '14 at 10:32
Sorry for the long response time. Your code didn't seem to work. When I included it alongside my current solution, it worked on occasion, but on its own kept returning an adspace that was 0px high. I think my current solution is close to working. I shall post it here once I've worked out the kinks so you can have a look. Thanks for your efforts. – Tomn8r Mar 14 '14 at 01:59
@Tomn8r I've updated it. It didn't work because there was a typo. I have tested my code and it does work. – Daedalus Mar 14 '14 at 06:47
I've managed to make it work. Sorry for the delay, I program as a hobby and sometimes work just means I can't sit down and focus on it. Your solution does work! Thank you. – Tomn8r Mar 31 '14 at 08:04

Adsense content just displaying blank square

1 Answers1