Skip to content

Commit 1ec5ec3

Browse files
nexoscreatornexoscreator
authored
fix(googleAdsense): improve initialization & auto ads handling (#389)
1 parent d58587f commit 1ec5ec3

File tree

3 files changed

+146
-76
lines changed

3 files changed

+146
-76
lines changed

‎docs/content/scripts/ads/google-adsense.md‎

Lines changed: 131 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -12,91 +12,159 @@ links:
1212
size: xs
1313
---
1414

15-
[Google Adsense](https://www.google.com/adsense/start/) allows you to monetize your website by displaying relevant ads from Google.
15+
[Google AdSense](https://www.google.com/adsense/start/) allows you to monetize your website by displaying relevant ads from Google.
1616

17-
Nuxt Scripts provides a `useScriptGoogleAdsense` composable and a headless `ScriptGoogleAdsense` component to interact with Google Adsense.
17+
Nuxt Scripts provides:
18+
19+
- `useScriptGoogleAdsense`: A composable to manage Google AdSense dynamically.
20+
- `<ScriptGoogleAdsense>`: A headless component to embed ads directly in your Nuxt app.
1821

1922
## Global Setup
2023

21-
You can configure Google Adsense globally in your `nuxt.config.ts` file so the script is automatically loaded on all pages.
24+
You can configure Google AdSense **globally** in your `nuxt.config.ts` so that the script is automatically loaded on all pages.
2225

2326
```ts [nuxt.config.ts]
2427
export default defineNuxtConfig({
2528
scripts: {
2629
registry: {
2730
googleAdsense: {
28-
client: 'ca-pub-<your-id>', // Your Google AdSense Publisher ID
31+
client: "ca-pub-<your-id>", // Your Google AdSense Publisher ID
2932
autoAds: true, // Enable Auto Ads
30-
}
31-
}
32-
}
33-
})
33+
},
34+
},
35+
},
36+
});
3437
```
3538

36-
## Where to Find `<your-id>`
37-
Your **Google AdSense Publisher ID** (also known as `ca-pub-XXXXXXX`) can be found in your **Google AdSense Account**:
39+
## Where to Find `<your-id>` (Publisher ID)
3840

39-
1. Log in to your **Google AdSense** account.
40-
2. Navigate to **Account > Settings** (click on your profile icon > "Account information").
41-
3. Locate the **Publisher ID** under **Account Information**.
42-
4. Replace `<your-id>` in the config above with your actual ID.
41+
Your **Google AdSense Publisher ID** (also known as `ca-pub-XXXXXXX`) can be found in your **Google AdSense Account**:
4342

44-
> **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.
43+
1. Log in to your **Google AdSense** account.
44+
2. Navigate to **Account > Settings** (click on your profile icon > "Account information").
45+
3. Locate the **Publisher ID** under **Account Information**.
46+
4. Replace `<your-id>` in the config above with your actual ID.
4547

46-
## Site Ownership Verification
48+
::callout{icon="i-heroicons-light-bulb" to="https://adsense.google.com/start/" target="_blank"}
49+
You can also manage **Auto Ads settings** from your **Google AdSense Dashboard** to control *ad types, placements, and revenue optimization*.
50+
::
4751

48-
### Using *meta tag* for Verification
49-
When a `client` is provided, a **meta tag** will be inserted on the page so that Google can verify your site ownership.
52+
## Site Ownership Verification
5053

51-
```ts
52-
const adsense = useScriptGoogleAdsense({
53-
client: 'ca-pub-<your-id>',
54-
})
55-
```
54+
### Automatic Meta Tag Insertion
55+
56+
If a `client` is provided, a **meta tag** will be inserted on the page **automatically** for Google to verify your site ownership.
57+
58+
::tabs
59+
::div
60+
---
61+
label: Example
62+
icon: i-heroicons-code-bracket-square
63+
---
64+
```ts [nuxt.config.ts]
65+
export default defineNuxtConfig({
66+
scripts: {
67+
registry: {
68+
googleAdsense: {
69+
client: "ca-pub-<your-id>", // AdSense Publisher ID
70+
},
71+
},
72+
},
73+
});
74+
```
75+
::
76+
::div
77+
---
78+
label: Output
79+
icon: i-heroicons-magnifying-glass-circle
80+
---
81+
```html
82+
<meta name="google-adsense-account" content="ca-pub-<your-id>" />
83+
```
84+
::
85+
::
5686

57-
The generated meta tag will look like this:
87+
### Using `ads.txt` for Verification
5888

59-
```html
60-
<meta name="google-adsense-account" content="ca-pub-<your-id>">
61-
```
89+
Google recommends adding an `ads.txt` file for **ad revenue eligibility**.
6290

63-
### Using `ads.txt` for Verification
64-
Alternatively, add an `ads.txt` file to your `public/` directory to ensure ad revenue eligibility.
91+
#### Steps:
6592

6693
1. Create a new file: `public/ads.txt`
6794
2. Add the following content:
68-
69-
```plaintext
70-
google.com, pub-<your-id>, DIRECT, f08c47fec0942fa0
71-
```
72-
95+
```plaintext
96+
google.com, pub-<your-id>, DIRECT, f08c47fec0942fa0
97+
```
7398
3. Replace `<your-id>` with your **AdSense Publisher ID**.
7499

75-
> **Why is `ads.txt` important?**
76-
> Adding this file helps prevent **ad fraud** and ensures that only your site can display your ads.
77-
78-
## `ScriptGoogleAdsense` Component
79-
80-
The `ScriptGoogleAdsense` component is a wrapper around the `useScriptGoogleAdsense` composable. It provides a simple way to embed ads in your Nuxt app.
100+
::callout{icon="i-heroicons-light-bulb"}
101+
**Why use `ads.txt`?** It helps **prevent ad fraud** and ensures that **only your site** can display your ads.
102+
::
103+
104+
## Enabling Auto Ads
105+
106+
Auto Ads allow Google to **automatically** place ads for **better optimization**.
107+
108+
::tabs
109+
::div
110+
---
111+
label: Example
112+
icon: i-heroicons-code-bracket-square
113+
---
114+
```ts [nuxt.config.ts]
115+
export default defineNuxtConfig({
116+
scripts: {
117+
registry: {
118+
googleAdsense: {
119+
client: "ca-pub-<your-id>", // AdSense Publisher ID
120+
autoAds: true, // Enable Auto Ads
121+
},
122+
},
123+
},
124+
});
125+
```
126+
::
127+
::div
128+
---
129+
label: Output
130+
icon: i-heroicons-magnifying-glass-circle
131+
---
132+
```html
133+
<script>
134+
(adsbygoogle = window.adsbygoogle || []).push({
135+
google_ad_client: "ca-pub-<your-id>",
136+
enable_page_level_ads: true,
137+
});
138+
</script>
139+
```
140+
::
141+
::
142+
143+
## Using `ScriptGoogleAdsense` Component
144+
145+
It provides a simple way to **embed ads** in your Nuxt app.
81146

82147
```vue
83148
<template>
84149
<ScriptGoogleAdsense
85-
data-ad-client="ca-pub-..."
86-
data-ad-slot="..."
150+
data-ad-client="ca-pub-<your-id>"
151+
data-ad-slot="1234567890"
152+
data-ad-format="auto"
87153
/>
88154
</template>
89155
```
90156

91157
### Component Props
92158

93-
- `data-ad-client`: **(Required)** Your **Google Adsense Publisher ID** (`ca-pub-XXXXXXXXXX`).
94-
- `data-ad-slot`: **(Required)** Your **Ad Slot ID** (available in AdSense dashboard).
95-
- `data-ad-format`: Ad format type (`auto`, `rectangle`, `horizontal`, `vertical`, `fluid`, `autorelaxed`).
96-
- `data-ad-layout`: Layout (`in-article`, `in-feed`, `fixed`).
97-
- `data-full-width-responsive`: **Set to `true`** to make the ad responsive.
159+
| Prop | Description |
160+
| ---------------------------- | --------------------------------------------------------------------- |
161+
| `data-ad-client` | Your **Google Adsense Publisher ID**(`ca-pub-XXXXXXXXXX`). |
162+
| `data-ad-slot` | Your **Ad Slot ID** (available in AdSense dashboard). |
163+
| `data-ad-format` | Ad format type (`auto`, `rectangle`, `horizontal`, `vertical`, `fluid`, `autorelaxed`). |
164+
| `data-ad-layout` | Layout (`in-article`, `in-feed`, `fixed`). |
165+
| `data-full-width-responsive` | **Set to `true`** to make the ad responsive. |
98166

99-
### Example Usage with `data-ad-layout`
167+
#### Example Usage with `data-ad-layout`
100168

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

@@ -111,30 +179,29 @@ To specify a layout for your ads (such as "in-article"), you can use the `data-a
111179
</template>
112180
```
113181

114-
### How to Handle Ad-Blockers?
182+
## How to Handle Ad-Blockers?
115183

116-
You can use these hooks to add a fallback when the Google Adsense script is blocked.
184+
If a user has an **ad-blocker enabled**, you can show **fallback content**.
117185

118186
```vue
119187
<template>
120-
<ScriptGoogleAdsense
121-
data-ad-client="ca-pub-..."
122-
data-ad-slot="..."
123-
>
188+
<ScriptGoogleAdsense data-ad-client="ca-pub-..." data-ad-slot="...">
124189
<template #error>
125190
<!-- Fallback content -->
126-
Please support us by disabling your ad blocker.
191+
<p>Please support us by disabling your ad blocker.</p>
127192
</template>
128193
</ScriptGoogleAdsense>
129194
</template>
130195
```
131196

132-
## `useScriptGoogleAdsense` Composable
197+
## Using `useScriptGoogleAdsense` Composable
133198

134-
The `useScriptGoogleAdsense` composable gives fine-grain control over the Adsense script management.
199+
The `useScriptGoogleAdsense` composable allows **fine-grain control** over the AdSense script.
135200

136201
```ts
137-
export function useScriptGoogleAdsense<T extends GoogleAdsenseApi>(_options?: GoogleAdsenseInput) {}
202+
export function useScriptGoogleAdsense<T extends GoogleAdsenseApi>(
203+
_options?: GoogleAdsenseInput
204+
) {}
138205
```
139206

140207
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
145212

146213
```ts
147214
export interface GoogleAdsenseApi {
148-
adsbygoogle: any[] & { loaded: boolean }
215+
adsbygoogle: any[] & { loaded: boolean };
149216
}
150217
```
151218

@@ -163,5 +230,9 @@ export const GoogleAdsenseOptions = object({
163230
* Enable or disable Auto Ads.
164231
*/
165232
autoAds: optional(boolean()),
166-
})
233+
});
167234
```
235+
236+
::callout{icon="i-heroicons-light-bulb" to="https://support.google.com/adsense" target="_blank"}
237+
Need more help? Check out the official **Google AdSense Guide**
238+
::

‎playground/pages/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const thirdParties = [
4040
},
4141
{
4242
name: 'Matomo Analytics',
43-
path: '/third-parties/matomo-analytics',
43+
path: '/third-parties/matomo-analytics/default',
4444
},
4545
{
4646
name: 'Hotjar',

‎src/runtime/registry/google-adsense.ts‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export function useScriptGoogleAdsense<T extends GoogleAdsenseApi>(_options?: Go
3636
// Note: inputs.useScriptInput is not usable, needs to be normalized
3737
return useRegistryScript<T, typeof GoogleAdsenseOptions>('googleAdsense', options => ({
3838
scriptInput: {
39-
src: `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js${options?.client ? `?client=${options.client}` : ''}`,
39+
src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
4040
},
4141
schema: import.meta.dev ? GoogleAdsenseOptions : undefined,
4242
scriptOptions: {
@@ -46,26 +46,25 @@ export function useScriptGoogleAdsense<T extends GoogleAdsenseApi>(_options?: Go
4646
beforeInit() {
4747
if (options?.client) {
4848
useHead({
49+
// Add meta tag for Google Adsense account
4950
meta: [
5051
{
5152
name: 'google-adsense-account',
52-
content: options?.client,
53+
content: options.client,
5354
},
5455
],
5556
// Inject Auto Ads script dynamically
56-
script: options.autoAds
57-
? [
58-
{
59-
innerHTML: `
60-
(adsbygoogle = window.adsbygoogle || []).push({
61-
google_ad_client: "${options.client}",
62-
enable_page_level_ads: true
63-
});
64-
`,
65-
type: 'text/javascript',
66-
},
67-
]
68-
: [],
57+
script: [
58+
{
59+
innerHTML: `
60+
(adsbygoogle = window.adsbygoogle || []).push({
61+
google_ad_client: "${options.client}",
62+
enable_page_level_ads: ${options.autoAds ?? false}
63+
});
64+
`,
65+
type: 'text/javascript',
66+
},
67+
],
6968
})
7069
}
7170
},

0 commit comments

Comments
 (0)