Adsense将样式标签注入我的页面（Chrome浏览器）

Question

我正在一个非常前端（vue）的网站上工作，因此我正在使用adsense的异步版本。

在各种浏览器中进行测试时，我注意到chrome中的显示问题，该问题是在广告加载后立即更改页面的高度。几个小时后，我发现在show_ads_impl.js中，它正在注入style =“ height：auto！important;” （或类似）放入我的源代码的各个位置。

我在任何地方都找不到解决方法，并且非常想找到解决方案-这确实对我项目中的用户体验产生了负面影响。

我在adsense支持网站上寻求帮助，但没有得到任何答复。

我成功地删除了JavaScript中带有延迟的回调例程的广告所添加的样式属性-但可以想象，这导致页面以某种令人不快的方式闪烁。

https://pagead2.googlesyndication.com/pagead/js/r20190408/r20190131/show_ads_impl.js

请注意，除非您从chrome下载，否则上面的链接将不包含“注入”代码。

上面文件中有问题的代码如下：

        a.o && !c && f && (e.setProperty("height", "auto", "important"),
        d && !$v(String(d.minHeight)) && e.setProperty("min-height", "0px", "important"),
        d && !aw(String(d.maxHeight)) && e.setProperty("max-height", "none", "important"))) : (Yv(a, 1, l, c, "height", h, a.B, a.l),

Answer 1

经过大量的反复试验，我发现了一种不需要JavaScript的快速变通方法。

<div style="position: relative; width: 100%; max-width: 100%;">
    <ins class="adsbygoogle"
         style="display:block; position: absolute; width: inherit; max-width: inherit;"
         data-ad-client="ca-pub-client-here"
         data-ad-slot="ad-slot-here"
         data-ad-format="auto"></ins>
    <script>
         document.addEventListener('DOMContentLoaded', (e) => {
             (adsbygoogle = window.adsbygoogle || []).push({});
         }, false)
    </script>
</div>

在div上的position: relative; width: 100%; max-width: 100%;内包装AdSense广告。

在AdSense广告中，添加position: absolute; width: inherit; max-width: inherit;。

它确实对我有用，但是Google可能迟早会打破这种“解决方法”，如果这不适用于您，请尝试使用@Sawces答案。

不用担心不在div上设置height标签，AdSense会在广告加载后自动更改height。

但是，这不是一个完美的选择，因为它是一个绝对的div，因此广告可能会溢出并引起问题，但至少Google不会无故更改整个布局。

您可能已经注意到，我将广告代码包装在DOMContentLoaded事件中，并添加了该代码以避免广告溢出。 （在更改之前，AdSense会尝试在较小的空间中放置大型广告，在更改之后，AdSense会正确计算div宽度并放置适合div的广告）

Answer 2

关于此，来自Google：https://support.google.com/adsense/answer/9467650。

这是有效的解决方案：https://support.google.com/adsense/thread/12533409?hl=en。

请确保您删除了data-ad-format =“ auto”和data-full-width-sensitive =“ true” 从您的代码。否则它将无法正常工作。

但是在这种情况下，它破坏了对方向改变的响应。什么时候 您将页面加载为横向，然后转向纵向-它保持不变 横向广告宽度过大，导致页面破裂。如果加载为纵向 然后转向横向广告，使其保持较小的广告尺寸。所以需要额外的 使用JavaScript或CSS媒体查询进行黑客攻击。

我从广告中删除了以下属性：data-ad-format="auto" 现在在这些页面上没有注入样式：style="height: auto !important;"

Answer 3

对于以后可能会迷失方向的任何人。以下是我以一种我认为足以继续前进的方式“解决”问题的方法。

就像我在上面说过的那样，google Adsense正在注入style =“ height：auto！important; min-height：0px！important;”进入我网站上的主页面包装器元素。

下面是我用来解决该问题的代码-本质上是撤消Adsense所做的事情。

// this code listens for a mutation on the main-wrapper element and resets
// the style attribute back to "null".
// This is necessary because Google Adsense injects style into this main-wrapper
// element changing its height properties. Note: This only occurs in Chrome.
let wrapper = document.getElementById('main-wrapper')
const observer = new MutationObserver(function (mutations, observer) {
  wrapper.style.height = ''
  wrapper.style.minHeight = ''
})
observer.observe(wrapper, {
  attributes: true,
  attributeFilter: ['style']
})

Answer 4

In-article ads不会发生此问题。这可能是此问题看起来孤立且很少报告的原因，因为大多数广告很可能是In-article ads。