├── .babelrc ├── .gitignore ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── src ├── apis │ └── dfp.ts ├── components │ ├── Ad │ │ └── index.tsx │ └── AdsProvider │ │ └── index.tsx ├── contexts │ └── ads.ts ├── index.ts └── types │ └── index.ts └── tsconfig.json /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-typescript", "@babel/preset-react"], 3 | "plugins": [ 4 | "@babel/plugin-proposal-object-rest-spread", 5 | "@babel/plugin-proposal-optional-chaining", 6 | "@babel/plugin-proposal-class-properties" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | node_modules 3 | pkg -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 BlackBox Vision 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Next Google DFP [![npm version](https://badge.fury.io/js/%40blackbox-vision%2Fnext-google-dfp.svg)](https://badge.fury.io/js/%40blackbox-vision%2Fnext-google-dfp) [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT) 2 | 3 | 🚀 Integrate Google Double Click for Publishers in Next.js with ease 4 | 5 | ## Installation 6 | 7 | ### NPM 8 | 9 | ```bash 10 | npm i @blackbox-vision/next-google-dfp 11 | ``` 12 | 13 | ### YARN 14 | 15 | ```bash 16 | yarn add @blackbox-vision/next-google-dfp 17 | ``` 18 | 19 | ## Integration Steps 20 | 21 | ### Define your slots 22 | 23 | ```js 24 | export const ads = [ 25 | { 26 | slotId: "/6355419/Travel/Europe/France/Paris", 27 | sizeMappings: [300, 250], 28 | divId: "banner-ad", 29 | }, 30 | ]; 31 | ``` 32 | 33 | ### Add a Provider in Custom App 34 | 35 | ```ts 36 | import { AdsProvider } from "@blackbox-vision/next-google-dfp"; 37 | 38 | import { ads } from "../constants/ads"; 39 | 40 | function MyApp({ Component, pageProps }) { 41 | return ( 42 | 43 | 44 | 45 | ); 46 | } 47 | 48 | export default MyApp; 49 | ``` 50 | 51 | ### Add an Ad in your page 52 | 53 | ```js 54 | import { Ad } from "@blackbox-vision/next-google-dfp"; 55 | 56 | function Page() { 57 | return