Skip to content

Commit 455117d

Browse files
nexoscreatorharlan-zw
nexoscreator
and
harlan-zw
authored
feat(google-adsense): add Auto Ads support and improve script injection (#366)
Co-authored-by: Harlan Wilton <[email protected]>
1 parent 8d94549 commit 455117d

File tree

4 files changed

+195
-60
lines changed

4 files changed

+195
-60
lines changed

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

Lines changed: 99 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,70 @@ links:
1212
size: xs
1313
---
1414

15-
:UAlert{title="Experimental" description="The Google Adsense integration has not been fully tested, use with caution." color="yellow" variant="soft" class="not-prose"}
15+
[Google Adsense](https://www.google.com/adsense/start/) allows you to monetize your website by displaying relevant ads from Google.
1616

17-
[Google Adsense](https://www.google.com/adsense/start/) allows you to monetize your website by displaying ads.
17+
Nuxt Scripts provides a `useScriptGoogleAdsense` composable and a headless `ScriptGoogleAdsense` component to interact with Google Adsense.
1818

19-
Nuxt Scripts provides a `useScriptGoogleAdsense` composable and a headless `ScriptGoogleAdsense` component to interact with the Google Adsense.
19+
## Global Setup
2020

21-
## ScriptGoogleAdsense
21+
You can configure Google Adsense globally in your `nuxt.config.ts` file so the script is automatically loaded on all pages.
22+
23+
```ts [nuxt.config.ts]
24+
export default defineNuxtConfig({
25+
scripts: {
26+
registry: {
27+
googleAdsense: {
28+
client: 'ca-pub-<your-id>', // Your Google AdSense Publisher ID
29+
autoAds: true, // Enable Auto Ads
30+
}
31+
}
32+
}
33+
})
34+
```
35+
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**:
38+
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.
43+
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.
45+
46+
## Site Ownership Verification
47+
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.
50+
51+
```ts
52+
const adsense = useScriptGoogleAdsense({
53+
client: 'ca-pub-<your-id>',
54+
})
55+
```
56+
57+
The generated meta tag will look like this:
58+
59+
```html
60+
<meta name="google-adsense-account" content="ca-pub-<your-id>">
61+
```
62+
63+
### Using `ads.txt` for Verification
64+
Alternatively, add an `ads.txt` file to your `public/` directory to ensure ad revenue eligibility.
65+
66+
1. Create a new file: `public/ads.txt`
67+
2. Add the following content:
68+
69+
```plaintext
70+
google.com, pub-<your-id>, DIRECT, f08c47fec0942fa0
71+
```
72+
73+
3. Replace `<your-id>` with your **AdSense Publisher ID**.
74+
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
2279

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

@@ -31,7 +88,30 @@ The `ScriptGoogleAdsense` component is a wrapper around the `useScriptGoogleAdse
3188
</template>
3289
```
3390

34-
### Handling Ad-blockers
91+
### Component Props
92+
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.
98+
99+
### Example Usage with `data-ad-layout`
100+
101+
To specify a layout for your ads (such as "in-article"), you can use the `data-ad-layout` attribute:
102+
103+
```vue
104+
<template>
105+
<ScriptGoogleAdsense
106+
data-ad-client="ca-pub-<your-id>"
107+
data-ad-slot="1234567890"
108+
data-ad-format="fluid"
109+
data-ad-layout="in-article"
110+
/>
111+
</template>
112+
```
113+
114+
### How to Handle Ad-Blockers?
35115

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

@@ -42,67 +122,46 @@ You can use these hooks to add a fallback when the Google Adsense script is bloc
42122
data-ad-slot="..."
43123
>
44124
<template #error>
45-
<!-- Fallback ad -->
125+
<!-- Fallback content -->
46126
Please support us by disabling your ad blocker.
47127
</template>
48128
</ScriptGoogleAdsense>
49129
</template>
50130
```
51131

132+
## `useScriptGoogleAdsense` Composable
52133

53-
### Component API
54-
55-
See the [Facade Component API](/docs/guides/facade-components#facade-components-api) for full props, events, and slots.
56-
57-
### Props
58-
59-
The `ScriptGoogleAdsense` component supports all props that Google Adsense supports on the `<ins>` tag. See the [Ad tags documentation](https://developers.google.com/adsense/platforms/transparent/ad-tags) for more information.
60-
61-
At a minimum you must provide the following tags:
62-
- `data-ad-client`: The Google Adsense ID.
63-
- `data-ad-slot`: The slot ID.
64-
65-
## useScriptGoogleAdsense
66-
67-
The `useScriptGoogleAdsense` composable lets you have fine-grain control over the Google Adsense script.
134+
The `useScriptGoogleAdsense` composable gives fine-grain control over the Adsense script management.
68135

69136
```ts
70137
export function useScriptGoogleAdsense<T extends GoogleAdsenseApi>(_options?: GoogleAdsenseInput) {}
71138
```
72139

73-
Please follow the [Registry Scripts](/docs/guides/registry-scripts) guide to learn more about advanced usage.
74-
75-
### Site Ownership Verification
76-
77-
When a `client` is provided, a meta tag will be inserted on the page so that Google can verify your site ownership.
78-
79-
```ts
80-
const adsense = useScriptGoogleAdsense({
81-
client: 'ca-pub-<your-id>',
82-
})
83-
```
84-
85-
The generated meta tag will look like this:
140+
See the [Registry Scripts Guide](/docs/guides/registry-scripts) for advanced usage.
86141

87-
```html
88-
<meta name="google-adsense-account" content="ca-pub-<your-id>">
89-
```
142+
## GoogleAdsenseApi Interface
90143

91-
### GoogleAdsenseApi
144+
This interface defines the structure of the Google Adsense API for better TypeScript support.
92145

93146
```ts
94147
export interface GoogleAdsenseApi {
95148
adsbygoogle: any[] & { loaded: boolean }
96149
}
97150
```
98151

99-
### GoogleAdsenseInput
152+
## GoogleAdsenseInput
153+
154+
You can define the input options for the `useScriptGoogleAdsense` composable using the following structure:
100155

101156
```ts
102157
export const GoogleAdsenseOptions = object({
103158
/**
104-
* The Google Adsense ID.
159+
* The Google Adsense Publisher ID.
105160
*/
106161
client: optional(string()),
162+
/**
163+
* Enable or disable Auto Ads.
164+
*/
165+
autoAds: optional(boolean()),
107166
})
108167
```

‎playground/pages/third-parties/google-adsense/nuxt-scripts.vue‎

Lines changed: 72 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,82 @@
1-
<script lang="ts" setup>
1+
<script setup lang="ts">
2+
import { ref, watch } from 'vue'
3+
import { useRoute, useRouter } from 'vue-router'
24
import { useHead } from '#imports'
35
46
useHead({
57
title: 'Google Adsense',
68
})
9+
10+
const route = useRoute()
11+
const router = useRouter()
12+
13+
// Get ad format from URL query, default to 'auto'
14+
const adFormat = ref<'auto' | 'rectangle' | 'horizontal' | 'vertical' | 'fluid' | 'autorelaxed'>((route.query.format as 'auto' | 'rectangle' | 'horizontal' | 'vertical' | 'fluid' | 'autorelaxed') || 'auto')
15+
16+
// Function to update ad format, modify URL, and reload page
17+
const changeAdFormat = (format: 'rectangle' | 'horizontal' | 'vertical' | 'fluid' | 'autorelaxed') => {
18+
if (adFormat.value !== format) {
19+
router.replace({ query: { format } }).then(() => {
20+
location.reload() // Force full page reload
21+
})
22+
}
23+
}
24+
25+
// Watch URL changes and update the ad format accordingly
26+
watch(() => route.query.format, (newFormat) => {
27+
if (newFormat) {
28+
adFormat.value = newFormat as 'auto' | 'rectangle' | 'horizontal' | 'vertical' | 'fluid' | 'autorelaxed'
29+
}
30+
})
731
</script>
832

933
<template>
10-
<div>
11-
<ScriptGoogleAdsense
12-
data-ad-client="ca-pub-8232083562163020"
13-
data-ad-slot="6039709756"
14-
>
15-
<template #awaitingLoad>
16-
<div class="text-white text-3xl">
17-
...waiting
18-
</div>
19-
</template>
20-
<template #loading>
21-
<div class="text-white text-3xl">
22-
...loading
23-
</div>
24-
</template>
25-
</ScriptGoogleAdsense>
34+
<div class="w-full h-full space-y-4">
35+
<!-- Buttons to Change Ad Format (With Reload) -->
36+
<div class="flex gap-4 mb-4">
37+
<button class="px-4 py-2 bg-pink-500 text-white rounded" @click="changeAdFormat('rectangle')">
38+
Rectangle Ads
39+
</button>
40+
<button class="px-4 py-2 bg-blue-500 text-white rounded" @click="changeAdFormat('horizontal')">
41+
Horizontal Ads
42+
</button>
43+
<button class="px-4 py-2 bg-green-500 text-white rounded" @click="changeAdFormat('vertical')">
44+
Vertical Ads
45+
</button>
46+
<button class="px-4 py-2 bg-purple-500 text-white rounded" @click="changeAdFormat('fluid')">
47+
Fluid Ads
48+
</button>
49+
<button class="px-4 py-2 bg-orange-500 text-white rounded" @click="changeAdFormat('autorelaxed')">
50+
Native Ads
51+
</button>
52+
</div>
53+
54+
<!-- Ad Section -->
55+
<div class="flex flex-col gap-4">
56+
<h4 class="text-white text-3xl">
57+
Selected Ad Format: {{ adFormat }}
58+
</h4>
59+
<p>
60+
Click a button to change the ad format. The page will reload to apply the changes.
61+
</p>
62+
<!-- data-ad-layout="in-article" -->
63+
<ClientOnly>
64+
<ScriptGoogleAdsense
65+
key="ad-refresh" data-ad-client="ca-pub-3940256099942544" data-ad-slot="1234567891"
66+
:data-ad-format="adFormat"
67+
>
68+
<template #awaitingLoad>
69+
<div class="text-white text-xl">
70+
...waiting
71+
</div>
72+
</template>
73+
<template #loading>
74+
<div class="text-white text-xl">
75+
...loading
76+
</div>
77+
</template>
78+
</ScriptGoogleAdsense>
79+
</ClientOnly>
80+
</div>
2681
</div>
2782
</template>

‎src/runtime/components/ScriptGoogleAdsense.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,16 @@ import type { ElementScriptTrigger } from '#nuxt-scripts/types'
88
const props = withDefaults(defineProps<{
99
dataAdClient: string
1010
dataAdSlot: string
11-
dataAdFormat?: 'auto'
11+
dataAdFormat?: 'auto' | 'rectangle' | 'vertical' | 'horizontal' | 'fluid' | 'autorelaxed'
12+
dataAdLayout?: 'in-article' | 'in-feed' | 'fixed'
1213
dataFullWidthResponsive?: boolean
1314
/**
1415
* Defines the trigger event to load the script.
1516
*/
1617
trigger?: ElementScriptTrigger
1718
}>(), {
1819
dataFullWidthResponsive: true,
20+
dataAdFormat: undefined, // Preserve previous behavior
1921
})
2022
2123
const emits = defineEmits<{
@@ -73,6 +75,7 @@ const rootAttrs = computed(() => {
7375
:data-ad-client="dataAdClient"
7476
:data-ad-slot="dataAdSlot"
7577
:data-ad-format="dataAdFormat"
78+
:data-ad-layout="dataAdLayout"
7679
:data-full-width-responsive="dataFullWidthResponsive"
7780
v-bind="rootAttrs"
7881
>

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

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import { useHead } from '@unhead/vue'
22
import { useRegistryScript } from '../utils'
3-
import { object, string, optional } from '#nuxt-scripts-validator'
3+
import { object, string, optional, boolean } from '#nuxt-scripts-validator'
44
import type { RegistryScriptInput } from '#nuxt-scripts/types'
55

66
export const GoogleAdsenseOptions = object({
77
/**
88
* The Google Adsense ID.
99
*/
1010
client: optional(string()),
11+
/**
12+
* Enable or disable Auto Ads.
13+
*/
14+
autoAds: optional(boolean()),
1115
})
1216

1317
export type GoogleAdsenseInput = RegistryScriptInput<typeof GoogleAdsenseOptions, true, false, false>
@@ -32,7 +36,7 @@ export function useScriptGoogleAdsense<T extends GoogleAdsenseApi>(_options?: Go
3236
// Note: inputs.useScriptInput is not usable, needs to be normalized
3337
return useRegistryScript<T, typeof GoogleAdsenseOptions>('googleAdsense', options => ({
3438
scriptInput: {
35-
src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
39+
src: `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js${options?.client ? `?client=${options.client}` : ''}`,
3640
},
3741
schema: import.meta.dev ? GoogleAdsenseOptions : undefined,
3842
scriptOptions: {
@@ -48,6 +52,20 @@ export function useScriptGoogleAdsense<T extends GoogleAdsenseApi>(_options?: Go
4852
content: options?.client,
4953
},
5054
],
55+
// 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+
: [],
5169
})
5270
}
5371
},

0 commit comments

Comments
 (0)