五分鐘教學：行銷人員必修的 GTM 相關網頁架構

前言

開始了解網頁架構，是因為在第一份工作時，真正的工作內容，是有點類似（偽）工程師的 Ad Operations Executive。因為這樣，我花了不少時間在鑽研「如何埋放追蹤碼，以達到最佳的行銷活動成效」，在過程中，發現了兩件重要的事：

1. 要懂數位行銷，你一定要先知道資料怎麼來，怎麼獲得資料
2. 要有效得到自己想要的資料，你一定要有基礎的程式知識

於此同時，我在網路上看到了同樣從事數位行銷相關產業的 Benson，寫了一系列《行銷人員不可不知的程式知識》文章。當時受到不少啟發，但是 Benson 的文章，主要是講解追蹤碼的架構與內容，我認為對入門學習者來說，似乎還少了一塊中間的步驟，因此決定寫這篇文章，將它作為 Benson 原文的延伸閱讀。

什麼樣的人適合這篇文章

1. 看過 Benson 的文章，想要更深入了解一個網頁從載入到使用者互動的過程中發生什麼事
2. 曾經讀過 Google Analytics (分析) 跟 Facebook 像素的技術文件，卻不知道該怎麼透過 Google 代碼管理工具埋設的人
3. 用 Google 代碼管理工具埋設追蹤碼時，「球來就打、code 來就貼」，遇到代碼重複觸發困擾的人

網頁是由元素 (elements) 構成的

如果你使用的是 Google Chrome 或 Firefox 可以先使用 Ctrl + Shift + I/Cmd + alt + I 打開開發者工具箱，你會看見類似下方的視窗。（如果是第一次看到，可能就像是看到天書一樣。）

在這裡面，由 <xxx> 與 </xxx> 包覆起來的，就是一個元素，用稍微專門的名詞的來說，是一個 DOM 元素。「每個網頁，都是由元素構成的。」這句話看起來像是廢話，不過未來在埋設追蹤碼的時候，要時時刻刻有這樣的認知。當我們看到由 <xxx> </xxx> 包起來的元素長得很像時，我們就可以知道他們應該是功能類似、可以整併在一起的代碼。

以 Facebook 像素為例，如果同時要埋設兩組像素時，我們可以這麼做：

<!-- Facebook Pixel Code -->
<script>!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'AAAAAAAAAA');
fbq('init', 'BBBBBBBBBB'); //只要把第二個像素貼到這裡就可以了！不用再另外新增一組代碼
fbq('track', 'PageView');
</script>
<!-- End Facebook Pixel Code -->

當我們知道網頁是由元素構成後，我們需要再進一步了解到：每個元素，都包含了特定的屬性 (attributes) 與值 (value)。這對於我們埋設網站追蹤碼有什麼樣的幫助呢？

想像一個情境：今天我想要使用 Google 的電子商務追蹤，或是 Facebook 的瀏覽內容，但是之前網頁製作公司，並沒有幫我把相關的資料推送進資料層變數裡面（資料層變數，未來會再做進一步的說明），我該怎麼做，才能得到我要的數據呢？雖然說根本的解決之道，是請工程師或網站製作公司替你把資料推入資料曾變數。但是在預算與時間有限的情況下，到底該怎麼辦呢？

這時候，聰明的你也許注意到了：「我的網頁上，不是已經把我要的資料都寫出來了嗎？」

沒錯，這時因為你時時刻刻都記得「網頁是由元素構成的」，因此你可以從你的 Google 代碼管理工具 (GTM) 中，透過相關的設定，手動把你需要的資料擷取下來，讓你即使沒朋友，也能夠在網頁上收集到你需要的使用者體驗資料！

網頁從載入開始就是一連串的事件 (events)

Benson 的系列文章，第一回曾經說明網站從客戶端 (client-side) 到伺服器端 (server-side) 的請求 (request) 與回應 (response) 的過程。當我們的瀏覽器取得這些回應資料後，會展開一連串的旅程，也就是所謂的事件，才會將網頁呈現出來，變成我們看到的樣子。既然事件就像是一連串的旅程，這就表示，事件有先後順序。

Google 代碼管理工具，替我們把網頁載入畫分成三個事件：網頁瀏覽、DOM 就緒、視窗已載入。如果你曾經使用過 Google 代碼管理工具，你會發現這三個事件，其實就在「觸發條件類型」當中。沒錯，Google 代碼管理工具的觸發條件，就是透過監聽 (listen) 網頁載入後的各種事件後，決定要觸發哪些代碼。（有關監聽事件，可以上網搜尋 addEventListener）

網頁瀏覽 (Page View)

從你的瀏覽器開始載入網站的那一刻，觸發了 Google 代碼管理工具開始，就是「網頁瀏覽」事件的開始。

DOM 就緒 (DOM Ready)

看到 DOM，是否想起在稍早前，我們提到過 DOM 元素呢？當整個網頁的 DOM 元素都已經被瀏覽器偵測到以後，就達成了 DOM 就緒事件的條件。當然，這邊要順帶一提的是，DOM 就緒的事件，不包含用 JavaScript 動態新增的 DOM 元素。

（如果學過 jQuery 的人，DOM 就緒的概念其實就等同於 $(document).ready();）

視窗已載入 (Window Loaded)

當瀏覽器判斷頁面上該有的資訊都已經畫出來後，就會送出一個視窗已載入的事件。

當頁面載入完成後，使用者開始與網頁互動，會產生的事件數量就更多了。舉凡點擊、捲動 (scroll)、播放影片甚至放大縮小。都是「事件」的範圍。我們可以說，如果構成網頁的是元素，那麼賦予網頁生命的，就是事件。

回到電子商務的情境。在一般的情況之下，我們會利用網頁瀏覽的觸發條件，埋設 Google Analytics (分析) 的代碼，或是 Facebook 的基底像素。但是當我們需要擷取頁面上的資料時，顯然是不能在頁面載入時就觸發這項功能的。保守起見，如果遇到這樣的狀況時，我通常會等到 DOM 就緒後，才會試著去擷取頁面上的資料。

結論：用 Google 代碼管理工具幫助你更了解網頁架構

這個小標題，可以作為我在學習 Google 代碼管理工具初期的心得。

但是更了解網頁結構，對於我們的行銷人生，有什麼幫助嗎？

1. 網頁載入後是一連串的事件，我們可以透過前面觸發的事件，提供資料（例如產品類別、產品名稱、甚至是代碼引用的檔案）給後續事件所觸發的代碼使用
2. 因為知道網頁是由元素構成，因此我們知道可以將同樣功能的像素整併在一起，不需要反覆新增同樣功能的代碼。

儘管你的職務並不一定是 Ad Operations Executive，但是當你更了解網頁結構了以後，未來不論是在與公司的 Ad Operations Executive 的人溝通，或是與工程師、網頁設計師在溝通時，可以提供他們更具體的指示，幫助你蒐集你需要的資料。