Google pubads appear and then disappear

Question

I'm using Google pubads on http://development-client-server.com/ds/ which is working great, until you get to the actual story page (see http://development-client-server.com/ds/speech-more-common-autism/), when the right top sidebar ad will load and then disappear quickly.

I've narrowed it down to the stickySidebars function I'm using to stick both the social media bar on the left and the jobs listing div on the right (beneath where the Google ad is). However, the sticky function shouldn't affect the Google ad at all?

Here's the JS function I'm using, which I've already rewritten several times (and have tried to talk the clients out of using already).

<script>

// Sticky Sidebars

function stickySidebars() {   

    var length = $('.post-content').height() - $('article .sharing-links').height() + $('.post-content').offset().top;
    var lengthSidebar = $('.sticky-container').height() - $('aside .job-listings').height() + $('.sticky-container').offset().top -30;

    $(window).scroll(function () {

        // Sharing Links

        var scroll = $(this).scrollTop() + 90;
        var height = $('article .sharing-links').height() + 'px';

        if (scroll < $('.post-content').offset().top) {

            $('article .sharing-links').css({
                'position': 'absolute',
                'top': 'auto',
                'bottom': 'auto'
            });

        } else if (scroll > length) {

            $('article .sharing-links').css({
                'position': 'absolute',
                'bottom': '0',
                'top': 'auto'
            });

        } else {

            $('article .sharing-links').css({
                'position': 'fixed',
                'top': '90px',
                'height': height
            });

        }

        // Sidebar

        var heightSidebar = $('aside .job-listings').height() + 'px';

        if (scroll < $('aside .job-listings').offset().top) {

            $('aside .job-listings').css({
                'position': 'absolute',
                'top': '300px',
                'bottom': 'auto'
            });

        } else if (scroll > lengthSidebar) {

            $('aside .job-listings').css({
                'position': 'absolute',
                'bottom': '30px',
                'top': 'auto'
            });

        } else {

            if (scroll < $('.sticky-container').offset().top + 300) {

                $('aside .job-listings').css({
                    'position': 'absolute',
                    'top': '300px',
                    'bottom': 'auto'
                });

            } else {

                $('aside .job-listings').css({
                    'position': 'fixed',
                    'top': '90px',
                    'height': heightSidebar
                });
            }

        }
    });
}

$(window).on('load',function(){
    if($(window).width() > 1100){
        stickySidebars();
    } 
});

$(window).resize(function() {
    if($(window).width() > 1100){
        stickySidebars();
    }
});
</script>

So just to confirm: When you comment out / remove `stickySidebars()` the advert shows up as expected? — tw16, Oct 31 '15 at 21:02
Oh effing hell - it did work when I removed the stickySidebars(). Now it doesn't. — Amber Weinberg, Nov 01 '15 at 22:33

score 8 · Accepted Answer · answered Nov 01 '15 at 00:30

The issue is not caused by the sticky sidebar. It is caused by this bit of code:

$(window).on('load',function(){
    // Other unrelated functions here...

    /*****************************/
    // Move Sidebar in Mobile
    /*****************************/

    if($(window).width() <= 980){
        $("aside").appendTo(".mobile-sidebar");
    } else {
        $("aside").insertAfter(".single-article article");
    }
});

Essentially the ad loads and then you move the container (the aside), which causes the ad to disappear.

There are a few different options, but essentially you either need the Google ad script to run after that piece of code or you need to refresh the ads. To refresh the ads you should be able to run this line of code straight after your if else statement:

googletag.pubads().refresh()

This refreshes all of the ads. Depending on how you have it setup you can pass in a variable to refresh() so that a specific ad is refreshed e.g.

var slot1 = googletag.pubads().display('/1234567/sports', [728, 90], 'div-1');

googletag.pubads().refresh([slot1]);

Google Reference Docs for refresh()

Weird, it was originally the stickySidebars code I removed and then it worked. Thanks for this!!! — Amber Weinberg, Nov 01 '15 at 22:34
`googletag.pubads().refresh()` still works like a charm in 2020. The last piece of code talking about the targeted refresh doesn't seem to work. Docs are not exactly helpful — Hewe, Jul 30 '20 at 14:11

Google pubads appear and then disappear

1 Answers1