SwAdNative

廣告位四要素
使用場景：內容流內原生廣告卡（列表 / 網格資訊流混排；slotKey 例 home_feed）
業界形態：Native / In-feed ads（AdSDK 格式 native）
表現形態：封面圖 + 標題 + 描述 + 廣告主 + CTA 的卡片，貼合頁面風格
打點事件：同 banner —— adImpression（IntersectionObserver 進入視窗一次）/ adClick；自動內建零組態，gate 關閉靜默 no-op
選錯場景 = 埋點 ad_type / 時機全錯。按場景選元件見廣告元件選型。

SwAdNative 是原生資訊流廣告位元件，屬廣告底座「文字卡片類」自渲染元件。渲染「圖 + 標題 + 描述 + 廣告主 + CTA」的原生卡片，融入資訊流。支援 banner-list（單列大圖卡）與 grid（多列宮格）佈局。內建曝光 / 點擊埋點。

加载中...

Props

名稱	類型	必填	預設值	說明
`items`	`SwAdItem[]`	✓	—	廣告創意陣列（用 `image`/`title`/`description`/`advertiser`/`cta`）
`slotKey`	`string`	✓	—	廣告位鍵 → `ad_slot_key`
`slotName`	`string`		`undefined`	廣告位名 → `ad_slot_name`
`pageKey`	`string`		`undefined`	頁面鍵 → `page_key`
`pageName`	`string`		`undefined`	頁面名 → `page_name`
`ratio`	`string`		`'16/9'`	卡片主圖寬高比
`radius`	`number \| string`		`8`	圓角（number=px，string 原樣透傳 SwImage，如 `'1.125rem'`）
`showAdLabel`	`boolean`		`undefined`	「廣告」合規角標；不傳時跟隨全域 `swiftConfig.ad.showLabel`（預設 `true`），顯式傳值始終優先
`layout`	`'banner-list' \| 'grid'`		`'banner-list'`	佈局：單列大圖卡 / 多列宮格
`gridColumns`	`number \| { mobile?, tablet?, desktop? }`		`2`	`grid` 列數。物件形態按斷點分檔（<768 / 768-1023 / ≥1024），缺檔就近回退（同 SwGallery columns 範式）
`gridGap`	`number \| string`		`12`	間距（number=px，string 原樣使用、可引 token）

Events

名稱	攜帶	說明
`load`	—	渲染完成
`empty`	—	`items` 為空
`impression`	`items: SwAdItem[]`	曝光（自動埋點）
`click`	`item: SwAdItem`	點擊某張卡（自動埋點）
`error`	—	渲染 / 載入錯誤

加载中...

<SwAdNative :items="feedAds" slot-key="feed_native" page-key="discover" ratio="16/9" :radius="8" show-ad-label />

<!-- 響應式列數：行動 1 列 / 平板 2 列 / 桌面 3 列 -->
<SwAdNative :items="feedAds" slot-key="feed_native" layout="grid" :grid-columns="{ mobile: 1, tablet: 2, desktop: 3 }" />

<!-- gridGap / radius 支援 string：引 token / rem -->
<SwAdNative :items="feedAds" slot-key="feed_native" layout="grid" grid-gap="1rem" radius="0.75rem" />

CSS 變數

佈局不寫內聯 style，全部經 CSS 變數落地 —— 業務可用普通 CSS 覆蓋佈局，無需 !important：

變數	預設值	說明
`--sw-ad-native-gap`	`12px`	卡片間距（對應 `gridGap`，banner-list / grid 都生效）
`--sw-ad-native-cols-mobile` / `--sw-ad-native-cols-tablet` / `--sw-ad-native-cols-desktop`	`2`	grid 三檔斷點列數（對應 `gridColumns`）

注意事項

卡片欄位：image（主圖）/ title（標題）/ description（描述）/ advertiser（廣告主）/ cta（按鈕文案），按 item 資料驅動。
埋點內建，受 tracker 雙重 gate；完整欄位見廣告底座與打點。