不管是 Google 官方文件或是我們之前的「如何安裝 Google 代碼管理工具」文章,都有提到要把 GTM 容器的兩段 <script>
以及 <noscript>
代碼分別安裝在網頁的 <head>
以及 <body>
區塊內(如下圖)。
如果相對應到網頁上面的話,我們使用「網頁檢查工具」查看頁面,會看到這兩段代碼(<script>
以及 <noscript>
)分別是座落在網頁中如下圖的位置。
ㅤ
現在問題來了,隨著你接觸到的網站類型越來越多,可能是換工作、公司網站改版、更換網站製作廠商或是 IT 團隊換人等原因,因為網站成效表現的理由,有些網站不允許你將這段 <script>
代碼放在網頁的 <head>
區塊,甚至只允許這段代碼在網頁的最底部出現,也就是 </body>
之前,甚至是只能放在更末段的 <footer> 區塊內,更糟糕的是,就連某些現成的網站或是電商站,也不允許你去更動 <head>
區塊裡的代碼。
例如:Wordpress 某些佈景主題搭配 GTM 安裝外掛「GTM4WP」時,會出現 <script>
代碼被安裝到 <body>
區塊內的情況。
有時可能是因為管理、成效以及安全的因素,所以產生這樣的結果,完全是可以理解的,不過面對這樣的情況,我們行銷人員該怎麼辦?沒有照著官方建議的放置位置,GTM 容器還會正常運作嗎?
答案是:「會!儘管放在 <body>
或是 <footer>
內,依然會正常運作!」
But, why?
讓我們繼續看下去。
為什麼要放在〈head〉內?
首先,我們先理解為什麼官方建議放在 <head>
區塊內。
依照網頁運作的邏輯,網頁越上方的代碼,會越早被載入,為了避免追蹤數據流失,我們希望 GTM 容器能越早被載入且啟動,因為越早啟動 GTM 容器,我們就可以越快啟動容器內的追蹤代碼,例如 GA4 或是 Meta Pixel 追蹤碼。
因此,不管 <script>
代碼放在哪個位置,GTM 容器都會啟動,只是時間早晚的問題,如果放在網頁最底部,例如 </body>
(注意,這是 body 區塊的結束標籤,不是開頭標籤)或是 <footer>
內的話,很可能會以下情況:
假設你在追蹤一個圖片點擊行為,圖片已經載入了,但因為網頁載入速度很慢,使用者已經點擊圖片,GTM 容器卻因為放在最底部而還沒載入,無法觸發相對應的 GA4 事件,因此無法紀錄到資料。
(雖然現在是 21 世紀了,但依然還是有那種載入速度很慢很慢的網站…)
這也就是為什麼會建議將 GTM 容器的 <script>
代碼放在 <head>
區塊的原因,且最好是緊跟在 <head>
標籤之後,但如果真沒辦法這麼做也不打緊,只是可能會因為網頁載入速度的影響,造成追蹤的行為已經發生了,但 GTM 容器仍尚未啟動。
〈noscript〉代碼不能亂放
或是乾脆不要放!
上一段我們講到了 GTM 的 <script>
代碼放在非 <head>
區塊依然可以啟動,但是 <noscript>
代碼呢?
為什麼我們會在開頭說「乾脆不要放!」,我們先來了解一下這段 <noscript> 代碼是在做什麼用的。
<noscript> 代碼的存在是為了在瀏覽器禁用了 JavaScript 的情況下,我們仍然能夠追蹤使用者的行為,而這段代碼通常放置在 <body>
標籤的開頭部分,用於確保即使在沒有 JavaScript 支援的情況下,仍能進行基本的追蹤。
因為當使用者的瀏覽器禁用了 JavaScript 時,正常的 GTM 追蹤代碼無法運行(也就是那串 <script>
代碼),而 <noscript>
標籤中的代碼允許在這種情況下依然可以執行一些基本的追蹤,確保不會完全丟失這部分使用者的數據。
但是,一般來說,我們不會特別去設定瀏覽器禁用 Javascript,即使有,數量想必也是非常小,不會影響到數據的追蹤結果,畢竟我們透過 GA4 看的是趨勢,不是 100% 的準確。
這也是為什麼 <noscript> 代碼即使不放也沒關係的原因。
ㅤ
寧可不放,也不要亂放
因為 <noscript>
代碼裡面包含一段 <iframe>
,如果將其放在網頁的 <head>
區塊中,會造成瀏覽器無法解析,可能會影響頁面的結構和樣式,導致一些不可預期的問題,造成頁面顯示異常。
所以,<script> 代碼可以放在網頁上所有的地方,而 <noscript> 代碼只要不放置在 <head> 內,網頁其它地方則是都可以,或是就乾脆不要放了也沒關係。
總結一下
結論就是,可以的話,讓 GTM 容器的 <script>
代碼放在網頁越上方的位置,讓其越早載入越好,避免因為網頁載入速度太慢,影響到 GTM 容器的載入,而遺失了追蹤的數據或是特定外掛(如:聊天機器人)沒有啟動
如果真的沒辦法,<script>
跟 <noscript>
代碼一起放在 <body>
區塊內也沒有關係,你的 GTM 容器還是會正常運作。
延伸閱讀
如果你很喜歡這篇文章並且覺得內容有幫助,又剛有些多餘時間,歡迎你看看其它文章,繼續探索(這坑?這地獄?這片樂土?)
同時,如果對於內容有疑問或是建議,也歡迎你留言或是到社群上找我們,我們都會盡我們所知道的進行回覆:)