Nodachisoft Nodachisoft logo, Katana Sword Icon
  
@あまじ✎ 2021年8月9日に更新

ReactやGatsbyでのGoogleAdsense埋め込み

ReactやGatsbyでのGoogleAdsense埋め込み

本記事は Gatsby v3, 4 で動作確認しています。

React (Gatsbyなども内部的には React)で作られたサイトに Google Adsense の広告コードをそのまま埋め込むとエラーとなるため、解消方法やコーディングする例を記録しています。

なお、参考として当サイトも Gatsby(React)で構築していて、このページで記述している方法で Google Adsense を掲載しています。

Google Adsense の広告コードをそのまま埋め込んだ場合

Google Adsense にアクセスして、広告コードを発行すると下のようなコードが発行されるかと思います。。

こちらは、Google Adsense 上で、自動広告OFF、広告のサイズを 300x250 サイズで発行したときの Google が参考で生成してくれる広告コードの例です。

 
広告コード例
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"
     crossorigin="anonymous"></script>
<!-- Square300x250 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

これを React のコンポーネントにするとこんな感じかと思います。

 
React貼り付け例
import React from 'react'
const TestAd = ({ }) => (
  <>
    <script async
        src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"
        crossOrigin="anonymous"></script>
    <ins className="adsbygoogle"
        style={{display:"inline-block", width:"300px", height:"250px"}}
        data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
        data-ad-slot="XXXXXXXXXX"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  </>
);  
export default TestAd;

ですが、このコンポーネントでそのままページを表示すると、 複数コンポーネントを読み込んだ時にブラウザで以下のようなエラーがコンソールに出力されます。

エラーメッセージ
Google Adsense error -adsbygoogle.push() error: Only one AdSense head tag supported per page. The second tag is ignore

SPAのサイトなどで、「https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js」のスクリプトを 複数回読み込もうとすると広告コードの表示するを追加するとき(adsbygoogle.push)にエラーが表示されます。

adsbygoogle.js 読込を React での解消

Head タグに以下の一行だけ追加するようにします。

サイトのHeadへ追加
<script async
    src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"
    crossOrigin="anonymous"></script>

adsbygoogle.js 読込を Gatsby での解消

~~ Gatsby では便利なプラグインを用意してくださってる方がいるので、一度 Head 内で 読み込んでもらうよう手軽に設定できます。

以下で Gatsby プロジェクトにプラグイン「gatsby-plugin-google-adsense」を追加できます。 ~~

2021年12月時点で、このプラグイン「gatsby-plugin-google-adsense」は非推奨です。

ビルド時にバンドルされるプログラムが肥大化してしまい、重くなるとか。 代替となる方法を後ほど記載していますので、この項は飛ばして OK です。

 
install
npm install --save gatsby-plugin-google-adsense

追加した後、gatsby.config に以下を追加します。

gatsby-config.js
  plugins: [
       :{
      resolve: `gatsby-plugin-google-adsense`,
      options: {
        publisherId: `ca-pub-XXXXXXXXXXXXXXXX`
      },
    }
       :]

gatsby-plugin-google-adsense を使わない方法

Gatsby内で共通して一度読み込まれるヘッダー部分に、google adsense のスクリプトを追記して読み込ませます。

Gatsby-plugin-google-adsense を使用している場合 ※もし現在 gatsby-plugin-google-adsense をインストール済みならアンインストールし、 gatsby-confing.js からコメントアウト、もしくは削除します。重複してスクリプト読み込みが発生してしまうため。

Gatsby v4 のコチラでの解説をもとに、Google Adsense スクリプトを読み込むコードを追加していきましょう。

まず Gatsby プロジェクトの直下の「.cache/default-html.js」を「src/html.js」にコピーします。

この html.js をカスタマイズすることで、HEAD タグや FOOTER タグの内部をカスタマイズ可能です。

