AdUnblock Documentation

Documentation

Integration Guide: React/Next.js

Follow these steps to integrate Ad Unblock into your React/Next.js website.

Where to find your verification code

Your verification code is available in your Ad Unblock dashboard. Navigate to: Dashboard → [Your Site] → Integration → Verification

CDN Endpoint

Ad blockers regularly update their rules, and CDN endpoints may become blocked over time. As a site owner, you are responsible for using the latest valid CDN endpoints by regularly checking the System Status page or implementing server-side fetching from https://config.adunblocker.com/valid_script_sources.json.

Step 1: Add Script to Head Component

For Next.js, add the script to your _document.js or layout.tsx file:

// In _document.js (Pages Router)
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <script
          src="https://d16sc05it918j8.cloudfront.net"
          async
          data-code="YOUR_VERIFICATION_CODE"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

// In layout.tsx (App Router)
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <script
          src="https://d16sc05it918j8.cloudfront.net"
          async
          data-code="YOUR_VERIFICATION_CODE"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

For Create React App or other React applications

Add the script to your public/index.html file in the head section:

<!-- In public/index.html -->
<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- Add the Ad Unblock script here -->
  <script src="https://d16sc05it918j8.cloudfront.net" async data-code="YOUR_VERIFICATION_CODE"></script>
  <title>React App</title>
</head>

Verify Integration

After adding the script, verify your integration is working properly:

Go to Verification Page

Your Verification Code

Your unique verification code YOUR_VERIFICATION_CODE has been shown as a placeholder in the code examples above. The code attribute is required for Ad Unblock to verify your integration.

Available Script Sources

We provide multiple CDN endpoints to enhance reliability. If the primary script source is blocked by an ad blocker, you can use one of our alternative sources. View our status page to see all available endpoints and their current status:

View System Status Page

You can also fetch the latest list of valid script sources programmatically from:https://config.adunblocker.com/valid_script_sources.json

Important Notice

As a site owner, you are responsible for ensuring your integration uses the latest valid CDN endpoints. Ad blockers regularly update their rules, which may block our endpoints. We recommend:

Regularly check the System Status page for updated endpoint information
For production environments, implement server-side fetching from our API with proper caching
Use the API endpoint https://config.adunblocker.com/valid_script_sources.json to programmatically retrieve the latest valid scripts
Never implement client-side fallbacks that fetch from our API directly

Need help?

If you're experiencing any issues with the integration, please contact our support team at support@adunblock.com