前言
延續上一篇教學⟪【GTM進階教學】如何使用GTM替網站建立Announcement Bar？ ⟫，今天將繼續跟大家分享如何透過GTM來替網站建立popup通知欄，基本上設定步驟都跟上一篇教學差不多，本篇就不多贅述。
Popup跟Announcement Bar最大的不同的點在於，我們通常會希望Announcement Bar的資訊能夠顯示在「所有的頁面」且只會佔網站頂端的一小部分，所以當我們在設定GTM的觸發條件時，只需選擇”All Pages”即可；但因為Popup強迫使用者觀看資訊的特性（如下圖），我們通常只會希望它顯示在「特定的頁面」上或者使用者每天「第一次」進入網站時即可。因此，在GTM觸發條件的設定上就會稍微複雜一些，需要再額外設定一些條件，也是筆者此篇想要跟大家分享的重點！
挑選Popup樣式
這個步驟，可以請工程師幫你開發肯定會是最符合你需求的方式，但如果你不想麻煩他們，可以參考以下的教學，你不必要很精通各式各樣的程式語言，但至少能夠看懂基本的前端程式碼HTML、CSS與Javascript。
這邊就不分享我寫的code給大家看了，大家可以到Codepen搜尋pop up，並挑一個你喜歡的樣式做爲「參考」。
在挑選樣式的時候，除了配色、動畫效果你喜不喜歡之外，請特別注意以下：
*請找同時有PC與Mobile端的code，畢竟使用手機來瀏覽網站的使用者越來越多，如果你挑了一個只有PC端可以使用，但到了Mobile端卻嚴重跑版的樣式，對使用者體驗，絕對是相當扣分的
如何透過GTM串接Popup至我的網站？
本篇教學所設定的使用者情境如下：只有在使用者「每日第一次」進入「特定網頁」的時候，才會跳出Popup通知欄。換句話說，當使用者第2、3、4…次進到該網頁時，popup都不會再次顯示，直到午夜12點之後進入該網頁時，popup才會再次出現。
Popup的觸發條件在設定上根據情境的不同，步驟會繁瑣許多，根據上述的情境，共會包括兩組代碼、三個觸發條件與一個變數需要設定。
第一步
我們必須替該網頁設定一組全新的Cookie，命名為pageviewCount。
變數設定
- 變數類型：第一方Cookie
- Cookie名稱：pageviewCount
第二步
此步驟我們需藉由程式碼，來「計算」使用者每日進入該頁面的「次數」，這組次數會被記錄在第一步所設定的變數pageviewCount上，且每天晚上12點自動歸0。
代碼設定A
- 代碼類型：自訂HTML
- HTML：參考下面我提供的程式碼，再針對你所需要的情境做修改即可
觸發條件A
- 觸發條件類型：網頁瀏覽
- 觸發條件的啟動時機：希望顯示popup的網頁網址
<script>
function setCookie(name, value, expires) {
var cookie = name + "=" + value + "; path=/; domain=." + location.hostname.replace(/^www\./i, "");
if (typeof expires !== "undefined") {
var now = new Date();
var getHours = now.getHours()*60*60;
var getMinutes = now.getMinutes()*60;
var getSeconds = now.getSeconds();
var nowSeconds = getHours + getMinutes + getSeconds;
now.setTime(now.getTime() + (expires * 24 * 60 * 60 - nowSeconds) * 1000); //晚上12點時，讓cookie值歸0
cookie += "; expires=" + now.toUTCString();
}
document.cookie = cookie;
}
function getCookie(name) {
var cookies = document.cookie.split(";"),
toReturn;
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.indexOf(name + "=") === 0) {
toReturn = cookie.substring((name + "=").length, cookie.length);
}
}
return toReturn;
}
(function() {
var pageviewCount = getCookie("pageviewCount");
if (typeof pageviewCount === "undefined") { //pageviewCount = undefined 代表使用者尚未進入該網頁過，所以當使用者進入後便+1
pageviewCount = 1;
} else {
pageviewCount++;
}
setCookie("pageviewCount", pageviewCount, 1);
})();
</script>
第三步
最後一步，我們必須來設定我們的popup樣式，而針對使用「第一次」進入某網頁的時候，會有兩種狀況B-1與B-2。
代碼設定B
- 代碼類型：自訂HTML
- HTML：請放上你選擇好的popup樣式，包括HTML、Css與Javascript
觸發條件B-1
- 當使用者過去曾經來過該網頁，因午夜12點重新計算，pageviewCount = 0
- 觸發條件類型：網頁瀏覽
- 觸發條件的啟動時機：pageviewCount = 0、PageURL = 你要顯示popup的網頁網址
觸發條件B-2
- 當使用者過去「從未」進入過該網頁，所以系統會判定他的pageviewCount = undefined
- 觸發條件類型：網頁瀏覽
- 觸發條件的啟動時機：pageviewCount = undefined、PageURL = 你要顯示popup的網頁網址
如何測試？
最後，我們該如何測試我們的Popup是否有安裝成功呢？基本上，在GTM所安裝的任何代碼都會透過「預覽模式」來做最後的確認，所以第一步我們需要點擊右上角的預覽 ➭ 輸入網站網址 ➭ 確認PC與Mobile端的樣式是否有如你所預期的顯示（如下圖）。
第二步，到Chrome的線上應用程式商店，安裝下圖餅乾圖示的「EditThisCookie」到你的Chrome瀏覽器，接著，確認有看到pageviewCount這變數，就代表已經成功設定好Popup了！
*如果你想要重複測試Popup是否會顯示於頁面的話，把pageviewCount的值設為0即可。
結語
最後，雖然我們能夠透過GTM的方式來替自家網站建立Popup，但每次如果需要更動Popup上頭資訊時，我們就必需打開GTM重新調整內容，我必須承認這個方法並沒有那麼的方便，就推薦給想要省省成本，也不想太麻煩工程師的行銷人參考囉。
