用 react-adsense 给 React 应用添加广告

介绍

react-adsense 是一个对 Google AdSense 的 React 封装，项目首页。

安装：

npm install --save react-adsense

先在 HTML 的最末尾加入 script：

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

使用

import React from 'react';
import AdSense from 'react-adsense';

// ads with no set-up
<AdSense.Google
  client='ca-pub-7292810486004926'
  slot='7806394673'
/>

// ads with custom format
<AdSense.Google
  client='ca-pub-7292810486004926'
  slot='7806394673'
  style={{ width: 500, height: 300, float: 'left' }}
  format=''
/>

// responsive and native ads
<AdSense.Google
  client='ca-pub-7292810486004926'
  slot='7806394673'
  style={{ display: 'block' }}
  layout='in-article'
  format='fluid'
/>

// auto full width responsive ads
<AdSense.Google
  client='ca-pub-7292810486004926'
  slot='7806394673'
  style={{ display: 'block' }}
  format='auto'
  responsive='true'
/>

Semantic UI React

maxiee.github.io 使用了 Semantic UI React 组件库，它提供有一个 Advertisement 组件，用于盛放广告位。

官方示例中包含了如何与 react-adsense 共同使用：

<Advertisement unit="leaderboard">
    <AdSense.Google
    client="ca-pub-一串数字"
    slot="一串数字"
    responsive="true"
    />
</Advertisement>