ro1.dev AdSenseのpush安定化(inline排除 + 可視域push)

この記事は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 の検証を通すため、この記事は最終段で微修正しています

##参照した一次情報

##一次情報・一次ソース