如何用 GTM 設定「使用者體驗較佳」的廣告彈出視窗？

生活在這個世代的我們，上網已經是必須，瀏覽網站時被各種型態的廣告轟炸也已經是常態，尤其是那些儘管已經被我們關閉的廣告彈出視窗，卻還是在換頁之後不斷彈出，實在是非常擾人（而且可能沒有效果，還會降低使用者體驗。）

但身為行銷人員的我們，又希望可以對當前檔期的活動宣傳適時的曝光，同時不會過度干擾正在閱讀網站的使用者，如果你的網站沒有 CMS 後台可以協助設定彈窗廣告，而必須向工程師團隊提出需求，可能又需要等待一段時間。

更何況，這個世界千變萬化，萬一臨時要 On 一個搭上時事梗的活動宣傳，常常要請工程師插件處理的話，久而久之應該會被討厭！？

此時我們就可以透過 GTM 來協助我們處理這個部分了，過程很簡單，只要一串 Javascript 代碼搭配 GTM 中的「自訂 HTML」代碼，並依照需求綁定觸發條件就可以了，設定完成後，未來設定彈窗廣告的靈活性也大大增加。（只要更改 GTM 中幾個部分就可以。）

而接下來的設定示範，我們會用到過去文章中都有提到的幾項技巧，分別是：

（如果對於以上這些都不太熟悉，建議可以先點過去閱讀，再回頭來看這篇）

透過上述一連串的組合技，就可以讓我們在特定情況下才彈出廣告視窗，並且不再對曾經關閉廣告視窗、已經購買產品或報名參加活動的使用者重複顯示廣告，減少對於使用者的過度干擾同時，又能夠宣傳自家活動。

另外，溫馨提醒，要進行這項設定前，一定要找網站設計師討論，別自顧自地從網路上拿了一段彈窗代碼就開始胡亂用了，一來廣告視覺上與品牌 CI 不相符，二來可能會傷了網站設計師的心，這是維護世界和平的良藥。

現在，就讓我們繼續看下去。

（如果你趕時間，可以跳到這下載設定好的「容器」並匯入到 GTM 中，大概 30 秒內可以完成。）

準備 JS 彈窗廣告代碼

網路上很多類似的 Javascript 彈窗代碼可以使用，但如果自家網站有設計師，建議請其協助規劃一個彈窗廣告的版面設計，使其符合品牌的設計規範，會是較佳的做法。

或是可以直接使用以下這段代碼，也可到 Github 上面去複製，我們要做的是，將這段代碼貼入到 GTM 的「 自訂 HTML 」代碼中。（注意：紅字是可以依照需求，進行修改的部分）

<!-- Custom HTML Tag for GTM -->
<div id="overlay" style="display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999;"></div>

<div id="popup" style="display: none; position: fixed; width: 350px; padding: 20px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); z-index: 1000; border-radius: 15px; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-right: 20px;">
  
    <div id="popup-close-btn" style="position: absolute; top: -10px; left: -10px; cursor: pointer; font-size: 20px; color: #fff; background-color: #fafafa; width: 30px; height: 30px; border-radius: 50%; text-align: center; line-height: 30px;">&times;</div>
    
    <!-- 放置文字 -->
    <h2>特別優惠</h2>
    <p>限時優惠，立即購買享受 50% 折扣！</p>

    <!-- 放置廣告圖片 -->
    <img id="your-image" src="輸入你的圖片網址" alt="圖片描述" style="width: 100%; border-radius: 10px; margin: 10px 0; cursor: pointer;">
    <div id="button-container" style="text-align: center;">
        <div id="action-btn" style="display: inline-block; margin: 10px; padding: 10px 20px; background: #fff; color: #000; text-align: center; cursor: pointer; border-radius: 5px;border: 2px solid #000"> 放上你的 Call To Action </div>
    </div>
</div>