以下の ハイライトした箇所に一行、Google Adsense 用のコードを追加しています。

 
html.jsの編集
import React from "react"
import PropTypes from "prop-types"

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 data-ad-client={"ca-pub-XXXXXXXXX"} async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      </head>

      <body {...props.bodyAttributes}>

        {props.preBodyComponents}

        <div
          key={`body`}
          id="___gatsby"
          dangerouslySetInnerHTML={{ __html: props.body }}
        />

        {props.postBodyComponents}

      </body>

    </html>
  )
}

HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
}

React で広告を表示するコンポーネント例

以下、JSX で広告を表示するためのコンポーネント側の実装例です。 これにより広告表示したい箇所に JSX タグで簡単に広告を設置することができます。

React の useHook 機能を使った書き方は以下のようになります。

 
GoogleAd.jsx
import React, { useEffect } from 'react';
const GoogleAd = ({ }) => {
  useEffect(() => {
    if (!window) { return } // SSR 処理中は skip
    window.adsbygoogle = window.adsbygoogle || [];
    window.adsbygoogle.push({});
  });

  render() {
    return (
      <ins className="adsbygoogle"
      style={{display:"inline-block", width:"300px", height:"250px"}}
      data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
      data-ad-slot="XXXXXXXXXX"></ins>
    );
  }
}
export default GoogleAd;

なお、4 行目は Gatsby 上で実装する時に入れておくと良いです。 (サーバーサイドレンダリング(SSR))中は処理をスキップすることを想定)

useHook を使わない書き方例(jsx)

React 16.7 までの useHook 機能を使わない書き方では下のようになります。

 
GoogleAd.jsx
import React from 'react'
const GoogleAd = ({ }) => {
  componentDidMount() : void {
    if (!window) { return } // SSR 処理中は skip
    window.adsbygoogle = window.adsbygoogle || [];
    window.adsbygoogle.push({});
  }

  render() {
    return (
      <ins className="adsbygoogle"
      style={{display:"inline-block", width:"300px", height:"250px"}}
      data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
      data-ad-slot="XXXXXXXXXX"></ins>
    );
  }
}
export default GoogleAd;

こちらも、4 行目は Gatsby 上で実装する時に入れておくと良いです。

typescript 例

一応 typescript (tsx)での記述例です。

React の useHook 機能を使った書き方。

 
GoogleAd.tsx
import React, { useEffect } from 'react';
declare global { interface Window { adsbygoogle: any} }
type Props = {}
const GoogleAd : React.FC<Props> = function() {
  useEffect(() => {
    if (!window) { return } // SSR 処理中は skip
    window.adsbygoogle = window.adsbygoogle || [];
    window.adsbygoogle.push({});
  });

  render() {
    return (
      <ins className="adsbygoogle"
      style={{display:"inline-block", width:"300px", height:"250px"}}
      data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
      data-ad-slot="XXXXXXXXXX"></ins>
    );
  }
};
export default GoogleAd;

useHook を使わない書き方例(tsx)

React の useHook を使わない、typescript 記述例(tsx記述例)です。

 
GoogleAd.tsx
import React from 'react'
type Props = {}
declare global { interface Window { adsbygoogle: any, pushcount: number } }
class GoogleAd extends React.Component<Props> {
  componentDidMount() : void {
    if (!window) { return } // SSR 処理中は skip
    window.adsbygoogle = window.adsbygoogle || [];
    window.adsbygoogle.push({});
  }

  render() {
    return (
      <ins className="adsbygoogle"
      style={{display:"inline-block", width:"300px", height:"250px"}}
      data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
      data-ad-slot="XXXXXXXXXX"></ins>
    );
  }
}
export default GoogleAd;

マークダウン記事内に広告を設置する例

当サイトは記事内の H1 タグの2つ目の上部に広告を入れるようにしています。

Gatsby の SSR 処理時、マークダウンの解析をするときに自前プラグインで埋め込みを実現しています。

参考までにいかに自前プラグインのコードを掲載しておきます。

こちらは万人向けなので、 Gatsby の Plugin 検索や npmjs にはアップしていないです。 そのうち整理して汎用的に使えるコードに改善したら npmjs にアップするかもです。

 
index.js
"use strict";
const visit = require("unist-util-visit");

