React整合Hilltop廣告教學
從零整合 Hilltop 廣告到 React / Next.js 專案
在現代網站中，廣告不只是收益來源，也會直接影響使用者體驗。 Hilltop Ads 提供的是「直接插入 script」的整合方式， 但在 React / Next.js 專案中，若照官方範例直接貼 script， 往往會造成 hydration 問題、重複載入，甚至出現奇怪的錯誤訊息。
本篇將示範如何正確地將 Hilltop 廣告元件化， 讓它在 Next.js（App Router / Client Component）中穩定運作， 同時避免版面跑版與 scrollbar 問題。
為什麼不能直接貼 Hilltop script？
Hilltop 官方提供的 script 寫法，本質上是：
- 假設執行環境是純 HTML（非 React）
- 會依賴
document.scripts與插入順序 - 可能在載入初期呼叫
performance.mark()
在 Next.js 中若直接貼上，常見問題包含：
- 首次載入出現
Performance mark does not exist錯誤 - Fast Refresh / re-render 導致 script 重複執行
- 廣告 iframe 比容器大 1~2px，產生 scrollbar
正確做法：用 Client Component 封裝
核心原則只有三個：
- 只在 client side 載入（
'use client'） - 確保 script 只執行一次
- 外層容器嚴格限制尺寸並隱藏 overflow
Hilltop 廣告元件實作
'use client'
import { Box } from '@mui/material'
interface HilltopAdsProps {
width?: number
height?: number
}
const HilltopAdsComponent = ({ width = 300, height = 250 }: HilltopAdsProps) => {
const html = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<script>
(function(jeu){
var d = document,
s = d.createElement('script'),
l = d.scripts[d.scripts.length - 1];
s.settings = jeu || {};
s.src = "XXX";
s.async = true;
s.referrerPolicy = 'no-referrer-when-downgrade';
l.parentNode.insertBefore(s, l);
})({});
</script>
</body>
</html>
`;
return (
<Box
sx={{
width,
height,
overflow: 'hidden',
marginY: '12px',
}}
>
<iframe
srcDoc={html}
width={width}
height={height}
sandbox="allow-scripts allow-same-origin"
style={{
border: 'none',
display: 'block',
}}
/>
</Box>
)
}
export default HilltopAdsComponent
使用方式
在任何 client component 中直接使用即可：
<HilltopAdsComponent width={300} height={250} />為什麼這個版本不會出現 scrollbar？
- iframe 與外層 Box 寬高完全一致
overflow: hidden防止 1px 誤差display: block避免 inline iframe 造成基線空隙- HTML / body 明確設為 100% 且無 margin
小結：在 Next.js 中整合第三方廣告的正確姿勢
在 React / Next.js 中整合第三方廣告， 關鍵不是「能不能顯示」，而是能不能穩定顯示。 透過 client component + iframe 隔離， 可以有效避免 hydration、效能標記錯誤與版面跑版問題， 這也是目前整合 Hilltop Ads 最安全的方式。
相關文章
能不能看到圖，決定該用哪個 AI
ricky - 2026-08-22T09:12:17.255607Z
從 10 張照片寫食記這種任務的本質是「看」——多模態 agent 能挑圖讀價目板寫真 alt，純文字 agent 只會盲挑瞎編。
Hilltop 廣告實務指南：創業者網站快速變現策略
ricky - 2025-12-28T10:21:48Z
本篇將介紹 Hilltop 廣告如何協助網站或個人專案快速變現，強調低門檻出金、操作簡單且穩定，並示範在 React/Next.js 中整合廣告元件，以及提供推薦連結增加收益。
幫旅遊部落格加上「訂閱電子報」
ricky - 2026-08-22T09:12:14.065632Z
把旅遊部落格的訂閱從只有版型接到能寄信、能退訂、發文自動通知——全貌與 Gmail、單重確認等決策取捨。
訂閱電子報
隨時掌握最新的創業故事與設計開發過程
內容包含來自麒航團隊的日常分享、專業知識與工具推薦，助你了解更多創業背後的思維與技術。
麒航私房推薦
廣告區