Skip to main content

Google AdSense 表示 (全ページ共通)

Google AdSense 管理画面​

  1. AdSense 管理画面で広告ユニットを作成
  2. 「広告」→「広告ユニットごと」→「ディスプレイ広告」などを選択
  3. 「レスポンシブ」に設定（これで画面幅に自動で調整されます）

Docusaurus での実装​

概要​

  1. docusaurus.config.ts に scripts で AdSense の JS を追加
    • 全てのページの head で呼ばれる
  2. <ins class="adsbygoogle">...</ins> を挿入 (Google 提供の embed HTML のこと)
    • ここで表示方法を明示。いまのところ 例1, 例2 のように運用してみることにしている
      • 例1: スマホ版は各ページの Footer で auto 設定 ( 記事の下に正方形で出る )
      • 例2: PC版 はサイト全体の Layout で horizontal 設定 ( ページ全体の下に横長で出る )
  3. adsbygoogle.push({}) を呼び出す
    • ページごとに必要、useEffect の中

docusaurus.config.ts の記載箇所 (上記の 1)​

docusaurus.config.ts
const config: Config = {
  ...
  scripts: [
    {
      src: "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",
      async: true,
      crossorigin: "anonymous",
    },
  ]

フッタの実装 (上記の 2, 3)​

補足​

VSCode で adsbygoogle の辺りに警告が出る。 linter の警告を回避したい​

src/types/global.d.ts
export {}; 

declare global {
  interface Window {
    adsbygoogle: any[];
  }
}
Last updated on