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

🛠工具与编程
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都很重要，一定都要看啊！