fix(adsense): support in-feed layout keys

docs/content/scripts/google-adsense.md

@@ -145,12 +145,13 @@ An `ads.txt` file does not replace AdSense's site review. After publishing it, c
 | `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-ad-layout` | In-article layout (`in-article`). |
+| `data-ad-layout-key` | Layout key generated by AdSense for an in-feed unit. |
 | `data-full-width-responsive` | **Set to `true`** to make the ad responsive. |
 
 #### Example using `data-ad-layout`
 
-Set `data-ad-layout` for layouts such as `in-article`:
+Set `data-ad-layout` for an in-article unit:
 
 ```vue
 <template>
@@ -163,6 +164,21 @@ Set `data-ad-layout` for layouts such as `in-article`:
 </template>
 ```
 
+#### Example using `data-ad-layout-key`
+
+Copy the layout key from the in-feed unit generated by AdSense:
+
+```vue
+<template>
+ <ScriptGoogleAdsense
+ data-ad-client="ca-pub-<your-id>"
+ data-ad-slot="1234567890"
+ data-ad-format="fluid"
+ data-ad-layout-key="-6t+ed+2i-1n-4w"
+ />
+</template>
+```
+
 ## Handling ad blockers
 
 Use the `error` slot for visitors whose ad blocker stops the script:

packages/script/src/registry-types.json

@@ -306,7 +306,7 @@
  {
  "name": "ScriptGoogleAdsenseProps",
  "kind": "interface",
- "code": "interface ScriptGoogleAdsenseProps {\n dataAdClient: string\n dataAdSlot: string\n dataAdFormat?: 'auto' | 'rectangle' | 'vertical' | 'horizontal' | 'fluid' | 'autorelaxed'\n dataAdLayout?: 'in-article' | 'in-feed' | 'fixed'\n dataFullWidthResponsive?: boolean\n /**\n * Defines the trigger event to load the script.\n */\n trigger?: ElementScriptTrigger\n}"
+ "code": "interface ScriptGoogleAdsenseProps {\n dataAdClient: string\n dataAdSlot: string\n dataAdFormat?: 'auto' | 'rectangle' | 'vertical' | 'horizontal' | 'fluid' | 'autorelaxed'\n dataAdLayout?: 'in-article'\n dataAdLayoutKey?: string\n dataFullWidthResponsive?: boolean\n /**\n * Defines the trigger event to load the script.\n */\n trigger?: ElementScriptTrigger\n}"
  },
  {
  "name": "ScriptGoogleAdsenseEvents",
@@ -4545,7 +4545,12 @@
  },
  {
  "name": "dataAdLayout",
- "type": "'in-article' | 'in-feed' | 'fixed'",
+ "type": "'in-article'",
+ "required": false
+ },
+ {
+ "name": "dataAdLayoutKey",
+ "type": "string",
  "required": false
  },
  {

packages/script/src/runtime/components/ScriptGoogleAdsense.vue

@@ -10,7 +10,8 @@ const props = withDefaults(defineProps<{
  dataAdClient: string
  dataAdSlot: string
  dataAdFormat?: 'auto' | 'rectangle' | 'vertical' | 'horizontal' | 'fluid' | 'autorelaxed'
- dataAdLayout?: 'in-article' | 'in-feed' | 'fixed'
+ dataAdLayout?: 'in-article'
+ dataAdLayoutKey?: string
  dataFullWidthResponsive?: boolean
  /**
  * Defines the trigger event to load the script.
@@ -89,6 +90,7 @@ const rootAttrs = computed(() => {
  :data-ad-slot="dataAdSlot"
  :data-ad-format="dataAdFormat"
  :data-ad-layout="dataAdLayout"
+ :data-ad-layout-key="dataAdLayoutKey"
  :data-full-width-responsive="dataFullWidthResponsive"
  v-bind="rootAttrs"
  />

test/nuxt-runtime/google-adsense.nuxt.test.ts

@@ -0,0 +1,44 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import ScriptGoogleAdsense from '../../packages/script/src/runtime/components/ScriptGoogleAdsense.vue'
+
+const mocks = vi.hoisted(() => ({
+ status: { __v_isRef: true, value: 'loaded' },
+ useScriptGoogleAdsense: vi.fn(),
+ useScriptTriggerElement: vi.fn(() => () => {}),
+}))
+
+vi.mock('../../packages/script/src/runtime/composables/useScriptTriggerElement', () => ({
+ useScriptTriggerElement: mocks.useScriptTriggerElement,
+}))
+
+vi.mock('../../packages/script/src/runtime/registry/google-adsense', () => ({
+ useScriptGoogleAdsense: mocks.useScriptGoogleAdsense,
+}))
+
+describe('google adsense component', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mocks.useScriptGoogleAdsense.mockReturnValue({ status: mocks.status })
+ window.adsbygoogle = []
+ })
+
+ it('renders the in-feed layout key on the ad unit', async () => {
+ const wrapper = await mountSuspended(ScriptGoogleAdsense, {
+ props: {
+ dataAdClient: 'ca-pub-123',
+ dataAdSlot: '456',
+ dataAdFormat: 'fluid',
+ dataAdLayoutKey: '-6t+ed+2i-1n-4w',
+ },
+ })
+
+ expect({
+ adUnit: wrapper.get('ins').attributes('data-ad-layout-key'),
+ wrapper: wrapper.attributes('data-ad-layout-key'),
+ }).toEqual({
+ adUnit: '-6t+ed+2i-1n-4w',
+ wrapper: undefined,
+ })
+ })
+})