Google Publisher Tag 是一種 JavaScript 標籤庫，簡稱為 GPT (跟 ChatGPT 沒關係嘿~XD)，用於在網頁上展示廣告並管理廣告投放。GPT 是 Google Ad Manager 平台的重要組成部分，它提供了強大且靈活的功能，幫助網站管理者優化廣告展示，提高廣告收入
本篇文章將會介紹如何操作 Google Publisher Tag，在網站成功顯示廣告~👍
# 基本廣告位顯示設定
1. 載入 gpt.js
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>2. 初始化 googletag 對象及其命令陣列 cmd
檢查 window 對象上是否已經存在 googletag 對象，如果不存在則創建一個包含 cmd 屬性的對象。cmd 是一個陣列，用於儲存將被異步執行的命令。
window.googletag = window.googletag || { cmd: [] };3. 定義廣告版位
定義一個廣告版位，包括設置廣告單元路徑、尺寸和 HTML 元素 ID，並將廣告位添加到發布服務中。
googletag.cmd.push(() => {
googletag
.defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "banner-ad")
.addService(googletag.pubads());
googletag.enableServices();
});這段代碼將一個函數推送到 googletag.cmd 陣列，這個函數包含以下步驟：
defineSlot方法創建了一個廣告位。
參數 /6355419/Travel/Europe/France/Paris 是廣告單元的路徑，
[360, 250] 是廣告的尺寸，
banner-ad 是將顯示廣告的 HTML 元素的 ID。addService(googletag.pubads())將此廣告位添加到 Google 的廣告發布服務。enableServices()啟用所有已經添加的廣告服務，使廣告位可以正常運行。
4. 啟用廣告服務，使其可以運行
這段代碼將另一個函數推送到 googletag.cmd 陣列，這個函數包含 googletag.display(“banner-ad”) 方法。這個方法的作用是觸發在指定的 HTML 元素（ID 為 banner-ad）中顯示廣告。
googletag.cmd.push(() => {
googletag.display("banner-ad");
});5. 顯示廣告在指定的 HTML 元素中
<div id="banner-ad"></div>完整程式碼
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
googletag
.defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "banner-ad")
.addService(googletag.pubads());
googletag.enableServices();
});
</script>
</head>
<body>
<div id="banner-ad"></div>
<script>
googletag.cmd.push(() => {
googletag.display("banner-ad");
});
</script>
</body>
</html>👉 GPT 官方也提供了範例參考
# 動態切換廣告
現在有兩個 tab 分別為 ad1、ad2，我希望切換 tab 會分別出現不同的廣告，當然最簡單的做法就是直接複製兩個，並用 display: none 來做切換，不過這邊想使用不同的情境，在切換 tab 後，動態變更 id 顯示廣告
1. HTML 元素 — 切換分頁按鈕與廣告版位
首先，會有兩個 li，分別為不同的分頁，下面為廣告呈現
<ul>
<li id="ad1">AD1</li>
<li id="ad2">AD2</li>
</ul>
<div class="list">
<div id="banner-ad"></div>
</div>2. 點擊分頁，變換廣告
點擊 id 後，帶入廣告路徑、尺寸、id 參數至函式 displayAd()
document.getElementById('ad1').addEventListener('click', function() {
displayAd('/6355419/Travel/Europe/France/Paris', [300, 250], "banner-ad");
});
document.getElementById('ad2').addEventListener('click', function() {
displayAd('/22521021505/demo', [360, 293], "div-gpt-ad");
});3. 變更 id，啟用廣告
基於前面的基本做法，需注意的是要先銷毀目前已定義的廣告位，再創建新的廣告版後，再 refresh進行更新，如果沒有 refresh 將不會顯示廣告
const displayAd = (path, size, id) => {
googletag.destroySlots();
var divs = document.querySelector('.list div');
divs.id = id;
googletag.cmd.push(() => {
googletag
.defineSlot(path, size, id)
.addService(googletag.pubads());
googletag.enableServices();
googletag.display(id);
googletag.pubads().refresh();
})
}googletag.destroySlots()：銷毀當前頁面上所有已經定義的廣告位，釋放相關的內存和資源，從而提高頁面的性能googletag.pubads().refresh()：加載與更新廣告內容
完整程式碼
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || { cmd: [] };
</script>
</head>
<body>
<ul>
<li id="ad1">AD1</li>
<li id="ad2">AD2</li>
</ul>
<div class="list">
<div id="banner-ad"></div>
</div>
<script>
document.getElementById('ad1').addEventListener('click', function() {
displayAd('/6355419/Travel/Europe/France/Paris', [300, 250], "banner-ad");
});
document.getElementById('ad2').addEventListener('click', function() {
displayAd('/22521021505/demo', [360, 293], "div-gpt-ad");
});
const displayAd = (path, size, id) => {
googletag.destroySlots();
var divs = document.querySelector('.list div');
divs.id = id;
googletag.cmd.push(() => {
googletag
.defineSlot(path, size, id)
.addService(googletag.pubads());
googletag.enableServices();
googletag.display(id);
googletag.pubads().refresh();
})
}
window.addEventListener("load", () => {
displayAd('/6355419/Travel/Europe/France/Paris', [300, 250], "banner-ad");
});
</script>
</body>
</html># 結語
GPT 是一個強大且靈活的工具，它不僅能夠提高廣告投放的精準度和效果，還能夠顯著提升網站的廣告收入，Google Publisher Tag 的官方文件其實也寫得很清楚，遇到任何問題還是查找文件最快了~本篇文章就介紹到這邊，歡迎大家互相交流分享唷 😊
