如何给自己手搓的网站配置google ad

🛠工具与编程

AI-generated summary

用户讨论了如何在自己搭建的网站上配置Google Ad广告。首先，用户提到网站必须通过审核才能显示广告，并展示了审核通过的界面。他们尝试直接在网页body中插入广告代码，但未能成功。随后，用户根据AI建议创建了ads.txt文件，配置了Google广告的发布商信息，并在Django项目中设置了一个路由来提供该文件。尽管ads.txt能被访问到，广告仍不展示。用户检查开发者工具的Network面板，确认与Google Ad建立了连接，但在Console中发现了错误：‘No slot size for availableWidth=0’。用户分析此错误可能是因为广告槽的宽度未正确设置或广告未能加载，导致Google无法确定广告尺寸。他们进一步指出广告代码中可能存在问题，例如没有正确指定广告位的大小参数，或者页面布局导致广告容器宽度为零。最后，用户尝试通过调整广告槽的大小参数来解决此问题，并在多个时间点尝试了不同的配置，但尚未找到解决方案。

1

前提条件

你的网站得过审，图中所示，这个beginner.center的域名过审了，才能用来放广告

image
image1692×1162 62.2 KB

折腾之旅

最开始我以为直接在网页的body里插入广告代码即可，事实上我以前用其他开源产品（比如wordpress）都是这么做的，从来没出错

image
image2434×1240 268 KB

这次插入以后却不展示

ads.txt?

我问了ai，说要在根目录有ads.txt才行，不然不能证明这个网站是你的网站

行，那我写，django启动。先是在配置文件gui_config.py里预留好位置

ADS_TXT_LINES = "google.com, pub-5988994930330758, DIRECT, f08c47fec0942fa0"

然后在app.py里创建一个新路由

@app.route('/ads.txt', methods=['GET'])
def serve_ads_txt():
    """Serve ads.txt content configured in GUIConfig."""
    content = str(getattr(GUIConfig, "ADS_TXT_LINES", ""))

    if not content:
        return Response("", mimetype='text/plain; charset=utf-8')

    if not content.endswith("\n"):
        content += "\n"

    return Response(content, mimetype='text/plain; charset=utf-8')

然后我发现能访问ads.txt还是没有广告展示

后来又在Developer Tools的network确认了一下，和google ad肯定是联系上了

image
image3838×1952 767 KB

继续折腾

我又跟着ai排除，排除了一大堆问题以后，我突然发现，Developer Tools的console里写了这么一段

adsbygoogle.js?clien…988994930330758:164 
 Uncaught TagError: adsbygoogle.push() error: No slot size for availableWidth=0
    at Mo (adsbygoogle.js?clien…94930330758:164:326)
    at Lo (adsbygoogle.js?clien…94930330758:163:146)
    at To (adsbygoogle.js?clien…94930330758:167:172)
    at ap (adsbygoogle.js?clien…994930330758:181:15)
    at cp (adsbygoogle.js?clien…94930330758:182:342)
    at kr (adsbygoogle.js?clien…994930330758:233:56)
    at e.client (adsbygoogle.js?clien…994930330758:220:43)
    at tk.g (adsbygoogle.js?clien…994930330758:88:560)
    at Ak (adsbygoogle.js?clien…994930330758:89:682)
    at fr (adsbygoogle.js?clien…994930330758:220:31)
Mo	@	adsbygoogle.js?clien…988994930330758:164
Lo	@	adsbygoogle.js?clien…988994930330758:163
To	@	adsbygoogle.js?clien…988994930330758:167
ap	@	adsbygoogle.js?clien…988994930330758:181
cp	@	adsbygoogle.js?clien…988994930330758:182
kr	@	adsbygoogle.js?clien…988994930330758:233
e.client	@	adsbygoogle.js?clien…988994930330758:220
g	@	adsbygoogle.js?clien…5988994930330758:88
Ak	@	adsbygoogle.js?clien…5988994930330758:89
fr	@	adsbygoogle.js?clien…988994930330758:220
er	@	adsbygoogle.js?clien…988994930330758:217
(anonymous)	@	adsbygoogle.js?clien…988994930330758:243
g	@	adsbygoogle.js?clien…5988994930330758:88
Ak	@	adsbygoogle.js?clien…5988994930330758:89
(anonymous)	@	adsbygoogle.js?clien…988994930330758:242
(anonymous)	@	adsbygoogle.js?clien…988994930330758:243
(anonymous)	@	adsbygoogle.js?clien…988994930330758:245

找ai解释一下，原来是因为： Google AdSense 的广告脚本尝试渲染广告时，无法获取广告容器的宽度（availableWidth 为 0），导致广告无法正常加载。

配置广告所在容器宽度

<body class="bg-background text-foreground flex flex-col items-center justify-center p-4">
# 前面省略
    <div id="google-ad-container" class="w-full max-w-4xl mx-auto mb-6 flex justify-center"></div>
# 这里的class指定了宽度，通过其他代码注入google ad给出的代码（就不展开了）
# w-full：宽度占据父容器的 100%。
#max-w-4xl：最大宽度限制在 Tailwind 预设的 4xl（约 56rem），避免广告太宽。
# mx-auto：左右外边距自动，从而让容器水平居中。
# mb-6：底部外边距 1.5rem，和下面的内容保持距离。
# flex：把容器变成 flex 布局。
# justify-center：在 flex 布局中水平居中子元素。
# 后面省略
</body>

然后就好了

后记

console和network都很重要，一定都要看啊！