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 最安全的方式。
相關文章
讓部落格養活自己：聯盟行銷與廣告實戰指南
ricky - 2025-05-25T15:06:09Z
寫部落格能賺錢嗎？靠聯盟行銷與廣告變現，讓內容真正「養活自己」！這篇文章完整整理如何從零導入聯盟平台、選擇合適的廣告工具，還包含實際變現心得與常見地雷。如果你也希望經營的部落格能夠自給自足，這篇實戰教...
一鍵發版背後：三個 repo 的分工
ricky - 2026-07-09T02:00:00Z
一顆「發版」按鈕，背後牽動 fleet-console、部署後端與目標服務三個 repo。本文拆解版本號為什麼不能由前端計算、docker build --build-arg 如何無條件帶入 APP_...
把流程寫進工具，而不是寫進腦袋
ricky - 2026-07-09T02:05:00Z
版本號手改的日子裡，我踩過三種坑，而它們都不是技術問題，是知識存放位置的問題。從自動化、預設值到「移除選項」，談談一人工作室為什麼也需要工程文化，以及工具擋不住的那一類錯。
訂閱電子報
隨時掌握最新的創業故事與設計開發過程
內容包含來自麒航團隊的日常分享、專業知識與工具推薦，助你了解更多創業背後的思維與技術。
麒航私房推薦
廣告區