module.exports = function gatsbyRemarkGoogleAdsense(_ref, pluginOptions) {
  const markdownAST = _ref.markdownAST;
  var countHeadTag = 0;
  var isFirstCodeWithClipboard = false;
  visit(markdownAST, "heading", (node, index) => {
    if ( node.depth !== 1 ) return;
    countHeadTag++;
    const advNode = {
      type: "html",
      value: `
        <style>
        .adv_center {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .adv_blog_cont {
          margin: 0px 0px;
          padding: 0px 0px;
          display: block;
          width: 100%;
          height: 130px;
        }
        </style>
        <div class="adv_center">
          <div class="adv_blog_cont">
            <ins class="adsbygoogle"
            style="display:block"
            data-ad-format="fluid"
            data-ad-layout-key="-gq-2c+2h-2u+di"
            data-ad-client="ca-pub-XXXXXXXXX"
            data-ad-slot="XXXXXXXX"></ins>
          </div>
          <script>(window.adsbygoogle = window.adsbygoogle || []).push({});</script>
        </div>
       `
    };
    if ( !isFirstCodeWithClipboard && countHeadTag === 2 ) {
      markdownAST.children.splice(index, 0, advNode);
      isFirstCodeWithClipboard = true;
    }
  });
  return markdownAST;
};

このコードの使い方ですが、 gatsby プロジェクトの plugin フォルダ内に「gatsby-remark-googleadsense」フォルダを 作成し、そこに上記のコードを index.js として保存することで、 gatsby が自前プラグインとして読み込んでくれます。

参考

変更履歴

日付 変更概要
2021-12-17 Gatsby-plugin-google-adsense プラグインが非推奨であること、マークダウン記事内の定位置に Google Adsense を埋め込む自前プラグインのコードを掲載
 
 
送信しました!

コメント、ありがとうございます。

なんかエラーでした

ごめんなさい。エラーでうまく送信できませんでした。ご迷惑をおかけします。しばらくおいてから再度送信を試していただくか、以下から DM などでご連絡頂ければと思います。

Twitter:@NodachiSoft_jp
お名前:
 
連絡先:
 
メッセージ:
 
戻る
内容の確認!

以下の内容でコメントを送信します。よろしければ、「送信」を押してください。修正する場合は「戻る」を押してください

お名前:
 
連絡先:
 
メッセージ:
 
Roboto からの操作ではないという確認のため確認キーを入れてください。
確認キー=95
戻る
 / 
送信確認へ
コメント欄
コメント送信確認へ

関連ありそうな記事(5件)です!

Gatsby のバージョンでの変化まとめ、バージョン2 から バージョン4 へのアップデート記録

Gatsby のバージョンでの変化まとめ、バージョン2 から バージョン4 へのアップデート記録

#Gatsby✎ 2021-12-19
Gatsby のバージョンでの変化まとめ、Gatsby のバージョン2 から バージョン4 へのビルド速度の向上
目次
ReactやGatsbyでのGoogleAdsense埋め込み
ReactやGatsbyでのGoogleAdsense埋め込み
Google Adsense の広告コードをそのまま埋め込んだ場合
Google Adsense の広告コードをそのまま埋め込んだ場合
adsbygoogle.js 読込を React での解消
adsbygoogle.js 読込を React での解消
adsbygoogle.js 読込を Gatsby での解消
adsbygoogle.js 読込を Gatsby での解消
gatsby-plugin-google-adsense を使わない方法
gatsby-plugin-google-adsense を使わない方法
React で広告を表示するコンポーネント例
React で広告を表示するコンポーネント例
useHook を使わない書き方例(jsx)
useHook を使わない書き方例(jsx)
typescript 例
typescript 例
useHook を使わない書き方例(tsx)
useHook を使わない書き方例(tsx)
マークダウン記事内に広告を設置する例
マークダウン記事内に広告を設置する例
参考
参考
変更履歴
変更履歴
Nodachisoft © 2021