<script>
    // 顯示彈出視窗和背景遮罩
    function showPopup() {
        document.getElementById('overlay').style.display = 'block';
        document.getElementById('popup').style.display = 'block';
        centerPopup();  // 每次顯示時居中
    }

    // 點擊關閉按鈕時隱藏彈出視窗
    document.getElementById('popup-close-btn').onclick = function() {
        document.getElementById('overlay').style.display = 'none';
        document.getElementById('popup').style.display = 'none';
    };
  
    // 點擊圖片時觸發點擊連結行為
    document.getElementById('your-image').onclick = function() {
        window.location.href = '輸入使用者點擊圖片後要引導去的頁面連結'; // 替換為實際連結
    };

    // 點擊按鈕時觸發點擊連結行為
    document.getElementById('action-btn').onclick = function() {
        window.location.href = '輸入使用者點擊按鈕後要引導去的頁面連結'; // 替換為實際連結
    };

    // 確保視窗在窗口大小改變時保持居中
    window.onresize = function() {
        var popup = document.getElementById('popup');
        popup.style.left = '50%';
        popup.style.top = '50%';
        popup.style.transform = 'translate(-50%, -50%)';
    };

    // 立即顯示彈窗
    showPopup();
</script>

ㅤ

這段 Javascript 彈窗廣告代碼執行後，呈現的畫面如下圖，彈窗內的圖片以及文字都可以進行替換。

接下來我們回到棚內…我是說回到 GTM 介面中。

GTM 左側面板選擇「代碼」 > 右上角點擊「新增」> 點擊「請選擇代碼以開始設定」> 右側面板選擇「自訂 HTML」

ㅤ

將上一段的 Javascript 代碼貼到畫面上的 HTML 欄位中，記得修改紅字的部分，將其替換成你要的文字、圖片以及連結，完成後，就可以開始設定觸發條件。

設定彈窗廣告代碼的觸發條件

假設我們將在產品頁面有滾動到頁面 75% 的位置，同時也在該頁面停留超過 2 分鐘的使用者定義為：對該產品有興趣的使用者。

（定義可以依據你自己的觀察，給予一個假設，然後進行設定，試驗看看能否提升最終成效，這邊我們只是舉例。）

在使用者達成以上條件之後，跳出折扣廣告，希望可以進一步促成使用者購買的機會。

因此我們需要設定兩個觸發條件，分別是觸發條件「捲動頁數」以及「計時器」，最後搭配「觸發條件群組」來完成這個設定。

設定「捲動頁數」觸發條件

GTM 介面左側面板選擇「觸發條件」> 右上角「新增」> 觸發條件設定 > 選擇「捲動頁數」> 勾選「垂直捲動頁數」，將百分比設定為 75%

如果需要設定「捲動頁數」觸發條件的詳細步驟，可以參考過去寫過的文章「如何用 GTM 設定「網頁捲動」追蹤事件」，我們就不再重複說明了。

ㅤ

設定「計時器」觸發條件

GTM 介面左側面板選擇「觸發條件」> 右上角「新增」> 觸發條件設定 > 選擇「計時器」> 「間隔」欄位寫入 120000 毫秒(代表 2 分鐘)，「限制」為 1 （只需觸發一次）>
限制在網址包含 category/jacket 時才會啟動。

ㅤ

設定「觸發條件群組」

GTM 介面左側面板選擇「觸發條件」> 右上角「新增」> 觸發條件設定 > 選擇「觸發條件群組」> 「選擇觸發條件」 > 將剛剛設定的「捲動頁面」以及「計時器」放入群組中。

如果以中文來說的話，這部分的設定代表：

當使用者所在頁面網址包含 category/jacket 時，捲動畫面超過 75%（我們假設使用者看完了產品介紹），且停留超過 2 分鐘（我們假設使用者很認真看），那麼就會跳出折扣的廣告視窗。

將觸發條件與代碼綁定，並測試

將上一段設定的「 觸發條件群組 」與彈窗廣告的「 自訂 HTML 」代碼綁定，然後點擊右上角「預覽」來到 Tag Assistant 進行測試，預期應該要能夠在滿足觸發條件的情況下看到廣告視窗彈出。

ㅤ

確認沒問題之後，我們可以先行「提交」當前的容器版本，確認在正式網站上面也都順利運作，就可以開始來進行下一階段的設定：優化使用者體驗的設定。

為什麼我們要這麼做？

