Detect when Google Ads API is loaded and when ads are ready and loaded in the DOM

detectAdsLoaded.js

window.googletag = window.googletag || {};
googletag.cmd = googletag.cmd || [];

googletag.cmd.push(detectAdLoad);

function detectAdLoad() {
    /**
     * NOTE: This function depends on the ad slot ID (var targetSlot). If this changes, this function will break
     *
     * Patched together using documentation at https://developers.google.com/doubleclick-gpt/reference
     * and https://developers.google.com/doubleclick-gpt/common_implementation_mistakes
     *
     * Google ads are loaded into the DOM after masonry has done the maths to layout the page so we need to detect
     * when the ads are fully loaded and then force masonry to reload. Due to varying connection speeds setting a simple
     * setTimeout() was not feasible and setInterval() causes weird layout bugs in mobile views (single column).
     *
     * This function attempts to detect if
     * 1) googletag functions are available
     * 2) if/when ads are fully loaded into the DOM
     * and then forces masonry to relayout the page. 
     *
     * For some reason on really high speed connections this script runs before any googletag functions
     * are available, even though our first if() test below is supposed to detect that. As a "fix" for that situation,
     * we fall into our else(), which just forces masonry to relayout the page after 2 seconds. Since we know that
     * this will only happen on high speed connections we can safely use setTimeout().
     *
     */
    if(window.googletag && googletag.pubadsReady) {
        console.log("pubadsReady");
        var targetSlot = '/17771119/MagiQuiz_Home1';
        googletag.pubads().addEventListener('slotRenderEnded', function(event) {

            // console.log("event slot i: " + event.slot.i);
            // console.log("event slot w: " + event.slot.w);
            // console.log("The event: " + event); // the full event object for debugging

            /* Listeners operate at service level, which means we cannot add a
             * listener for a slotRenderEnded event for a specific slot only. You can,
             * however, programmatically Filter the listener to respond only to a certain 
             * ad slot, using the ad ID (targetslot). Depending on the ad (or something - not
             * really sure why this changes), our targetSlot ID is stored in either 
             * event.slot.i or sometimes event.slot.w so check both locations */
            if(event.slot.i === targetSlot || event.slot.w === targetSlot) {
                console.log("Slot has been rendered");
                setTimeout(function() {
                    var $grid = $('.grid').masonry({});
                    $grid.masonry('layout');
                    console.log("Relayouting");
                }, 2000);
            }   
        });
    } else {
        // console.log("googletag not detected, defaulting");
        setTimeout(function() {
            var $grid = $('.grid').masonry({});
            $grid.masonry('layout');
            console.log("pubads not detected");
        }, 2000);
    }
}

Thanks for the gist! I know this is old, but just in case anyone is wondering, to get targetSlot ID, we can use slot.getAdUnitPath(). The actual key names in the event object are obfuscated and minified.