diff --git a/docs/content/scripts/ads/google-adsense.md b/docs/content/scripts/ads/google-adsense.md index bb81746e..4dc5cd7e 100644 --- a/docs/content/scripts/ads/google-adsense.md +++ b/docs/content/scripts/ads/google-adsense.md @@ -12,91 +12,159 @@ links: size: xs --- -[Google Adsense](https://www.google.com/adsense/start/) allows you to monetize your website by displaying relevant ads from Google. +[Google AdSense](https://www.google.com/adsense/start/) allows you to monetize your website by displaying relevant ads from Google. -Nuxt Scripts provides a `useScriptGoogleAdsense` composable and a headless `ScriptGoogleAdsense` component to interact with Google Adsense. +Nuxt Scripts provides: + +- `useScriptGoogleAdsense`: A composable to manage Google AdSense dynamically. +- ``: A headless component to embed ads directly in your Nuxt app. ## Global Setup -You can configure Google Adsense globally in your `nuxt.config.ts` file so the script is automatically loaded on all pages. +You can configure Google AdSense **globally** in your `nuxt.config.ts` so that the script is automatically loaded on all pages. ```ts [nuxt.config.ts] export default defineNuxtConfig({ scripts: { registry: { googleAdsense: { - client: 'ca-pub-', // Your Google AdSense Publisher ID + client: "ca-pub-", // Your Google AdSense Publisher ID autoAds: true, // Enable Auto Ads - } - } - } -}) + }, + }, + }, +}); ``` -## Where to Find `` -Your **Google AdSense Publisher ID** (also known as `ca-pub-XXXXXXX`) can be found in your **Google AdSense Account**: +## Where to Find `` (Publisher ID) -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 `` in the config above with your actual ID. +Your **Google AdSense Publisher ID** (also known as `ca-pub-XXXXXXX`) can be found in your **Google AdSense Account**: -> **Note**: You can also manage Auto Ads settings directly from [Google Adsense](https://adsense.google.com/start/), where you can control ad types, placements, and optimization for higher revenue. +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 `` in the config above with your actual ID. -## Site Ownership Verification +::callout{icon="i-heroicons-light-bulb" to="https://adsense.google.com/start/" target="_blank"} +You can also manage **Auto Ads settings** from your **Google AdSense Dashboard** to control *ad types, placements, and revenue optimization*. +:: -### Using *meta tag* for Verification -When a `client` is provided, a **meta tag** will be inserted on the page so that Google can verify your site ownership. +## Site Ownership Verification -```ts -const adsense = useScriptGoogleAdsense({ - client: 'ca-pub-', -}) -``` +### 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. + +::tabs + ::div + --- + label: Example + icon: i-heroicons-code-bracket-square + --- + ```ts [nuxt.config.ts] + export default defineNuxtConfig({ + scripts: { + registry: { + googleAdsense: { + client: "ca-pub-", // AdSense Publisher ID + }, + }, + }, + }); + ``` + :: + ::div + --- + label: Output + icon: i-heroicons-magnifying-glass-circle + --- + ```html + + ``` + :: +:: -The generated meta tag will look like this: +### Using `ads.txt` for Verification -```html - -``` +Google recommends adding an `ads.txt` file for **ad revenue eligibility**. -### Using `ads.txt` for Verification -Alternatively, add an `ads.txt` file to your `public/` directory to ensure ad revenue eligibility. +#### Steps: 1. Create a new file: `public/ads.txt` 2. Add the following content: - -```plaintext -google.com, pub-, DIRECT, f08c47fec0942fa0 -``` - + ```plaintext + google.com, pub-, DIRECT, f08c47fec0942fa0 + ``` 3. Replace `` with your **AdSense Publisher ID**. -> **Why is `ads.txt` important?** -> Adding this file helps prevent **ad fraud** and ensures that only your site can display your ads. - -## `ScriptGoogleAdsense` Component - -The `ScriptGoogleAdsense` component is a wrapper around the `useScriptGoogleAdsense` composable. It provides a simple way to embed ads in your Nuxt app. +::callout{icon="i-heroicons-light-bulb"} +**Why use `ads.txt`?** It helps **prevent ad fraud** and ensures that **only your site** can display your ads. +:: + +## Enabling Auto Ads + +Auto Ads allow Google to **automatically** place ads for **better optimization**. + +::tabs + ::div + --- + label: Example + icon: i-heroicons-code-bracket-square + --- + ```ts [nuxt.config.ts] + export default defineNuxtConfig({ + scripts: { + registry: { + googleAdsense: { + client: "ca-pub-", // AdSense Publisher ID + autoAds: true, // Enable Auto Ads + }, + }, + }, + }); + ``` + :: + ::div + --- + label: Output + icon: i-heroicons-magnifying-glass-circle + --- + ```html + + ``` + :: +:: + +## Using `ScriptGoogleAdsense` Component + +It provides a simple way to **embed ads** in your Nuxt app. ```vue ``` ### Component Props -- `data-ad-client`: **(Required)** Your **Google Adsense Publisher ID** (`ca-pub-XXXXXXXXXX`). -- `data-ad-slot`: **(Required)** Your **Ad Slot ID** (available in AdSense dashboard). -- `data-ad-format`: Ad format type (`auto`, `rectangle`, `horizontal`, `vertical`, `fluid`, `autorelaxed`). -- `data-ad-layout`: Layout (`in-article`, `in-feed`, `fixed`). -- `data-full-width-responsive`: **Set to `true`** to make the ad responsive. +| Prop | Description | +| ---------------------------- | --------------------------------------------------------------------- | +| `data-ad-client` | Your **Google Adsense Publisher ID**(`ca-pub-XXXXXXXXXX`). | +| `data-ad-slot` | Your **Ad Slot ID** (available in AdSense dashboard). | +| `data-ad-format` | Ad format type (`auto`, `rectangle`, `horizontal`, `vertical`, `fluid`, `autorelaxed`). | +| `data-ad-layout` | Layout (`in-article`, `in-feed`, `fixed`). | +| `data-full-width-responsive` | **Set to `true`** to make the ad responsive. | -### Example Usage with `data-ad-layout` +#### 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: @@ -111,30 +179,29 @@ To specify a layout for your ads (such as "in-article"), you can use the `data-a ``` -### How to Handle Ad-Blockers? +## How to Handle Ad-Blockers? -You can use these hooks to add a fallback when the Google Adsense script is blocked. +If a user has an **ad-blocker enabled**, you can show **fallback content**. ```vue ``` -## `useScriptGoogleAdsense` Composable +## Using `useScriptGoogleAdsense` Composable -The `useScriptGoogleAdsense` composable gives fine-grain control over the Adsense script management. +The `useScriptGoogleAdsense` composable allows **fine-grain control** over the AdSense script. ```ts -export function useScriptGoogleAdsense(_options?: GoogleAdsenseInput) {} +export function useScriptGoogleAdsense( + _options?: GoogleAdsenseInput +) {} ``` See the [Registry Scripts Guide](/docs/guides/registry-scripts) for advanced usage. @@ -145,7 +212,7 @@ This interface defines the structure of the Google Adsense API for better TypeSc ```ts export interface GoogleAdsenseApi { - adsbygoogle: any[] & { loaded: boolean } + adsbygoogle: any[] & { loaded: boolean }; } ``` @@ -163,5 +230,9 @@ export const GoogleAdsenseOptions = object({ * Enable or disable Auto Ads. */ autoAds: optional(boolean()), -}) +}); ``` + +::callout{icon="i-heroicons-light-bulb" to="https://support.google.com/adsense" target="_blank"} +Need more help? Check out the official **Google AdSense Guide** +:: diff --git a/playground/pages/index.vue b/playground/pages/index.vue index b1583695..2f9e45fe 100644 --- a/playground/pages/index.vue +++ b/playground/pages/index.vue @@ -40,7 +40,7 @@ const thirdParties = [ }, { name: 'Matomo Analytics', - path: '/third-parties/matomo-analytics', + path: '/third-parties/matomo-analytics/default', }, { name: 'Hotjar', diff --git a/src/runtime/registry/google-adsense.ts b/src/runtime/registry/google-adsense.ts index cdab9f6a..24a17840 100644 --- a/src/runtime/registry/google-adsense.ts +++ b/src/runtime/registry/google-adsense.ts @@ -36,7 +36,7 @@ export function useScriptGoogleAdsense(_options?: Go // Note: inputs.useScriptInput is not usable, needs to be normalized return useRegistryScript('googleAdsense', options => ({ scriptInput: { - src: `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js${options?.client ? `?client=${options.client}` : ''}`, + src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', }, schema: import.meta.dev ? GoogleAdsenseOptions : undefined, scriptOptions: { @@ -46,26 +46,25 @@ export function useScriptGoogleAdsense(_options?: Go beforeInit() { if (options?.client) { useHead({ + // Add meta tag for Google Adsense account meta: [ { name: 'google-adsense-account', - content: options?.client, + content: options.client, }, ], // Inject Auto Ads script dynamically - script: options.autoAds - ? [ - { - innerHTML: ` - (adsbygoogle = window.adsbygoogle || []).push({ - google_ad_client: "${options.client}", - enable_page_level_ads: true - }); - `, - type: 'text/javascript', - }, - ] - : [], + script: [ + { + innerHTML: ` + (adsbygoogle = window.adsbygoogle || []).push({ + google_ad_client: "${options.client}", + enable_page_level_ads: ${options.autoAds ?? false} + }); + `, + type: 'text/javascript', + }, + ], }) } },