如何在不刷新网站的情况下使用 React 更新自适应 AdSense 广告答案

【问题标题】：How to update responsive AdSense ad using React without refreshing site如何在不刷新网站的情况下使用 React 更新自适应 AdSense 广告
【发布时间】：2020-09-23 04:40:04
【问题描述】：

我正在尝试将 AdSense 自适应广告添加到我的 React 网络应用中。我按照 AdSense 帮助的Exact ad unit size per screen width example 创建了一个 AdComponent：

import React from 'react';
import styled from 'styled-components';

class AdComponent extends React.Component {
  componentDidMount() {
    (window.adsbygoogle = window.adsbygoogle || []).push({});
  }

  render() {
    return (
      <CustomIns
        className="adsbygoogle"
        style={{ display: 'inline-block' }}
        data-ad-client="ca-pub-5555444121816745"
        data-ad-slot="2476129802"
      />
    );
  }
}

export default AdComponent;

const CustomIns = styled.ins`
  width: 320px;
  height: 100px;

  @media (min-width: 500px) {
    width: 468px;
    height: 60px;
  }

  @media (min-width: 800px) {
    width: 728px;
    height: 90px;
  }
`;

每当网站加载时，都会显示完美尺寸的广告，但当我调整（或旋转）屏幕大小时，广告会保持相同的初始尺寸。预期的行为是，每当我遇到断点时，广告就会被替换为适合新尺寸的调整大小的广告。

【问题讨论】：

AdSense 应在请求新广告时检测屏幕旋转并相应调整广告位大小。例如，尝试使用移动仿真 nbeloglazov.com/adsense.html 并旋转它 - 您会看到广告刷新和调整大小。你是说当你旋转屏幕时广告不会改变？

标签： css reactjs responsive-design responsive adsense

【解决方案1】：

这不能像您使用的那样使用特定的宽度和高度来完成。加载屏幕时，会加载该屏幕宽度的广告单元。如果您随后旋转屏幕，相同的广告将继续展示。

您想要的是“自适应广告”。使用下面的代码，你会发现它很适合你。

  style="display:block"
  data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
  data-ad-slot="xxxxxxxxxx"
  data-ad-format="auto">

我在您的代码中看到您只使用水平横幅。如果你只能使用水平。您可以使用以下内容：

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="horizontal"
data-full-width-responsive="false"></ins>

这只会为您提供适合屏幕尺寸的水平广告单元。更多选项和广告尺寸link here

【讨论】：