Prebid.js无有效竞价时隐藏House Ad横幅配置方法

你看到的「House Ad」横幅是Prebid官方示例内置的调试用兜底内容，生产环境可以通过「Prebid竞价结果校验+GPT空广告回调」双层判断逻辑，实现无填充时自动隐藏广告位，不对普通用户展示无效内容。

核心实现逻辑 #

• 竞价请求结束后，先遍历所有配置的广告单元，判断是否存在有效胜出出价，标记无有效出价的广告位
• 给Google Publisher Tag（GPT）绑定slotRenderEnded事件监听，当广告服务器确认无填充素材时，直接将对应广告容器设置为display: none
• 生产环境使用自行构建的Prebid.js正式包，从根源上移除调试用House Ad相关代码

修改后的完整JS代码 #

替换原有SCRIPT板块的代码即可，HTML结构无需调整：

var div_1_sizes = [
    [300, 250],
    [300, 600]
];
var div_2_sizes = [
    [728, 90],
    [970, 250]
];
var PREBID_TIMEOUT = 1000;
var FAILSAFE_TIMEOUT = 3000;
// 存储无有效填充的广告位容器ID
var noFillAdSlots = new Set();

var adUnits = [
    {
        code: '/19968336/header-bid-tag-0',
        mediaTypes: {
            banner: {
                sizes: div_1_sizes
            }
        },
        bids: [{
            bidder: 'appnexus',
            params: {
                placementId: 13144370
            }
        }]
    },
    {
        code: '/19968336/header-bid-tag-1',
        mediaTypes: {
            banner: {
                sizes: div_2_sizes
            }
        },
        bids: [{
            bidder: 'appnexus',
            params: {
                placementId: 13144370
            }
        }]
    }
];

var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
googletag.cmd.push(function() {
    googletag.pubads().disableInitialLoad();
    // 监听广告渲染结果，空填充时直接隐藏容器
    googletag.pubads().addEventListener('slotRenderEnded', function(event) {
        if (event.isEmpty) {
            var slotEl = document.getElementById(event.slot.getSlotElementId());
            if (slotEl) {
                slotEl.style.display = 'none';
                // 按需开启：如果要隐藏广告位前的标题、分割线等关联元素，在这里加对应逻辑即可
                // 示例：隐藏广告位前的h5标题
                // var adTitle = slotEl.previousElementSibling;
                // if (adTitle && adTitle.tagName === 'H5') adTitle.style.display = 'none';
            }
        }
    });
});

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

pbjs.que.push(function() {
    pbjs.addAdUnits(adUnits);
    pbjs.requestBids({
        bidsBackHandler: function() {
            // 校验每个广告单元的有效出价
            adUnits.forEach(function(adUnit) {
                var validBids = pbjs.getHighestCpmBids(adUnit.code);
                if (!validBids || validBids.length === 0) {
                    // 这里替换成你自己的广告单元和容器ID的映射关系
                    // 如果你的adUnit.code直接填的是容器ID，可直接noFillAdSlots.add(adUnit.code)
                    var slotDivId = adUnit.code === '/19968336/header-bid-tag-0' ? 'div-1' : 'div-2';
                    noFillAdSlots.add(slotDivId);
                }
            });
            initAdserver();
        },
        timeout: PREBID_TIMEOUT
    });
});

function initAdserver() {
    if (pbjs.initAdserverSet) return;
    pbjs.initAdserverSet = true;
    googletag.cmd.push(function() {
        pbjs.que.push(function() {
            pbjs.setTargetingForGPTAsync();
            googletag.pubads().refresh();
        });
    });
}
// PBJS加载失败的兜底逻辑
setTimeout(function() {
    initAdserver();
}, FAILSAFE_TIMEOUT);

googletag.cmd.push(function() {
    googletag.defineSlot('/19968336/header-bid-tag-0', div_1_sizes, 'div-1').addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
});
googletag.cmd.push(function() {
    googletag.defineSlot('/19968336/header-bid-tag-1', div_2_sizes, 'div-2').addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
});

配置注意事项 #

• 代码中广告单元code和页面div ID的映射逻辑要替换成你自己的业务配置，不要硬抄示例判断规则：如果adUnit配置的code字段直接填写页面广告容器的ID，可直接将无有效出价的adUnit.code加入待隐藏列表，不需要额外映射。
• 如果广告位外层有自定义包裹容器、或者前后配置了“广告”标识、分割间距这类元素，可以在slotRenderEnded的空判断分支里一并设置隐藏，避免页面残留空白块。
• 生产环境不要直接引用官方示例的调试版Prebid.js包，自行构建只包含你所用Bid适配器的生产版本，从根源上避免调试用House Ad代码被引入。
• 生产环境不要开启Prebid调试模式，调试模式会强制注入测试兜底广告，影响正常用户访问。
• 如果需要兼容IE等老旧浏览器，把代码里的ES6语法替换成ES5写法即可，核心逻辑不需要调整。

内容的提问来源于stack exchange，提问作者Mohit Patil