試想一個情況，如果你正在瀏覽一個網頁，瀏覽到一半時，彈窗廣告跳出，你對廣告沒興趣，所以點擊了左（右）上角或是畫面中任何關閉按鈕，把廣告給關掉了，接著繼續瀏覽網站，換到其它頁面後過沒多久，廣告又再度跳出，你的感受會是什麼？

我知道了！不要再推給我了，我現在沒興趣！

如此打擾使用者的行為，我們當然不要讓其出現在網站上，所以我們一樣可以透過 GTM 中的「 自訂 HTML 」代碼並搭配 Javascript 來進行 Cookie 設定，不再對特定時間內曾經關閉過彈窗廣告的使用者，投放蓋板的彈窗廣告，影響其閱讀體驗。

ㅤ

複製以下這串 Javascript 代碼，並如同設定彈窗廣告的操作，放置到 GTM「自訂 HTML」代碼中。（紅色標示是依據個人需求可以修改的部分，其他部分不要更動。）

<script>
  // 函數：設置 Cookie
  function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
  }

  // 調用函數設置 Cookie
  setCookie('輸入你的Cookie名稱', 'true', 輸入Cookie於多久到期); 
 
</script>

ㅤ

GTM 左側面板選擇「代碼」 > 右上角點擊「新增」> 點擊「請選擇代碼以開始設定」> 右側面板選擇「自訂 HTML」> 將代碼貼入 HTML 欄位

ㅤ

紅框內的名稱都可以自行更改，如果你不想 Cookie 的「值」為 true，也可以設定為 yes，不想 Cookie 名稱為 closedUser，也可以改成別的，想要讓 Cookie 存在使用者的瀏覽器中久一點，也可以將到期時間設定為 7 天，這些更改都不會影響到這串代碼的運作。

關於 Cookie 的設定，我們在文章「如何用 GTM 設置追蹤使用者的 Cookies ? 」中有更詳細的解釋，有興趣的朋友可以進一步閱讀該篇內容。

ㅤ

首先透過網頁開發者工具（頁面上按右鍵，點選檢查）找到關閉按鈕的元素，如下圖：

ㅤ

可以看到該關閉按鈕元素 ID 為 popup-close-btn，接下來我們可以透過點擊類型觸發條件中的「所有元素」來進行觸發條件的設定。

GTM 介面左側面板選擇「觸發條件」> 右上角「新增」> 觸發條件設定 > 選擇「點擊」區塊中的「所有元素」

將觸發條件與代碼綁定，並測試

上述的觸發條件完成之後，我們就可以將其與 Cookie 設定的代碼綁定，並且點擊「預覽」進入 Tag Assistant 進行測試。

ㅤ

透過這樣的設定，我們預期應該要能在使用者點擊彈出視窗的「關閉按鈕」時，使用者的瀏覽器會被儲存一個名為 closedUser 且值為 true 的 cookie（如下圖）。

（你可以透過網頁開發者工具進行檢查，如果不知道如何使用，請參考這裡。）

當確認在使用者關閉廣告之後，Cookie 設置的結果如我們所預期，接下來，我們要做的是讀取該 Cookie 的值，並將其用作限制代碼觸發的條件，也就是：

當發現使用者瀏覽器中存在 closedUser 這個 cookie ，且值為 true 時，彈窗廣告的代碼便不會觸發。

ㅤ

接下來，讓我們進入設定「第一方 Cookie」變數的環節。

GTM 變數介面 > 新增「使用者定義變數」 > 選擇「第一方 Cookie」> 於 cookie 名稱欄位中輸入 closedUser ，大小寫必須完全相同

ㅤ

設定完成之後，預期應該要能在預覽模式 Tag Assistant 中看到該「第一方 Cookie」變數的「值」，且「值」應該為 true，如下圖（前提是你在測試時，有點擊過廣告關閉按鈕了。）

重新設定「觸發條件群組」

在之前的「觸發條件群組」設定中，我們可以加入一個新的限制條件，也就是當「第一方 cookie」變數（這邊我們命名為 1stV | closedUser）不等於 true 時，該「觸發條件群組」才會啟動，如果為 true，則不啟動。

ㅤ

