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 the script is automatically loaded 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)

Your Google AdSense Publisher ID (also known as ca-pub-XXXXXXX) can be found 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 a client is provided, a meta tag will be inserted on the page automatically 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.

GoogleAdsenseApi Interface

This interface defines the structure of the Google Adsense API for better TypeScript support.

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

GoogleAdsenseInput

You can define the input options for the useScriptGoogleAdsense composable using the following structure:

export const GoogleAdsenseOptions = object({
  /**
   * The Google Adsense Publisher ID.
   */
  client: optional(string()),
  /**
   * Enable or disable Auto Ads.
   */
  autoAds: optional(boolean()),
});