Google Adsense

Google Adsense allows you to monetize your website by displaying ads.

Nuxt Scripts provides a useScriptGoogleAdsense composable and a headless ScriptGoogleAdsense component to interact with the Google Adsense.

ScriptGoogleAdsense

The ScriptGoogleAdsense component is a wrapper around the useScriptGoogleAdsense composable. It provides a simple way to embed ads in your Nuxt app.

<template>
  <ScriptGoogleAdsense
    data-ad-client="ca-pub-..."
    data-ad-slot="..."
  />
</template>

Handling Ad-blockers

You can use these hooks to add a fallback when the Google Adsense script is blocked.

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

Component API

See the Facade Component API for full props, events, and slots.

Props

The ScriptGoogleAdsense component supports all props that Google Adsense supports on the <ins> tag. See the Ad tags documentation for more information.

At a minimum you must provide the following tags:

• data-ad-client: The Google Adsense ID.
• data-ad-slot: The slot ID.

useScriptGoogleAdsense

The useScriptGoogleAdsense composable lets you have fine-grain control over the Google Adsense script.

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

Please follow the Registry Scripts guide to learn more about advanced usage.

Site Ownership Verification

When a client is provided, a meta tag will be inserted on the page so that Google can verify your site ownership.

const adsense = useScriptGoogleAdsense({
  client: 'ca-pub-<your-id>',
})

The generated meta tag will look like this:

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

GoogleAdsenseApi

export interface GoogleAdsenseApi {
  adsbygoogle: any[] & { loaded: boolean }
}

GoogleAdsenseInput

export const GoogleAdsenseOptions = object({
  /**
   * The Google Adsense ID.
   */
  client: optional(string()),
})