T
GitHub

Monetizing Your Tobesee Site: A Step-by-Step Guide to Adding Google AdSense in Next.js

August 20, 2024

Learn how to properly integrate Google AdSense into a Next.js application like Tobesee — from script placement to ad component creation, policy compliance, and performance optimization

Monetizing Your Tobesee Site: A Step-by-Step Guide to Adding Google AdSense in Next.js

Once your Tobesee site has quality content and steady traffic, you might want to monetize it with display advertising. Google AdSense is the most popular choice, but integrating it with a Next.js application requires a different approach than traditional PHP-based sites. This guide covers the complete process.

Before You Apply

Google AdSense has content and site quality requirements. Before submitting your application, make sure your site meets these criteria:

  • Original content — at least 15-20 articles with substantial, unique content (800+ words each)
  • Clear navigation — visitors can easily find content through menus and internal links
  • Essential pages — Privacy Policy, About, Contact, and Terms of Service pages must exist
  • Consistent theme — all content should relate to your site niche
  • Clean design — professional layout with readable typography and responsive design
  • Sufficient traffic — sites with regular visitors have higher approval rates

Adding the AdSense Script to Your Layout

The AdSense verification script needs to load on every page. In a Next.js App Router project like Tobesee, add it to your root layout file:

// src/app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <Script
          async
          src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_ADSENSE_ID}`}
          crossOrigin="anonymous"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

The strategy="afterInteractive" attribute tells Next.js to load the script after the page becomes interactive, preventing it from blocking the initial render.

Storing Your Publisher ID as an Environment Variable

Instead of hardcoding the publisher ID, store it in your environment:

NEXT_PUBLIC_ADSENSE_ID=ca-pub-YOUR_PUBLISHER_ID

The NEXT_PUBLIC_ prefix makes this variable available in client-side code, which is necessary for AdSense to function. Add this to both your .env.local file and your Vercel environment variables.

Creating a Reusable Ad Component

Build a React component that renders an AdSense ad unit:

// src/components/AdUnit.tsx
'use client';

import { useEffect, useRef } from 'react';

interface AdUnitProps {
  adSlot: string;
  adFormat?: string;
  fullWidth?: boolean;
}

export default function AdUnit({
  adSlot,
  adFormat = 'auto',
  fullWidth = true
}: AdUnitProps) {
  const adRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    try {
      if (typeof window !== 'undefined') {
        (window.adsbygoogle = window.adsbygoogle || []).push({});
      }
    } catch (error) {
      console.error('AdSense error:', error);
    }
  }, []);

  return (
    <div ref={adRef} className="my-6">
      <ins
        className="adsbygoogle"
        style={{ display: 'block' }}
        data-ad-client={process.env.NEXT_PUBLIC_ADSENSE_ID}
        data-ad-slot={adSlot}
        data-ad-format={adFormat}
        data-full-width-responsive={fullWidth ? 'true' : 'false'}
      />
    </div>
  );
}

The 'use client' directive is required because AdSense uses browser APIs that are not available during server-side rendering.

Placing Ads in Article Pages

Insert the ad component at natural break points in your article layout:

import AdUnit from '@/components/AdUnit';

export default function ArticlePage({ content }) {
  return (
    <article>
      <h1>{content.title}</h1>
      <div className="article-body">
        {/* First section of content */}
        <AdUnit adSlot="1234567890" />
        {/* Remaining content */}
      </div>
    </article>
  );
}

Ad Placement Guidelines

Google has strict policies about ad placement:

  • Do not place ads above the fold without content — visitors should see meaningful content before any ads
  • Limit ad density — no more than one ad per screen height of content
  • Do not place ads near interactive elements — keep ads away from buttons, links, and navigation
  • Responsive design — use data-ad-format="auto" and data-full-width-responsive="true" for mobile-friendly ads

Handling Ad Blockers Gracefully

A significant percentage of visitors use ad blockers. Your site should work perfectly with or without ads loading. The ad component handles this gracefully — if AdSense fails to load, the element simply remains empty.

Do not block content behind anti-adblock walls or show aggressive messages. These practices violate AdSense policies and create a poor user experience.

Performance Optimization with Lazy Loading

Only load ads when they are about to enter the viewport using the Intersection Observer API:

'use client';

import { useEffect, useRef, useState } from 'react';

export default function LazyAdUnit({ adSlot }: { adSlot: string }) {
  const [isVisible, setIsVisible] = useState(false);
  const adRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { rootMargin: '200px' }
    );

    if (adRef.current) observer.observe(adRef.current);
    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    if (isVisible) {
      try {
        (window.adsbygoogle = window.adsbygoogle || []).push({});
      } catch (e) {
        console.error('Ad load error:', e);
      }
    }
  }, [isVisible]);

  return (
    <div ref={adRef} className="my-6 min-h-[250px]">
      {isVisible && (
        <ins
          className="adsbygoogle"
          style={{ display: 'block' }}
          data-ad-client={process.env.NEXT_PUBLIC_ADSENSE_ID}
          data-ad-slot={adSlot}
          data-ad-format="auto"
          data-full-width-responsive="true"
        />
      )}
    </div>
  );
}

The rootMargin: '200px' starts loading the ad 200 pixels before it enters the viewport, so it is ready by the time the user scrolls to it.

The ads.txt File

Google requires an ads.txt file in your site root. Place it in the public/ directory:

google.com, pub-YOUR_PUBLISHER_ID, DIRECT, f08c47fec0942fa0

This file is served at https://yourdomain.com/ads.txt and tells ad networks that you are authorized to sell ad space.

Common AdSense Rejection Reasons

If your application is rejected, check for these issues:

  1. "Low value content" — Add more original, in-depth articles. Every page needs substantial content.
  2. "Site not accessible" — Verify your site is publicly accessible and not behind authentication.
  3. "Navigational issues" — Add clear navigation, breadcrumbs, and internal links.
  4. "Missing privacy policy" — Create a privacy policy page that mentions Google AdSense and cookies.
  5. "Insufficient content" — Publish more articles. Aim for at least 15-20 quality posts before reapplying.

After fixing issues, wait at least two weeks before resubmitting.

Summary

Integrating Google AdSense with a Next.js site like Tobesee requires proper script placement in the layout, a reusable ad component with client-side rendering, and careful attention to placement policies and performance. Treat ads as a secondary element that enhances revenue without degrading the user experience that makes your site worth visiting.

Back to articles