この記事はCodex製です。
##依頼内容と課題
ro1.dev の一部ページで、AdSense の実装がページ内で重複・分散しており、
- ページ内で AdSense スクリプトを重複ロードしている
<script>(adsbygoogle...).push({})</script>の inline 実行が混在している- 複数の
<ins class="adsbygoogle">に対して push が 1 回しか走らず、枠が埋まらない可能性がある
といった「広告枠が出ない/不安定になる」リスクがありました。
##アプローチ
AdsenseUnitコンポーネントを新設し、広告枠(<ins class="adsbygoogle">)の生成とadsbygoogle.push({})を集約IntersectionObserverで「可視域に入ったタイミング」で 1 回だけ push する(viewability とエラー抑制の両狙い)- ページ内の inline script とスクリプト重複ロードを削除し、
_document.tsx側の 1 回ロードに寄せる
##アウトプット
/app/mosaicの AdSense 実装をAdsenseUnitに置き換え、重複 script と reflow 用 inline script を削除/app/three-musketeersの inline script を削除し、AdsenseUnitに統一- 変更による副作用を抑えるため、AdSense の client id 取得は既存の
GA_CLIENT_IDをそのまま利用(名称は既存踏襲) - 追記: codex:finish の検証を通すため、この記事は最終段で微修正しています
##参照した一次情報
https://support.google.com/adsense/answer/9274634
https://support.google.com/adsense/answer/9183363
https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
https://nextjs.org/docs/pages/building-your-application/routing/custom-document