Google Tag Manager_Debug_為什麼我另外加的element有時候出現有時候沒有

可以參照我前一篇有提到關於可以用Google Tag Manager做一些前端頁面臨時的變動，也可以根據時間設定custom HTML觸發的時間，這篇要提到的是遇到了一個弔詭的問題，明明從preview測了三千萬遍，也上線做了初步的測試，但element就像曖昧中的愛情一樣，有時候會出現有時候沒有，那到底是有還是沒有呢?找不到有開發的證據OTZ
這篇會提到一些我自己在做相關debug的思路XD

步驟

思緒的統整很\~\~\~\~重要，一個現象背後有很多原因，在沒有足夠線索+驗證的情況下，我們很難單就一個現象去推斷發生甚麼事情了，尤其攸關到前端那就是地獄
小至使用者使用甚麼瀏覽器，瀏覽器可能有甚麼預設設定，大至我們網站可能有使用CDN，那我們能做的就是利用驗證把一個個可能原因排除，避免在沒有想清楚的情況下像無頭蒼蠅一樣亂改碰運氣
不管是自己還是偕同測試人員/回報人員，可以藉由以下去列出線索:

• 預期結果
• Where (位置)
• What (發生甚麼事情/做了甚麼動作)
• Who (誰做了甚麼 誰遇到了甚麼)
• When (甚麼時間)
• Why (如果對方沒有讓你理解，可以多深入問問)
• How (通常是問自己要怎麼處理驗證等等~)

如果對方比較茫然又或者最茫然的是自己，也可以透過問自己問題或問對方問題去找線索

線索

• edge大部分都能正常顯示
• chrome大機率異常顯示
• chrome測試已刪除cookie瀏覽資料
• 使用chrome訪客模式仍然沒有改善
• 程式上線後過了CDN cache的時間仍然沒有改善
• 顯示正常在reload以後有機率變成異常顯示
• 異常顯示再reload以後有機率變成正常顯示

驗證

現在就來一條條排除啦!

edge大部分都能正常顯示
chrome大機率異常顯示
chrome測試已刪除cookie瀏覽資料
使用chrome訪客模式仍然沒有改善

初步開始懷疑chrome是不是有什麼設定是類似CDN的機制(快取資料優化瀏覽速度)

• 瀏覽器有快取?

  • css HTML應該是不會影響，JS是透過gtm加上去的，因為是透過gtm所以應該沒有相容性的問題(至少針對Google家自己的產品相容性應該是可以相信的XD)

• 程式上線後過了CDN cache的時間仍然沒有改善

  • 這是網站本身前端 cdn cache機制，基本上過了時間應該不會持續有一樣問題，也利用清除瀏覽資料、訪客模式，問題依然存在

顯示正常在reload以後有機率變成異常顯示
異常顯示再reload以後有機率變成正常顯示

• LB相關設備目前沒甚麼問題，東西時好時壞的問題應該來自其他地方
• JS在Google Tag Manager裡面預覽是正常顯示

結論

最後我決定回到官方文件一步步檢查自己是否有遺漏的地方，由於相關JS並沒有很複雜，加上其實開發時已經有注意是否有error log，直到我在官方文件看到

• 網頁瀏覽：在網路瀏覽器開始載入網頁時立即啟動。如果您只需要網頁曝光產生的資料，請使用這個選項。
• DOM 就緒：在瀏覽器以 HTML 格式建構完整個網頁、系統也準備好剖析文件物件模型 (DOM) 時啟動。以網頁瀏覽為基礎並與 DOM 互動來填入變數值的代碼應使用這個類型的觸發條件，確保能夠為代碼管理工具提供正確的值。
• 視窗已載入：在網頁 (包括圖片和指令碼等所有內嵌資源) 完全載入後啟動。

雖然這幾個觸發在預覽看起來區別不大，甚至在初步上線測試其中一個頁面其實沒有甚麼問題，但其實每台機器可能回傳資料的速度不一，原本我是使用網頁瀏覽，導致甚麼呢，就是可能element都還沒有載入就執行了gtm中的JS，那每一次載入速度本來就會不一，加上瀏覽器對於載入可能有不同機制(這塊可能要深深地去研究才能確認)，所以導至東西時好時壞，最後將trigger保守更動為視窗已載入
考量畫面元素有可能依賴後台給予的資料，最保險的做法還是等資源都載入再加上gtm JS要增加的東西

這件事告訴我們，沒事還是要多看看官方文件XD不管是各種教學文分享文，最根本還是要回到官方文件，寫下來告訴以後的自己，當覺得問題沒方向的時候，不如回到官方文件轉轉XD

參考網頁

• 官方文件_網頁瀏覽觸發條件
• 官方文件_代碼觸發選項
  

  tags: gtm google tag manager javascript