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

对于将来可能会偶然发现此问题的任何人。以下是我如何能够以我认为足以继续前进的方式“解决”问题。

就像我上面所说的，谷歌 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 2

经过大量试验和错误，我找到了一个不需要 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>

将您的 AdSense 广告封装在带有 position: relative; width: 100%; max-width: 100%; 的 div 中。

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

它对我有用，但谷歌迟早会打破这个“解决方法”，如果这对你不起作用，请尝试使用@Sawces 答案。

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

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

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

Answer 3

来自 Google 的相关信息：https://support.google.com/adsense/answer/9467650。

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

确保删除 data-ad-format="auto" 和 data-full-width-responsive="true" 从你的代码。否则将无法正常工作。

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

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

Answer 4

这是我基于上述所有内容的 Angular 11 解决方案

import { AfterViewInit, Component, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-main',
  host: { id: "app-main" },
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss'],
})

export class MainComponent implements AfterViewInit, OnDestroy {
  constructor(
  ) { }

  adSenseResizeBlocker: MutationObserver;
  ngOnDestroy(): void {
    this.adSenseResizeBlocker.disconnect();
  }

  ngAfterViewInit(): void {
    const mainElement = document.getElementById('app-main') as HTMLElement;
    this.adSenseResizeBlocker = new MutationObserver(function (mutations, observer) {
      if (mainElement) {
        mainElement.style.height = "";
      }
    });

    this.adSenseResizeBlocker.observe(mainElement, {
      attributes: true,
      attributeFilter: ['style']
    });
  }
}

Answer 5

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