当サイトは、アフィリエイト広告を利用しています

Gatsby製ブログにAdSense広告をつける

作成日：2022月06月29日
更新日：2022年06月29日

Gatsby製ブログにgoogleのAdSense広告を付けてみたので
その手順をメモとして残しておく。
AdSenseの広告を付けるにはgoogleの審査に合格する必要があるので
審査には合格していることを前提とする。 またGatsbyにはAdSense広告用のプラグインがあり、簡単にできるらしいが
今回は独自で実装してみる。
※というかAdSense広告用のプラグインではなぜかうまくできなかったので...

AdSence広告乗せる仕組み

ざっくりGatsbyでAdSense広告をつける仕組みを解説する。

広告を表示させるための準備

AdSenseの広告を表示させるためには、AdSenseで発行されるスクリプトタグ（下記参照）を
広告を表示したいページのheaderに埋め込む必要がある。

AdSenseで発行されるスクリプトタグ
<script
    async
    src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"
    crossorigin="anonymous"
/>

XXXXXXXXXXXXXXXXにはidが入っている。

html.jsとは？

html.jsは全てのページのテンプレートとして使われるため、編集することで
全ページのHEADタグやFOOTERタグの内部をカスタマイズすることができる。 今回はここにAdSenseで発行されるスクリプトタグを追記して、全ページのheaderに
スクリプトタグが設定されるようにする。

html.jsの作成

プロジェクトの直下の「.cache/default-html.js」をコピーして「src/html.js」を作成する

html.jsの編集

AdSenseで発行されるスクリプトタグをheadに追加する

html.js
import React from 'react';


export default function HTML(props) {
  return (
    <html {...props.htmlAttributes}>
      <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        {props.headComponents}
        <script
          async
          src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx"
          crossOrigin="anonymous"
        />
      </head>
      <body {...props.bodyAttributes}>
        {props.preBodyComponents}
        <div key="body" id="___gatsby" dangerouslySetInnerHTML={{ __html: props.body }} />
        {props.postBodyComponents}
      </body>
    </html>
  );
}

これでAdSence用のscriptがどのページでもheader部分に設定されるようになり
広告を表示する準備が整う
※AdSence用のscriptの挿入位置はbody部分でもいいみたい。

Adsense広告の表示

Adsense広告には自動広告と固定広告がある。

自動広告

自動広告はページのアンカー広告などの広告のこと。
AdSenseで発行されるスクリプトタグをheaderに設定後、AdSenseアカウントで
自動広告をONにすれば表示されるようになる。
※ONにしてから広告が表示されるようになるまで多少時間がかかる場合もあるようです。

固定広告

固定広告は自動広告と違って広告の種類と表示場所を指定することができる。

AdSense固定広告を表示させる方法

今回はGatsbyで固定広告をコンポーネント作成して任意の位置に広告を出してみる。 AdSenseアカウントで広告を作成すると下記のようなスクリプトが発行される

AdSense固定広告スクリプト
<script 
    async 
    src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"
    crossorigin="anonymous">
</script>
<ins 
    class="adsbygoogle"
    style="display:block;"
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="XXXXXXXXXX"
    data-ad-format="auto"
    data-full-width-responsive="true">
</ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

ただこれを普通にコンポーネントにしてもエラーが発生するため
少し手を加える必要がある。

AdSense固定広告表示コンポーネントの作成

AdSense固定広告スクリプトをuseEffectを使って、Reactのコンポーネントに
書き換えるイメージ

Adsense.jsx
import React, { useEffect } from 'react';


export const Adsense = ( props ) => {
  const { currentPath } = props


  useEffect(() => {
    if (window) {
        window.adsbygoogle = window.adsbygoogle || []
        window.adsbygoogle.push({})
    }
  }, [currentPath]);


  return (
      <ins 
        className="adsbygoogle"
        style={{display:'block'}}
        data-ad-client="ca-pub-xxxxxxxxx" // 自サイトのコードに置き換える
        data-ad-slot="xxxxxxxxx" // 自サイトのスロットに置き換える
        data-ad-format='auto'  // 自由
        data-full-width-responsive='true' // 自由
      />
  )
}
  • adsenseスクリプトに広告の描画を指示するためにwindow.adsbygoogle
    に空オブジェクトをpushする必要がある。これをuseEffect()で実行する
  • jsx内部(ins)はgoogleAdsenseで生成したものでok

