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.

Global Setup

You can configure Google AdSense globally in your nuxt.config.ts so that Nuxt automatically loads the script on all pages.

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

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.