如果广告没有填满，如何隐藏广告容器？

Question

我有以下广告 html：

<div class="ad-container">
  <p>Ad slot #1</p>
  <div id="ad-slot-1" class="ad-slot"></div>
</div>

如果广告未填满，我将调用此函数来折叠广告：

googletag.pubads().collapseEmptyDivs();

问题是它只折叠广告 (ad-slot-1) 而不是父容器。我怎样才能让它也隐藏容器？

您可以在这里使用代码：https://jsbin.com/kefajicemu/edit?html,output

Answer 1

collapseEmptyDivs()

设置

display: none

内

div.ad-slot

上的

div.ad-container

样式。因此，您可以在 CSS 中添加一条规则，以在子

.ad-slot

元素被“清理”时隐藏容器：

div.ad-container:has(> div.ad-slot[style*='display: none']) {
  display: none;
}

/* Purely for visualization purposes */
div.ad-container {
  border: 1px black solid;
}

<div class="ad-container">
  <p>Ad slot #1 - should be displayed, because child element <code>div#ad-slot-1</code> doesn't have <code>display: none</code> applied to its styling.</p>
  <div id="ad-slot-1" class="ad-slot"></div>
</div>
<div class="ad-container">
  <p>Ad slot #2 - should not be displayed, since the child is already hidden using <code>display: none;</code></p>
  <div id="ad-slot-2" class="ad-slot" style="display: none;"></div>
</div>

虽然 CSS 是此处的“正确”（性能更高且更易于维护）答案，但您也可以在调用时使用 JavaScript 来应用此样式

googletag.pubads().collapseEmptyDivs();

:

// In practice, you'd call googletag.pubads().collapseEmptyDivs(); here, then:
document.querySelectorAll("div.ad-container:has(> div.ad-slot[style*='display: none'])").forEach(element => element.style.display = 'none');

/* Purely for visualization purposes */
div.ad-container {
  border: 1px black solid;
}

<div class="ad-container">
  <p>Ad slot #1 - should be displayed, because child element <code>div#ad-slot-1</code> doesn't have <code>display: none</code> applied to its styling.</p>
  <div id="ad-slot-1" class="ad-slot"></div>
</div>
<div class="ad-container">
  <p>Ad slot #2 - should not be displayed, since the child is already hidden using <code>display: none;</code></p>
  <div id="ad-slot-2" class="ad-slot" style="display: none;"></div>
</div>

Answer 2

您还可以监听

onSlotRenderEnded

事件：

window.googletag.pubads().addEventListener('slotRenderEnded', function (e) {
    if (e.isEmpty) {
       const elementId = e.getSlotElementId();
       // Use this ID to then select the HTML you would like to hide
    }
});