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

五分鐘教學:行銷人員必修的 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 打開開發者工具箱,你會看見類似下方的視窗。(如果是第一次看到,可能就像是看到天書一樣。)

開發人員工具 in 五分鐘教學:行銷人員必修的 GTM 相關網頁架構

在這裡面,由 <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 的瀏覽內容,但是之前網頁製作公司,並沒有幫我把相關的資料推送進資料層變數裡面(資料層變數,未來會再做進一步的說明),我該怎麼做,才能得到我要的數據呢?雖然說根本的解決之道,是請工程師或網站製作公司替你把資料推入資料曾變數。但是在預算與時間有限的情況下,到底該怎麼辦呢?

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

網頁上已經有可用的數值 in 五分鐘教學:行銷人員必修的 GTM 相關網頁架構

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

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

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

GTM 流程圖 in 五分鐘教學:行銷人員必修的 GTM 相關網頁架構

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

GTM 的三種頁面載入事件 in 五分鐘教學:行銷人員必修的 GTM 相關網頁架構

網頁瀏覽 (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 的人溝通,或是與工程師、網頁設計師在溝通時,可以提供他們更具體的指示,幫助你蒐集你需要的資料。

從這裡聯絡 applemint!

Eric Chuang

相關文章

與我們聯繫