Forum Moderators: martinibuster

Message Too Old, No Replies

Showing Adsense on Infinite Scroll

         

csdude55

8:17 am on May 22, 2017 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Have any of you guys successfully gotten this to work? I've seriously been working on it for a month now, and I have very little hair left! But I honestly can't even tell if it's working.

The best I can tell, the only way to do it is by using DFP:

[support.google.com...]

I'm also using this is a separate guide:

[igorkromin.net...]

I have the Infinite Scroll working (I have other threads on that, if you care to figure out how I managed it), but the ads still give me a hard time. I'm not getting any errors or anything, just blank spaces.

But here's the kicker. After several hours of coding. I had ONE ad to show up, but no more throughout the scroll. But the top ad is slightly different from the rest, so I'm not even sure if I could just copy that code throughout. And after I refreshed I didn't see any more ads, anyway, so for all I know it could be that Adsense isn't showing me any ads because I'm working in a sandbox (a subdomain of a live site).

So I really need some advice from somebody that's been there.

Here's the code I've finally settled on:

<script async="async" src="https://www.googletagservices.com/tag/js/gpt.js"></script>

<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];

var slot = new Array();
var horizontal_ad;

googletag.cmd.push(function() {

// Mimic a responsive banner
horizontal_ad = googletag.sizeMapping().
addSize([800, 0], [1, 1]). // desktop, > 800x0 don't show anything
addSize([728, 0], [728, 90]). // tablet, > 728x0 show 728x90
addSize([320, 0], [320, 50]). // mobile, > 320x0 show 320x50
build();

// This one shows by default, outside of Infinite Scroll, and works... sometimes.
// In the real code I also have a slot[1] defined for a footer, but it's not relevant
// to this problem so I left it out
slot[0] = googletag.defineSlot('/xxxx/Mobile_Tablet',
[[728, 90], [320, 50]], 'data_b_0').
defineSizeMapping(horizontal_ad).
addService(googletag.pubads());

googletag.pubads().enableSingleRequest();
googletag.pubads().disableInitialLoad();
googletag.enableServices();
});
</script>

// Set somewhere in the header; $data_b is in PHP
$data_b = 1;

// Later, inside of the Infinite Scroll, using PHP
for ($i = 0; $i < 10; $i++) {
// Show a banner every 5th loop
if ($i > 0 && ($i / 5 == intval($i / 5))) {
$data_b++;

// This code seemed to work, but just the one time. I tried using it on every
// iteration instead of just the first one, but I just had blank ads after that
if ($data_b == 2)
echo <<<EOF
<div id="data_b_$data_b" class="h_banner">
<script>
googletag.cmd.push(function() {

// Identical to slot[0] except for the 'data_b_$data_b'
slot[$data_b] = googletag.defineSlot('/xxxx/Mobile_Tablet',
[[728, 90], [320, 50]], 'data_b_$data_b').
defineSizeMapping(horizontal_ad).
addService(googletag.pubads());

googletag.display('data_b_$data_b');
googletag.pubads().refresh([slot[$data_b]]);
});
</script>
</div>

EOF;

else
// This is based on the information from the second guide, not the Adsense
// support page. It's basically identical, but includes a "newAd" section that I
// don't understand
echo <<<EOF
<div id="data_b_$data_b" class="h_banner">
<script>

// I have no idea what's going on with newAd. This is almost verbatim from the
// sample, but the sample never used the newAd variable after newAd.find(), so
// I don't understand it at all. <div id='data_b_0'> uses slot[0], though, so that's
// what (I think) I'm trying to clone
var newAd = $('#data_b_0').clone().appendTo('#data_b_$data_b').show();
newAd.find('.h_banner').attr('id', 'data_b_$data_b');

// This is identical to the one above
googletag.cmd.push(function() {
slot[$data_b] = googletag.defineSlot('/xxxx/Mobile_Tablet',
[[728, 90], [320, 50]], 'data_b_$data_b').
defineSizeMapping(horizontal_ad).
addService(googletag.pubads());

googletag.display('data_b_$data_b');
googletag.pubads().refresh([slot[$data_b]]);
});
</script>
</div>

EOF;
}
}

I'm half convinced that it would work just fine if I went live with it (minus the "else" section entirely) and gave it legit traffic, but I just don't know. And AFAIK there's not a way to list a backup ad with DFP, so I can't even see if that's loading for testing >:-(

ANY suggestions would be greatly appreciated! While I still have a little hair that I haven't pulled out yet, anyway :-P

IanCP

11:11 pm on May 22, 2017 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I'm half convinced that it would work just fine if I went live with it

In the past when I wanted to test something live with AdSense I usually used a little known, rarely trafficked page. As opposed, in my case, to putting it inside a site wide SSI file.

May or may not be a realistic/practical in your situation.

csdude55

12:52 am on May 23, 2017 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Well, in this case I've figured out one problem... it may not be the only problem, but it's a biggie. And I don't know how to get past it.

After the infinite scroll loads an Ajax fragment, it looks like Javascript doesn't work within the fragment anymore. Eliminating DFP and Adsense, I just went back to basics:

for ($i = 0; $i < 10; $i++) {
// Show a banner every 5th loop
if ($i > 0 && ($i / 5 == intval($i / 5))) {
$data_b++;

echo <<<EOF
<div id="data_b_$data_b" class="h_banner"></div>
<script>
$('#data_b_$data_b').append('$data_b');
</script>

EOF;
}
}


This works on the first iteration (outside of infinite scroll), but after that I get nothing. I also tried simple alert() and document.write(), but still the same thing.

After some digging, I found this:

When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.

[api.jquery.com...]


So I guess the question now is, how do I trick Ajax fragments into running inline Javascript?

csdude55

1:30 am on May 23, 2017 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Well, I discovered that I can do a callback function, like so:

var data_b = $data_b;

$(listID).append($('<div></div>')
.load($('blah blah blah', function() {
data_b++;
$('#data_b_' + data_b).append(data_b);
})
);


So this gets me a step closer to where I need to be...

I'll post back if I get it working, but if you guys have any suggestions along the way, I'm all ears! Or, eyes? Whatever...