Adding Google Ads to React & Next.js Apps with react-gpt-hooks
Monetizing your React app with Google Ad Manager (formerly DFP) usually means writing boilerplate to load the GPT script, manage slot…
Adding Google Ads to React & Next.js Apps with react-gpt-hooks
Monetizing your React app with Google Ad Manager (formerly DFP) usually means writing boilerplate to load the GPT script, manage slot lifecycles, handle SSR, and clean up on unmount.
react-gpt-hooks simplifies all of that. No wrappers, no heavy dependencies, just hooks and components that work.
Installation
npm install react-gpt-hooksBasic Setup (Vite / CRA)
Wrap your app with GptProvider:
import { GptProvider, GptBanner, AD_SIZES } from 'react-gpt-hooks';function App() {
return (
<GptProvider options={{ singleRequest: true }}>
<div>
<h1>My App</h1>
<GptBanner
adUnitPath="/6499/example/banner"
sizes={AD_SIZES.LEADERBOARD}
slotId="leaderboard-top"
/>
</div>
</GptProvider>
);
}That’s it. The script loads automatically, the slot registers and renders, and cleanup happens on unmount.
Next.js App Router
// app/layout.tsx
import { GptProvider } from 'react-gpt-hooks';export default function RootLayout({ children }) {
return (
<html>
<body>
<GptProvider options={{ singleRequest: true, collapseEmptyDivs: true }}>
{children}
</GptProvider>
</body>
</html>
);
}// app/page.tsx — mark as 'use client'
'use client';
import { GptBanner, AD_SIZES } from 'react-gpt-hooks';export default function Home() {
return (
<>
<GptBanner adUnitPath="/6499/example/banner" sizes={AD_SIZES.LEADERBOARD} />
<GptBanner adUnitPath="/6499/example/banner" sizes={AD_SIZES.MEDIUM_RECTANGLE} />
</>
);
}All components use 'use client' and suppressHydrationWarning — no hydration mismatches.
Advanced Usage
Lazy loading ads:
<GptBanner
adUnitPath="/6499/example/banner"
sizes={[[300, 250]]}
lazyLoad={{ rootMargin: '200px' }}
/>Interstitial (full-screen) ad:
<GptInterstitial
adUnitPath="/6499/example/interstitial"
sizes={[[320, 480], [768, 1024]]}
isVisible={showAd}
onClose={() => setShowAd(false)}
/>Custom slot via hook:
function CustomAd() {
const { containerRef, isLoaded, isEmpty, refresh } = useGptSlot({
adUnitPath: '/6499/example/banner',
sizes: [[728, 90]],
}); return (
<div>
<div ref={containerRef} />
{isEmpty && <p>No ad available</p>}
<button onClick={refresh}>Refresh</button>
</div>
);
}API Reference
Component/HookPurposeGptProviderContext provider — loads GPT, configures SRMGptBannerDisplay ad with lazy load, events, collapseGptInterstitialFull-screen interstitial overlayuseGptSlotLow-level slot lifecycle hookuseGptEventListen to GPT events by slot IDAD_SIZES10 standard size presets
Why choose react-gpt-hooks?
Featurereact-gpt-hooksOthersDependenciesZeroOften include heavy depsTypeScript✅ Full typesPartial or noneNext.js SSR✅ 'use client' + suppressHydrationWarning❌ Often brokenBundle size3.5KB gzipped10KB+Interstitial✅ Built-in❌ Manual
Links
- GitHub: https://github.com/khurramwaqar/react-gpt-hooks
- npm: https://www.npmjs.com/package/react-gpt-hooks
- Examples: Basic Vite + Next.js in the repo
메타데이터
- post_id
- c8a6b7b96dd1
- slug
- adding-google-ads-to-react-next-js-apps-with-react-gpt-hooks-c8a6b7b96dd1
- url
- https://medium.com/@khurrambaigw/adding-google-ads-to-react-next-js-apps-with-react-gpt-hooks-c8a6b7b96dd1
- canonical_url
- https://medium.com/@khurrambaigw/adding-google-ads-to-react-next-js-apps-with-react-gpt-hooks-c8a6b7b96dd1
- author_url
- https://medium.com/@khurrambaigw
- status
- ok
- fetched_at
- 2026-06-13 12:55:53
