反应 GBT

A 类 反应 构成部分 谷歌出版商标签。 。 。 .

所需资源

• 反应0.14+

浏览器要求

• IE10 + 数据

特征

• 支持所有渲染模式(单一请求模式,async渲染节点和 *sync渲染模式)
• 支持响应性广告.
• 支持互通广告.
• 支持懒惰的改造.

*同步渲染需要同步加载GPT JavaScript.

安装

$ yarn react-gpt

反射 GBT 取决于 答应 用于浏览器。 如果您的应用程序支持不支持承诺的浏览器, 请包括多填充 .

开始

导入回放GPT并传递道具到组件.

import {Bling as GPT} from "react-gpt";

class Application extends React.Component {
    render() {
        return (
            <GPT
                adUnitPath="/4595/nfl.test.open"
                slotSize={[728, 90]}
            />
        );
    }
}

你至少需要通过 adUnitPath 和其中一个 slotSize 财务报告和审定财务报表 sizeMapping。 。 。 .

启用单一请求模式

启用 单一请求模式电话 Bling.enableSingleRequest() 在做广告之前. 默认为 Asynchronous Rendering Mode 如果没有设置.

import {Bling as GPT} from "react-gpt";

GPT.enableSingleRequest();

class Application extends React.Component {
    render() {
        return (
            <div id="ad-1">
                <GPT
                    adUnitPath="/4595/nfl.test.open"
                    slotSize={[728, 90]}
                />
            </div>
            <div id="ad-2">
                <GPT
                    adUnitPath="/4595/nfl.test.open"
                    slotSize={[300, 250]}
                />
            </div>
        );
    }
}

上述例子将向服务器发出一个请求,以制作两个广告,从而更容易确保排除类别.

响应性广告

如果你通过了 sizeMapping 代替道具 slotSize, React GPT 为取景口宽度的改变而收听,并在中断点被击中时刷新广告.

import {Bling as GPT} from "react-gpt";

class Application extends React.Component {
    render() {
        return (
            <GPT
                adUnitPath="/4595/nfl.test.open"
                sizeMapping={[
                    {viewport: [0, 0], slot: [320, 50]},
                    {viewport: [750, 0], slot: [728, 90]},
                    {viewport: [1050, 0], slot: [1024, 120]}
                ]}
            />
        );
    }
}

API 和文档

• API 密码 评议 React GPT API 密码
• 开始 更详细的“启动指南”
• 文档 向导与API.

举例来说:

1. 克隆这个还原
2. 运行 yarn
3. 运行 npm run examples 用于客户端渲染, npm start 用于服务器侧渲染.
4. 将浏览器指向 http://localhost: 8080

协助这一项目

请稍等一下 提交文件的准则。 。 。 .

• 调取请求
• 发展进程

许可证

麻省理工学院