Bids are coming, Line Items are Delivering But Render Ad is not triggered and Ad Slot is blank

[jamesfebin]

We work with publishers, we have got a friendly iframe on their site for our adunits. We implemented prebid on their website. We are receiving bids ,the key values are getting set on dfp and the appropriate line item is also delivering. However the ad is not getting rendered. The prebid.renderAd() function is not getting called.

Here's our prebid code

var PREBID_TIMEOUT = 5000;

    var adUnits = [{
        code: 'div-gpt-ad-XXXXXXX-0',
        sizes: [
            [300, 250]
        ],
        bids: [{
            bidder: 'XXXXXXX',
            params: {
                id: 999999
            }
        }, {
            bidder: 'YYYYYYY',
            params: {
                placementId: '999999'
            }
        }]
    }];

    var pbjs = pbjs || {};
    pbjs.que = pbjs.que || [];

    var googletag = googletag || {};
    googletag.cmd = googletag.cmd || [];
    googletag.cmd.push(function() {
        googletag.pubads().disableInitialLoad();
    });

    pbjs.que.push(function() {
        pbjs.addAdUnits(adUnits);
        const customConfigObject = {
            "buckets": [{
                "precision": 2, //default is 2 if omitted - means 2.1234 rounded to 2 decimal places = 2.12
                "min": 0,
                "max": 7,
                "increment": 0.03
            }]
        };
        pbjs.setPriceGranularity(customConfigObject);
        pbjs.requestBids({ adUnits: adUnits, bidsBackHandler: sendAdserverRequest, timeout: 3000 });
    });

    function sendAdserverRequest() {
        if (pbjs.adserverRequestSent) return;
        pbjs.adserverRequestSent = true;
        googletag.cmd.push(function() {
            pbjs.que.push(function() {
                pbjs.setTargetingForGPTAsync();
            });
                  var ad_slot = googletag.display('/XXXXXX/YYYYY', [300, 250], 'div-gpt-ad-XXXX');
            googletag.pubads().refresh([ad_slot]); 

        });
    }

    setTimeout(function() {
        sendAdserverRequest();
    }, PREBID_TIMEOUT); 

(function() {
        var gads = document.createElement('script');
        gads.async = true;
        gads.type = 'text/javascript';
        var useSSL = 'https:' == document.location.protocol;
        gads.src = (useSSL ? 'https:' : 'http:') +
            '//www.googletagservices.com/tag/js/gpt.js';
        var node = document.getElementsByTagName('script')[0];
        node.parentNode.insertBefore(gads, node);
    })();

    googletag.cmd.push(function() {
        googletag.pubads().enableAsyncRendering();
        googletag.defineSlot('/XXXX/YYYYY', [300, 250], 'div-gpt-ad-XXXXX').addService(googletag.pubads());
        googletag.enableServices();
     });

Here's the creative code

<script>
var w = window;
for (i = 0; i < 10; i++) {
  w = w.parent;
  if (w.pbjs) {
    try {
      w.pbjs.renderAd(document, '%%PATTERN:hb_adid%%');
      break;
    } catch (e) {
      continue;
    }
  }
}
</script>

[matthewlane]

The prebid code and creative code looks correct. From what I can tell, renderAd isn't getting called due to these lines:

var ad_slot = googletag.display('/XXXXXX/YYYYY', [300, 250], 'div-gpt-ad-XXXX');
googletag.pubads().refresh([ad_slot]); 

googletag.display only takes one parameter, a div id or div element, and it doesn't return anything. So something like

googletag.display('div-gpt-ad-XXXX');
googletag.pubads().refresh(); 

would refresh all slots, but it should invoke renderAd. If you only want to refresh a specific slot, from the example here it looks like the slot parameter to googletag.pubads().refresh should be a return value from googletag.pubads().display

[jamesfebin]

Thank you for your response @matthewlane . We have modified the code

(function() {
        var gads = document.createElement('script');
        gads.async = true;
        gads.type = 'text/javascript';
        var useSSL = 'https:' == document.location.protocol;
        gads.src = (useSSL ? 'https:' : 'http:') +
            '//www.googletagservices.com/tag/js/gpt.js';
        var node = document.getElementsByTagName('script')[0];
        node.parentNode.insertBefore(gads, node);
    })();

    googletag.cmd.push(function() {
        googletag.pubads().enableAsyncRendering();
    var ad_slot =   googletag.defineSlot('/XXXX/YYYYY', [300, 250], 'div-gpt-ad-XXXXX').addService(googletag.pubads());
        googletag.enableServices();
     });

function sendAdserverRequest() {
        if (pbjs.adserverRequestSent) return;
        pbjs.adserverRequestSent = true;
        googletag.cmd.push(function() {
            pbjs.que.push(function() {
                pbjs.setTargetingForGPTAsync(['/XXXX/YYYY']);
            });
        googletag.pubads().refresh([ad_slot]); 

        });
    }

    setTimeout(function() {
        sendAdserverRequest();
    }, PREBID_TIMEOUT); 

Please let me know if this looks fine

[jamesfebin]

@matthewlane Please take a look at the below screenshots.

The pbjs.setTargetingForGPTAsync isn't working. But when I got to the console and invoke pbjs.setTargetingForGPTAsync() It gives me a log saying _Attempting to set key value for slot: div-gpt-ad-XXXXXXX-0 key: hbbidder value: sovrn

However when i see the delivery diagnostics the key values are not set.

You can check our installation here. http://www.bollywoodshaadis.com/articles/facial-exercises-to-get-your-nose-in-shape-3264?utm_source=website&utm_medium=trending&utm_campaign=tracke&pbjs_debug=true

Please make sure you select the device as mobile using the google developer console.

[jamesfebin]

Sorry for the trouble. The issue was i should have added the script inside the friendly iframe instead of the page header. It works fine now.