React DFP ·

一个使用React实现的Google DFP API。这个包受到优秀库jquery.dfp的启发，旨在提供相同的易用性，当然，考虑到React的概念和生命周期特性。

安装：

要安装只需运行以下命令（不需要其他依赖）：

npm install --save react-dfp

或者

yarn add react-dfp

可以在React-dfp网站找到更多详细信息。

入门

React-dfp设计得非常像React，它的主要目标是能够通过React组件在你的React应用中展示DFP广告，这意味着你无需在页面加载时以编程方式执行任何初始化调用。

这里有一个快速示例，请注意，广告将在你的组件挂载后立即在页面上渲染，通过其组件（DFPSlotsProvider和AdSlot），react-dfp完全抽象了Google dfp/gpt API。

import React, { Component } from 'react';
import { DFPSlotsProvider, AdSlot } from 'react-dfp';
...
class Page extends Component {
   render() {
     ...

     return (
        <DFPSlotsProvider>
         ...
         <AdSlot adUnit="home/leaderboard" sizes={[ [900, 90], [728, 90]]} />
         ...
         /* 你可以覆盖这些属性 */
         <AdSlot adUnit="home/mobile" sizes={[ [300, 250], [300, 600]]} />
         ...
         <div>
           ...
           <AdSlot adUnit="home/footer" sizes={[ [300, 250], [300, 600]]} />
           ...
         </div>
         ...
       </DFPSlotsProvider>
     );
   }
}

示例

请参见React-dfp网站以获取更多示例（基本示例、如何拥有可刷新的广告等）。

文档

你可以在网站上找到React-dfp的文档。该网站分为多个部分，分别描述每个组件、属性以及DFPManager API（如果你需要手动使用它）。

该网站还充满了实时/工作中的示例。

你可以在这里找到该网站的源代码：https://github.com/jaanauati/react-dfp-website。

想要帮助？

我当然知道测试用例需要改进，但是，只要你的语法干净，提交测试用例，当然，无论所有接口是否正常工作，所有类型的贡献都是受欢迎的。

投诉。

拉取请求是受欢迎的 🍻。