fix(adsense): support in-feed layout keys (#874)

Author: harlan-zw

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'
+importScriptGoogleAdsensefrom'../../packages/script/src/runtime/components/ScriptGoogleAdsense.vue'
+
+constmocks=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()=>{
+constwrapper=awaitmountSuspended(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,
+})
+})
+})