Google Adsense

Google AdSense allows you to monetize your website by displaying relevant ads from Google.

Nuxt Scripts provides:

• useScriptGoogleAdsense(): A composable to manage Google AdSense dynamically.
• <ScriptGoogleAdsense>: A headless component to embed ads directly in your Nuxt app.

export default defineNuxtConfig({
  scripts: {
    registry: {
      googleAdsense: {
        client: 'ca-pub-1234567890123456'
      }
    }
  }
})

const { proxy } = useScriptGoogleAdsense()

// ad slots render automatically

export default defineNuxtConfig({
  scripts: {
    registry: {
      googleAdsense: {
        client: 'ca-pub-1234567890123456'
      }
    }
  }
})

<script setup lang="ts">
const { proxy } = useScriptGoogleAdsense()

// noop in development, ssr
// just works in production, client
function handleAction() {
  // ad slots render automatically
}
</script>

<template>
  <div>
    <button @click="handleAction">
      Send Event
    </button>
  </div>
</template>

Where to Find <your-id> (Publisher ID)

Find your Google AdSense Publisher ID (also known as ca-pub-XXXXXXX) in your Google AdSense Account:

1. Log in to your Google AdSense account.
2. Navigate to Account > Settings (click on your profile icon > "Account information").
3. Locate the Publisher ID under Account Information.
4. Replace <your-id> in the config above with your actual ID.

Site Ownership Verification

Automatic Meta Tag Insertion

If you provide a client, Nuxt automatically inserts a meta tag on the page for Google to verify your site ownership.

export default defineNuxtConfig({
  scripts: {
    registry: {
      googleAdsense: {
        client: 'ca-pub-<your-id>', // AdSense Publisher ID
      },
    },
  },
})

<meta name="google-adsense-account" content="ca-pub-<your-id>" />

Using ads.txt for Verification

Google recommends adding an ads.txt file for ad revenue eligibility.

Steps:

1. Create a new file: public/ads.txt
2. Add the following content:

   google.com, pub-<your-id>, DIRECT, f08c47fec0942fa0
   

3. Replace <your-id> with your AdSense Publisher ID.

Enabling Auto Ads

Auto Ads allow Google to automatically place ads for better optimization.

export default defineNuxtConfig({
  scripts: {
    registry: {
      googleAdsense: {
        client: 'ca-pub-<your-id>', // AdSense Publisher ID
        autoAds: true, // Enable Auto Ads
      },
    },
  },
})

<script>
(adsbygoogle = window.adsbygoogle || []).push({
  google_ad_client: "ca-pub-<your-id>",
  enable_page_level_ads: true,
});
</script>

Using <ScriptGoogleAdsense> Component

It provides a simple way to embed ads in your Nuxt app.

<template>
  <ScriptGoogleAdsense
    data-ad-client="ca-pub-<your-id>"
    data-ad-slot="1234567890"
    data-ad-format="auto"
  />
</template>

Component Props

Example Usage with data-ad-layout

To specify a layout for your ads (such as "in-article"), you can use the data-ad-layout attribute:

<template>
  <ScriptGoogleAdsense
    data-ad-client="ca-pub-<your-id>"
    data-ad-slot="1234567890"
    data-ad-format="fluid"
    data-ad-layout="in-article"
  />
</template>

How to Handle Ad-Blockers?

If a user has an ad-blocker enabled, you can show fallback content.

<template>
  <ScriptGoogleAdsense data-ad-client="ca-pub-..." data-ad-slot="...">
    <template #error>
      <!-- Fallback content -->
      <p>Please support us by disabling your ad blocker.</p>
    </template>
  </ScriptGoogleAdsense>
</template>

Using useScriptGoogleAdsense() Composable

The useScriptGoogleAdsense() composable allows fine-grain control over the AdSense script.

export function useScriptGoogleAdsense<T extends GoogleAdsenseApi>(
  _options?: GoogleAdsenseInput
) {}

See the Registry Scripts Guide for advanced usage.