Back to blog

How to Integrate Google AdSense - A Step-by-Step Guide for Modern Websites

Monetizing content is a major milestone for developers and creators. Google AdSense remains one of the most reliable and widely used advertising networks, offering a simple way to earn revenue by displaying targeted ads to your global audience.

However, integrating ads without planning can harm your user experience, increase Cumulative Layout Shift (CLS), and even cause AdSense application rejection.

In this comprehensive guide, we will walk you through setting up AdSense, integrating the verification script, inserting responsive ad units, configuring the required ads.txt file, and optimizing pages for ad compliance.

Step 1: Obtain Your AdSense Publisher ID

Before writing any code, you need to sign up for Google AdSense and submit your website for review.

  1. Visit the Google AdSense homepage and register with your Google account.
  2. Enter your site URL and choose your payment country or territory.
  3. Once logged in, navigate to the Account section and retrieve your unique Publisher ID, which is formatted as pub-XXXXXXXXXXXXXXXX.

Step 2: Configure the Global Script

To let Google serve ads on your site, you must add the AdSense global script tag to the head element of every page.

In HTML templates or Astro projects, you can add this script inside the main layouts head block:

<head>
  <meta charset="utf-8" />
  <title>Your Awesome Web App</title>
  <!-- Load Google AdSense -->
  <script 
    async 
    src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" 
    crossorigin="anonymous">
  </script>
</head>

Replace ca-pub-XXXXXXXXXXXXXXXX with your actual Publisher ID. The async attribute ensures the script loads in the background, preventing render-blocking behavior.

Step 3: Embed Ad Units and Avoid Layout Shifts

When ads load dynamically, they can push website content downward, causing Cumulative Layout Shift (CLS), which hurts your SEO and user experience.

To prevent CLS, wrap your ad slots in container divs with pre-defined minimum heights. Here is an example of embedding a display ad unit inside a post layout:

<!-- Responsive Ad Block Wrapper -->
<div 
  class="ad-slot-container" 
  style="min-height: 250px; display: flex; justify-content: center; align-items: center; background-color: rgba(0,0,0,0.02); border: 1px dashed rgba(0,0,0,0.1); margin: 2rem 0; width: 100%;"
>
  <!-- Google AdSense Block Code -->
  <ins class="adsbygoogle"
       style="display:block"
       data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
       data-ad-slot="YYYYYYYYYY"
       data-ad-format="auto"
       data-full-width-responsive="true"></ins>
  <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</div>

Inside the code, data-ad-slot refers to the specific slot ID generated in your AdSense dashboard under Ads -> By Ad Unit. The push statement tells the AdSense library to render the ad unit inside the preceding element.

Step 4: Configure ads.txt

To protect your site from ad fraud and authorize Google to sell your ad inventory, you must deploy an ads.txt file at the root of your domain. AdSense crawler will check this file, and your account will show warnings if it is missing.

Create a plain text file named ads.txt and place it in the public root folder of your project (e.g., public/ads.txt in Astro, Next.js, or Vite).

Add the following single line to the file:

google.com, pub-XXXXXXXXXXXXXXXX, DIRECT, f08c47fec0942fa0
  • Replace pub-XXXXXXXXXXXXXXXX with your own Publisher ID.
  • Keep the text formatting exactly as shown.
  • Once deployed, ensure you can access the file in your browser via https://yourdomain.com/ads.txt.

Checklist for Passing AdSense Review

Google has strict publisher guidelines. Before submitting your site for review, make sure your website complies with these best practices:

  • Include Compliance Pages: You must have links to accessible pages for Privacy Policy, Terms of Service, and About Us.
  • Avoid Thin Content: Ensure you have a substantial amount of original, helpful articles and tutorials.
  • Clean Navigation: Avoid broken links or confusing menus; users and bots must be able to navigate the page hierarchy easily.
  • Keep Ad Density Reasonable: Do not overwhelm your content with ads, especially above the fold.

By following these integration steps, you will establish a clean, compliant, and well-performing monetization setup for your website.