ReactでGoogle Adsense広告を表示する

React SPAで広告どうやって出そうかなと思ったまま放置してたのですが、React Google Adsが使いやすそうだったので試してみました。

インストール方法

$ npm i -S react-google-ads

README.mdのコマンドがタイポしているので要注意です。(プルリク出したので、マージされればなおるはず)

使い方

Google Adsenseで発行されるタグから、以下のデータを拾います。

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXX"
     data-ad-slot="XXXXX"
     data-ad-format="auto"></ins>

data-ad-XXXXの値をそれぞれGoogleAdsの属性としてあててやりましょう。

import GoogleAds from 'react-google-ads'
const About = props => (
  <div>
    <h1>About</h1>
    <p>
      ここに記事を書きます
    </p>
    <GoogleAds
      client="ca-pub-XXXXXXX"
      slot="XXXXXXX"
      className="adsbygoogle"
      format="auto"
      style={{display: 'block'}}
    />
  </div>
)
export default About

使った結果

これでReact SPAでもGoogle Adsense広告出せるようになりました。

余談ですが、自動広告がDOM触ってくるスタイルっぽいのです。React SPAのときはどういう振る舞いになるのか、なにかわかればまた記事にします。

[PR]WordPressの入門書共著しました

ローカル環境の構築からテーマ作成・サイトの運営やコミュニティの紹介など、
「WordPressを触って終わり」ではなく、仕事でできるようになるには何が必要かがわかるようになる内容になっています。


(目次)
Lesson01:WordPressをはじめよう
Lesson02:必要な環境を整えインストールする
Lesson03:初期設定をしよう
Lesson04:コンテンツの追加・編集とナビゲーションの設定
Lesson05:テーマとプラグインによる外観カスタマイズ
Lesson06:プラグインによる機能の追加
Lesson07:ローカル開発環境をつくろう
Lesson08:テーマ作成の第一歩〜PHPとテーマの基礎
Lesson09:テンプレートファイルの作成
Lesson10:各種テンプレートファイルの作成
Lesson11:テーマカスタマイザーの実装
Lesson12:WordPressを本番環境へデプロイする
Lesson13:サイトの広報と集客
Lesson14:サイトの運営と管理
Lesson15:もっとWordPressを使いこなす・学ぶ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です