react-dfp

项目简介

react-dfp 是一个基于 React 的 Google DFP（DoubleClick for Publishers）API 的实现。这个项目受到优秀的库 jquery.dfp 的启发，目标是在保留其易用性的同时，完美契合 React 的概念与生命周期特性。这款工具包可以让开发者在不需要手动编写初始化代码的情况下，通过 React 组件就能在应用程序中轻松插入 DFP 广告。

安装指南

react-dfp 的安装过程非常简单，无需其他依赖。开发者可以通过以下命令快速安装：

# 使用 npm 安装
npm install --save react-dfp

# 或使用 yarn 安装
yarn add react-dfp

如需获取更多详细信息，可以访问其官方网站。

快速入门

react-dfp 设计风格非常“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>
       );
   }
}