広告ここから
広告ここまで
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日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。
広告ここから
広告ここまで