如此一來，我們就可以限制彈窗廣告代碼的觸發，避免使用者已經點擊關閉按鈕了，網站還在符合觸發條件的情況下，於其它頁面持續推送廣告給他。

如果很趕時間

我們懂你的心急，因為老闆急著要，所以你很想趕快設定好。

別擔心，我們有製作一份「彈出視窗代碼」的「容器」讓你可以下載使用，只要透過以下步驟，並且修改幾個部分，就可以在網站上運行了。

#1. 下載 GTM 容器 json 檔

點此下載

ㅤ

#2. 將檔案輸入到 GTM 容器中

（注意，這邊的操作必須非常小心，避免整個 GTM 容器被覆蓋掉，請謹慎的照著接下來的指示進行。）

GTM 操作介面點擊左上方的「管理」 > 選擇「匯入容器」

ㅤ

選擇剛剛下載的 json 檔案 > 選擇「新增」工作區 > 選擇「合併」> 選擇「 重新命名有衝突的代碼、觸發條件和變數 」

為了避免不小心覆蓋掉你原本的容器，這是較為安全的方式，儘管原本可能是空的容器或是空的「工作區」，但我們還是建議以新增「工作區」且「重新命名衝突代碼、觸發條件和變數」的方式來進行輸入，這樣能完全避免原容器內代碼被覆蓋的可能。

（當出現衝突時，會自動重新命名，原有代碼依然會存在，不會被覆蓋掉，我們還能進行修改補救。如果沒衝突，就不會發生任何事情。）

如果出現以下畫面的訊息，代表該工作區內的容器，已經有一樣的代碼、觸發條件以及變數了，GTM 自動會擋住，不讓你輸入該容器版本檔案（也沒意義）。

ㅤ

對於「工作區」運作原理上不熟悉的朋友，可以參考這篇文章：如何善用 GTM 的「工作區」來進行多人協作？

ㅤ

#3. 修改代碼

當代碼安裝到你的容器內之後，以下幾個地方是需要修改的（我們同時也有在代碼以及觸發條件上標示。）

記得更改「彈出廣告視窗」內的連結網址以及圖片網址，還有廣告文案和 CTA 文字。
「計時器」觸發條件預設為 5 秒，方便進行測試時不用等待太久，記得改成需要的秒數。

總結一下

上述的步驟看似很多很複雜，但其實只是將過去文章中我們介紹的幾個技巧組合起來的應用：

彈窗 Javascript 代碼＋ GTM「自訂 HTML」代碼
觸發條件「頁面捲動」、「計時器」以及「觸發條件群組」
Cookie 設置 Javascript 代碼＋GTM「自訂 HTML」代碼
觸發條件「所有元素」

如果你是初學 GTM 的朋友，肯定會看得一頭霧水，建議可以先去看看我們專為初入門的朋友所準備的 E-book，應該可以對你有所幫助，當熟悉 GTM 內每個項目的原理之後，也比較容易可以融會貫通，組合出你需要的設定方式。

延伸閱讀

如果妳/你很喜歡這篇文章並且覺得內容有幫助，又剛有些多餘時間，歡迎妳你看看其它文章，繼續探索（這坑？這地獄？這片樂土？）

同時，如果對於內容有疑問或是建議，也歡迎妳/你留言或是到右邊的社群上找我們，我們都會盡我們所知道的進行回覆：）

本篇重點

準備 JS 彈窗廣告代碼

設置彈窗廣告的「 自訂 HTML 」代碼

設定彈窗廣告代碼的觸發條件

設定「捲動頁數」觸發條件

設定「計時器」觸發條件

設定「觸發條件群組」

將觸發條件與代碼綁定，並測試

用 Cookie 紀錄曾「關閉」過廣告的使用者

準備設定 Cookie 的 JS 代碼

設定 Cookie 設置的「自訂 HTML」代碼

設定 Cookie 設置的觸發代碼

將觸發條件與代碼綁定，並測試

設定「第一方 Cookie」變數

重新設定「觸發條件群組」

如果很趕時間

#1. 下載 GTM 容器 json 檔

#2. 將檔案輸入到 GTM 容器中

#3. 修改代碼

總結一下

延伸閱讀

設置彈窗廣告的「自訂 HTML 」代碼