React项目中Google Ads本地不显示问题及本地展示可行性咨询

我在React项目里用下面的代码嵌入Google Ads，代码执行无报错，但localhost环境下始终看不到广告。检查生成的HTML后发现data-ad-status为unfilled，不清楚原因。另外想确认：本地环境能不能展示Google Ads？我没装广告拦截器，是按照指定教程操作的。

我的实现代码 #

import React from 'react'
import { useEffect } from 'react';
import {Bling as GPT} from "react-gpt";

function Ads() {
  useEffect(() => {
    window.adsbygoogle = window.adsbygoogle || [];
    window.adsbygoogle.push({});
  }, [])
  return (
    <>
      <ins className="adsbygoogle"
        style={{display:"block", width:"250px"}}
        data-ad-format="fluid"
        data-ad-layout-key="-fb+5w+4e-db+86"
        data-ad-client="ca-pub-1716395586958019"
        data-ad-slot="9360082050"
        data-adtest="on">
      </ins>
    </>
  )
}

生成的HTML结果 #

<ins class="adsbygoogle" data-ad-format="fluid" data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-1716395586958019" data-ad-slot="9360082050" data-adtest="on" style="display: block; width: 250px; height: 315px;" data-adsbygoogle-status="done" data-ad-status="unfilled">
        <div id="aswift_1_host" tabindex="0" title="Advertisement" aria-label="Advertisement" style="border: none; height: 315px; width: 250px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block;">
          <iframe id="aswift_1" name="aswift_1" style="left:0;position:absolute;top:0;border:0;width:250px;height:315px;" sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation" width="250" height="315" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" src="https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-1716395586958019&amp;output=html&amp;h=315&amp;slotname=9360082050&amp;adk=179383159&amp;adf=4280140434&amp;pi=t.ma~as.9360082050&amp;w=250&amp;lmt=1686243940&amp;rafmt=11&amp;format=250x315&amp;url=http%3A%2F%2Flocalhost%3A3000%2F&amp;adtest=on&amp;wgl=1&amp;uach=WyJXaW5kb3dzIiwiMTUuMC4wIiwieDg2IiwiIiwiMTE0LjAuNTczNS45MCIsW10sMCxudWxsLCI2NCIsW1siTm90LkEvQnJhbmQiLCI4LjAuMC4wIl0sWyJDaHJvbWl1bSIsIjExNC4wLjU3MzUuOTAiXSxbIkdvb2dsZSBDaHJvbWUiLCIxMTQuMC41NzM1LjkwIl1dLDBd&amp;dt=1686243940235&amp;bpp=18&amp;bdt=833&amp;idt=119&amp;shv=r20230606&amp;mjsv=m202306050101&amp;ptt=9&amp;saldr=aa&amp;abxe=1&amp;cookie=ID%3D0131efc224260eb6-22fb51662ce000b1%3AT%3D1686054747%3ART%3D1686243870%3AS%3DALNI_Mau56qS_H-iE3bKsxmOr1TCP2_z-A&amp;gpic=UID%3D00000c4416918412%3AT%3D1686054747%3ART%3D1686243870%3AS%3DALNI_MY2nh_dm0Uime-_txjeT8hChnoM8w&amp;prev_fmts=0x0&amp;nras=1&amp;correlator=1903045135563&amp;frm=20&amp;pv=1&amp;ga_vid=725767110.1686051615&amp;ga_sid=1686243940&amp;ga_hid=1689683430&amp;ga_fc=1&amp;u_tz=60&amp;u_his=1&amp;u_h=900&amp;u_w=1440&amp;u_ah=852&amp;u_aw=1440&amp;u_cd=24&amp;u_sd=2&amp;dmc=8&amp;adx=53&amp;ady=1021&amp;biw=1423&amp;bih=781&amp;scr_x=0&amp;scr_y=527&amp;eid=44759837%2C44759875%2C44759926%2C31075127%2C44788441%2C31067147&amp;oid=2&amp;pvsid=4370208828608287&amp;tmod=82592742&amp;uas=0&amp;nvt=2&amp;fc=1920&amp;brdim=0%2C0%2C0%2C0%2C1440%2C0%2C1440%2C852%2C1440%2C781&amp;vis=1&amp;rsz=%7C%7CeE%7C&amp;abl=CS&amp;pfx=0&amp;fu=128&amp;bc=31&amp;td=1&amp;ifi=2&amp;uci=a!2&amp;fsb=1&amp;xpc=2FhlrG9d3m&amp;p=http%3A//localhost%3A3000&amp;dtd=137" data-google-container-id="a!2" data-load-complete="true">
          </iframe>
        </div>
      </ins>

问题解答 #

1. 本地环境能不能展示Google Ads？ #

可以展示测试广告，但无法展示真实广告。Google Ads官方不支持localhost这类未验证的本地域名投放真实广告，即使开启data-adtest="on"也无法获取真实广告库存。但你可以使用Google提供的官方测试广告单元，在本地环境模拟广告显示效果。

2. data-ad-status: unfilled的原因 #

• 域名未验证：你的AdSense账号没有验证localhost域名，Google不会为未验证的域名分配广告。
• 广告库存不匹配：即使开启测试模式，你的广告尺寸、布局参数（比如data-ad-layout-key）可能没有对应的测试广告库存，导致填充失败。
• 代码加载问题：你引入了react-gpt但未实际使用，当前依赖useEffect初始化adsbygoogle的方式可能存在加载时机问题，建议直接在HTML中引入官方脚本。

3. 修正方案 #

步骤1：在public/index.html中添加官方脚本

在<head>标签内添加：

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1716395586958019" crossorigin="anonymous"></script>

步骤2：修改React组件，使用测试广告单元

替换成Google官方的测试data-ad-client和data-ad-slot：

import React, { useEffect } from 'react';

function Ads() {
  useEffect(() => {
    (window.adsbygoogle = window.adsbygoogle || []).push({});
  }, []);

  return (
    <ins className="adsbygoogle"
      style={{ display: "block", width: "250px" }}
      data-ad-format="fluid"
      data-ad-layout-key="-fb+5w+4e-db+86"
      data-ad-client="ca-pub-3940256099942544" // 官方测试client
      data-ad-slot="2198419638" // 官方测试slot
      data-adtest="on">
    </ins>
  );
}

export default Ads;

这样修改后，localhost环境下应该能看到Google的测试广告，验证代码逻辑是否正确。等部署到已验证的正式域名后，再替换回你自己的data-ad-client和data-ad-slot即可。

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