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

ReactやGatsbyでのGoogleAdsense埋め込み

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 プロジェクトにプラグインを追加できます。

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

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

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

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

以下、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;

参考

変更履歴

  • なし
 
 
送信しました!

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

なんかエラーでした

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

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

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

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

目次
ReactやGatsbyでのGoogleAdsense埋め込み
ReactやGatsbyでのGoogleAdsense埋め込み
Google Adsense の広告コードをそのまま埋め込んだ場合
Google Adsense の広告コードをそのまま埋め込んだ場合
adsbygoogle.js 読込を React での解消
adsbygoogle.js 読込を React での解消
adsbygoogle.js 読込を Gatsby での解消
adsbygoogle.js 読込を Gatsby での解消
React で広告を表示するコンポーネント例
React で広告を表示するコンポーネント例
useHook を使わない書き方例(jsx)
useHook を使わない書き方例(jsx)
typescript 例
typescript 例
useHook を使わない書き方例(tsx)
useHook を使わない書き方例(tsx)
参考
参考
変更履歴
変更履歴
Nodachisoft © 2021