Prerequisites
Your website must be approved, as shown in the image. The domain beginner.center has been approved and can be used to display ads.
The Struggle
At first, I thought I could just insert the ad code directly into the webpage body. In fact, I have done this before with other open-source products (like WordPress), and it never caused an issue.
This time, after insertion, the ads did not show.
ads.txt?
I asked AI, and it said there must be an ads.txt file in the root directory; otherwise, it can’t prove that this website belongs to you.
Fine, so I wrote it, and started Django. First, I reserved the place in the configuration file gui_config.py:
ADS_TXT_LINES = "google.com, pub-5988994930330758, DIRECT, f08c47fec0942fa0"
Then, I created a new route in 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')
Then I found that ads.txt can be accessed, but the ads still didn’t display.
Later, I checked again with Developer Tools’ network tab and confirmed it was definitely connected to Google Ad.
Continuing the struggle
I followed AI to troubleshoot. After eliminating many issues, I suddenly found this line in the 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…988994930758: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
I asked AI to explain, and it turned out: Google AdSense’s ad script tries to render ads but cannot get the container width (availableWidth is 0), causing ads to fail to load.
Configure the width of the ad container
<body class="bg-background text-foreground flex flex-col items-center justify-center p-4">
# omitted above
<div id="google-ad-container" class="w-full max-w-4xl mx-auto mb-6 flex justify-center"></div>
# The class here sets the width; the ad code from Google is injected by other scripts (not detailed here)
# w-full: width occupies 100% of the parent container.
# max-w-4xl: maximum width limited to Tailwind’s preset 4xl (approx. 56rem), preventing the ad from being too wide.
# mx-auto: horizontal margins auto, so the container is horizontally centered.
# mb-6: bottom margin 1.5rem, keeps distance from content below.
# flex: makes the container a flex layout.
# justify-center: horizontally centers child elements within the flex layout.
# omitted below
</body>
Then it worked.
Postscript
Both console and network tabs are very important. You must look at both!