0.4.1 • Published 2 years ago

@blackbox-vision/next-google-dfp v0.4.1

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

Next Google DFP npm version License: MIT

šŸš€ Integrate Google Double Click for Publishers in Next.js with ease

Installation

NPM

npm i @blackbox-vision/next-google-dfp

YARN

yarn add @blackbox-vision/next-google-dfp

Integration Steps

Define your slots

export const ads = [
  {
    slotId: "/6355419/Travel/Europe/France/Paris",
    sizeMappings: [300, 250],
    divId: "banner-ad",
  },
];

Add a Provider in Custom App

import { AdsProvider } from "@blackbox-vision/next-google-dfp";

import { ads } from "../constants/ads";

function MyApp({ Component, pageProps }) {
  return (
    <AdsProvider ads={ads} enableLazyload>
      <Component {...pageProps} />
    </AdsProvider>
  );
}

export default MyApp;

Add an Ad in your page

import { Ad } from "@blackbox-vision/next-google-dfp";

function Page() {
  return <Ad id="banner-ad" width={300} height={250} />;
}

export default Page;

Responsive Ad Slots

Responsive slots can be defined with this structure:

export const ads = [
  {
    slotId: "/6355419/Travel/Europe/France/Paris",
    sizeMappings: [
      {
        breakpoint: [1024, 768],
        sizes: [
          [980, 90],
          [980, 250],
          [728, 90],
        ],
      }, //viewport >1024px
      {
        breakpoint: [0, 0],
        sizes: [
          [320, 100],
          [320, 50],
        ],
      }, //viewport <1024px
    ],
    divId: "banner-ad",
  },
];

// TODO: add props, add support for more cases, show targeting support

0.4.4

2 years ago

0.4.3

2 years ago

0.4.2

2 years ago

0.4.1

2 years ago

0.4.0

2 years ago

0.3.0

2 years ago

0.2.7

2 years ago

0.2.6

4 years ago

0.2.5

4 years ago

0.2.4

4 years ago

0.1.0

4 years ago

0.2.1

4 years ago

0.2.0

4 years ago

0.1.1

4 years ago

0.0.2

4 years ago

0.2.3

4 years ago

0.2.2

4 years ago

0.0.1

4 years ago