FrontendReact

ReactでGoogle Adsense広告を表示する

React SPAで広告どうやって出そうかなと思ったまま放置してたのですが、React Google Adsが使いやすそうだったので試してみました。 インストール方法 README.mdのコマンドがタイポしているので要注 […]

広告ここから
広告ここまで

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

ブックマークや限定記事(予定)など

WP Kyotoサポーター募集中

WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。

14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。

広告ここから
広告ここまで

Related Category posts