{"id":20995098,"url":"https://github.com/blackboxvision/next-google-dfp","last_synced_at":"2025-07-17T18:32:04.884Z","repository":{"id":65957773,"uuid":"383765577","full_name":"BlackBoxVision/next-google-dfp","owner":"BlackBoxVision","description":"🚀 Integrate Google Double Click for Publishers in Next.js with ease","archived":false,"fork":false,"pushed_at":"2023-10-15T16:29:08.000Z","size":192,"stargazers_count":17,"open_issues_count":0,"forks_count":7,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-07-06T08:04:03.426Z","etag":null,"topics":["dfp","doubleclick-for-publishers","library","nextjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BlackBoxVision.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-07-07T10:51:28.000Z","updated_at":"2024-07-15T13:29:27.000Z","dependencies_parsed_at":"2024-01-23T17:41:51.606Z","dependency_job_id":"995ce8fd-e949-4091-a779-af3ff37636ba","html_url":"https://github.com/BlackBoxVision/next-google-dfp","commit_stats":{"total_commits":41,"total_committers":3,"mean_commits":"13.666666666666666","dds":0.07317073170731703,"last_synced_commit":"23357600f8f18779778772adf89e0b7dd0706b87"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/BlackBoxVision/next-google-dfp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Fnext-google-dfp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Fnext-google-dfp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Fnext-google-dfp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Fnext-google-dfp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BlackBoxVision","download_url":"https://codeload.github.com/BlackBoxVision/next-google-dfp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Fnext-google-dfp/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265645397,"owners_count":23804184,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dfp","doubleclick-for-publishers","library","nextjs"],"created_at":"2024-11-19T07:21:36.187Z","updated_at":"2025-07-17T18:32:04.866Z","avatar_url":"https://github.com/BlackBoxVision.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 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)\n\n🚀 Integrate Google Double Click for Publishers in Next.js with ease\n\n## Installation\n\n### NPM\n\n```bash\nnpm i @blackbox-vision/next-google-dfp\n```\n\n### YARN\n\n```bash\nyarn add @blackbox-vision/next-google-dfp\n```\n\n## Integration Steps\n\n### Define your slots\n\n```js\nexport const ads = [\n  {\n    slotId: \"/6355419/Travel/Europe/France/Paris\",\n    sizeMappings: [300, 250],\n    divId: \"banner-ad\",\n  },\n];\n```\n\n### Add a Provider in Custom App\n\n```ts\nimport { AdsProvider } from \"@blackbox-vision/next-google-dfp\";\n\nimport { ads } from \"../constants/ads\";\n\nfunction MyApp({ Component, pageProps }) {\n  return (\n    \u003cAdsProvider ads={ads} enableLazyload\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/AdsProvider\u003e\n  );\n}\n\nexport default MyApp;\n```\n\n### Add an Ad in your page\n\n```js\nimport { Ad } from \"@blackbox-vision/next-google-dfp\";\n\nfunction Page() {\n  return \u003cAd id=\"banner-ad\" width={300} height={250} /\u003e;\n}\n\nexport default Page;\n```\n\n## Responsive Ad Slots\n\nResponsive slots can be defined with this structure:\n\n```js\nexport const ads = [\n  {\n    slotId: \"/6355419/Travel/Europe/France/Paris\",\n    sizeMappings: [\n      {\n        breakpoint: [1024, 768],\n        sizes: [\n          [980, 90],\n          [980, 250],\n          [728, 90],\n        ],\n      }, //viewport \u003e1024px\n      {\n        breakpoint: [0, 0],\n        sizes: [\n          [320, 100],\n          [320, 50],\n        ],\n      }, //viewport \u003c1024px\n    ],\n    divId: \"banner-ad\",\n  },\n];\n```\n\n// TODO: add props, add support for more cases, show targeting support\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblackboxvision%2Fnext-google-dfp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblackboxvision%2Fnext-google-dfp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblackboxvision%2Fnext-google-dfp/lists"}