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のときはどういう振る舞いになるのか、なにかわかればまた記事にします。