Lala Code

Lala 的前端大補帖，歡迎一起鑽研前端技術😊

0%

Google Publisher Tag 教學-顯示廣告版位程式碼

發表於 分類於 Disqus：

Google Publisher Tag

Google Publisher Tag 是一種 JavaScript 標籤庫，簡稱為 GPT (跟 ChatGPT 沒關係嘿~XD)，用於在網頁上展示廣告並管理廣告投放。GPT 是 Google Ad Manager 平台的重要組成部分，它提供了強大且靈活的功能，幫助網站管理者優化廣告展示，提高廣告收入

本篇文章將會介紹如何操作 Google Publisher Tag，在網站成功顯示廣告~👍



# 基本廣告位顯示設定

1. 載入 gpt.js

1
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>


2. 初始化 googletag 對象及其命令陣列 cmd

檢查 window 對象上是否已經存在 googletag 對象，如果不存在則創建一個包含 cmd 屬性的對象。cmd 是一個陣列，用於儲存將被異步執行的命令。

1
window.googletag = window.googletag || { cmd: [] };


3. 定義廣告版位

定義一個廣告版位，包括設置廣告單元路徑、尺寸和 HTML 元素 ID，並將廣告位添加到發布服務中。

1
2
3
4
5
6
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）中顯示廣告。

1
2
3
googletag.cmd.push(() => {
  googletag.display("banner-ad");
});


5.顯示廣告在指定的 HTML 元素中

1
<div id="banner-ad"></div>


完整程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<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，分別為不同的分頁，下面為廣告呈現

1
2
3
4
5
6
7
8
<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()

1
2
3
4
5
6
7
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 將不會顯示廣告

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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()：加載與更新廣告內容

完整程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<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 的官方文件其實也寫得很清楚，遇到任何問題還是查找文件最快了~本篇文章就介紹到這邊，歡迎大家互相交流分享唷 😊



REFERENCE

Google Publisher Tag 官方文件

Google Publisher Tag 開發人員文件



🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！



🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住



六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！


Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。
❤️