後は好きなところにAdSense固定広告表示コンポーネントを配置すれば広告が表示されるようになる。

いろんな固定広告を表示できるコンポーネントにする

AdSense広告にはいくつか種類があり、それによって表示される広告も異なるので
上記で作成したAdSense固定広告表示コンポーネントをpropsで広告の種類を出し分けられるように
カスタマイズする。

固定広告用スクリプトを発行する

AdSenceアカウントから下記の種類の固定広告を作成する。
AdSence → 広告 → 広告ユニットごと → 新しい広告ユニットの作成 から作れる

  • ディスプレイ
  • Multiplex
  • インフィード
  • 記事内

AdSense固定広告表示コンポーネントをカスタマイズする

呼出し側でpropsに表示する広告の種類を設定して出力仕分けるようにする

Adsense.jsx
import React, { useEffect } from 'react';
import { css } from 'twin.macro';


const Adsense = props => {
  const { currentPath, type } = props;


  useEffect(() => {
    if (window) {
        window.adsbygoogle = window.adsbygoogle || [];
        window.adsbygoogle.push({});
    }
  }, [currentPath]);


  const adsence = () => {
    switch (type) {
      case 'display':
        return (
          <div>
            <ins
              className="adsbygoogle"
              style={{ display: 'block' }}
              data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
              data-ad-slot="xxxxxxxxxx"
              data-ad-format="auto"
              data-full-width-responsive="true"
            />
          </div>
        );
      case 'infeed':
        return (
          <div>
            <ins
              className="adsbygoogle"
              style={{ display: 'block' }}
              data-ad-format="fluid"
              data-ad-layout-key="xxxxxxxxxx"
              data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
              data-ad-slot="xxxxxxxxxx"
            />
          </div>
        );


      case 'mdx':
        return (
          <div>
            <ins
              className="adsbygoogle"
              style={{ display: 'block' }}
              data-ad-layout="in-article"
              data-ad-format="fluid"
              data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
              data-ad-slot="xxxxxxxxxx"
            />
          </div>
        );


      case 'Multiplex_column':
        return (
          <div>
            <ins
              className="adsbygoogle"
              style={{ display: 'block' }}
              data-ad-format="autorelaxed"
              data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
              data-ad-slot="xxxxxxxxxx"
            />
          </div>
        );
      case 'Multiplex_row':
        return (
          <div>
            <ins
              className="adsbygoogle"
              style={{ display: 'block' }}
              data-ad-format="autorelaxed"
              data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
              data-ad-slot="xxxxxxxxxx"
            />
          </div>
        );
      case 'display_sq':
        return (
          <div>
            <ins
              className="adsbygoogle"
              style={{ display: 'block' }}
              data-ad-slot="xxxxxxxxxx"
              data-ad-format="auto"
              data-full-width-responsive="true"
            />
          </div>
        );


      default:
        return (
          <div>
            <ins
              className="adsbygoogle"
              style={{ display: 'block' }}
              data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
              data-ad-slot="xxxxxxxxxx"
              data-ad-format="auto"
              data-full-width-responsive="true"
            />
          </div>
        );
    }
  };


  return <div>{adsence()}</div>;
};


export default Adsense;

AdSense固定広告表示コンポーネントに出したい広告の種類
をpropsで指定して好きな場所に配置すればその種類の広告が表示されるようになる

まとめ

広告表示の準備

  • googleAdsenseで生成した広告ソースはgatsbyではそのままでは使えない。
  • googleAdsenseで生成した広告ソースの上の< script >部分はhtml.jsで記載し、全体共通テンプレートで読み込む
    ※adsenceにサイト登録時に発行されるscriptと同じ

固定広告の表示

  • AdSense固定広告表示コンポーネントを作成する
    • googleAdsenseで生成した広告ソースの下の< script >部分は広告表示用のコンポーネントのuseEffectで処理する
    • googleAdsenseで生成した広告ソースの< ins >は広告表示用のコンポーネントのjsxにそのまま設定する
  • AdSense固定広告表示コンポーネントを配置する

一旦は上記の対応で固定広告がちゃんとでるようになった。
自動広告はレイアウトが崩れるため今のところはoffにしている。
そっちも後々、調整したい。

参考

下記のサイトを参考にさせて頂きました。

新着記事

タグ別一覧
top