[行銷]Google 代碼管理工具如何區分 DOM 可以執行或是視窗完全載入。

　　基本上在 JavaScript 的 DOM 物件層級中，document 物件是隸屬於 windows 物件 ( document == window.document )，首先先介紹 jQuery(document).ready() 與 jQuery(window).load() 的差異，而這兩者的差別說明如下：

　　⑴ jQuery(document).ready(function() { … }) 《  或簡寫為 $(function() { … });  》

　　當 document 物件下所有 DOM 物件都可以正確取得時，就會觸發 jQuery.ready() 註冊的 function，這時雖然後 <img src="…" /> 定義的圖片正在下載，但由於 <img> 這個 DOM 物件已經都 ready 了，所以 jQuery 並不會等圖片全部下載完畢才執行 ready 事件。

　　⑵ jQuery(window).load(function() { … })

　　而使用 window 的 load 事件，卻是完全不同的行為，jQuery 裡的 window 的 load 事件與 JavaScript 裡的 window.onload 事件一模一樣，註冊在這裡面的事件都會等到整個視窗裡所有資源都已經全部下載後才會執行，例如該頁面有 100 張圖片就會等 100 圖片都下載完才會執行，其中也包括所有 iframe 子頁面的內容必須完整載入。

　　要在註冊 window.onload 事件後才使用 $(document).ready() 就會導致 $(document).ready() 變的與 $(window).load() 的行為一樣，要等到網頁所有資源都下載完畢才會執行 $(document).ready() 中註冊的事件！但只要 $(document).ready() 在 window.onload 事件註冊之前就先定義好就沒有這個問題了！

　　JavaScript 的行為如此，但 Google 代碼管理工具要如何追蹤是否 DOM 結構繪製完畢，或是頁面內包括圖片的所有元素載入完畢則可以藉由網路專用預設資料層事件。

　　根據預設，Google 代碼管理工具會將某一組值傳送至網路應用程式的資料層。這些值為：
　　￭ gtm.js - 在 Google 代碼管理工具可以執行時傳送至資料層。
　　￭ gtm.dom - 在 DOM 可以執行時傳送至資料層。
　　￭ gtm.load - 在視窗完全載入時傳送至資料層。

如果要區分頁面完成的行為，用來區分執行時機，請採取下列步驟：
① 設定 JavaScript 變數來確定 DOM 是否可以執行。

② 設定 JavaScript 變數來確定視窗是否完全載入。

③ 在所需版本的旁邊選取 [動作] → [預覽]。啟用預覽模式後，只要前往導入容器的網站，您就會在瀏覽器底部看到主控台視窗，檢查左邊 DOM Ready 和 Page Load 比較兩個設定變數是否有不同。

DOM Ready

Page Load

④  按一下上方導覽列的 [版本]。接著按一下表格中所需的版本，然後按一下 [動作] → [發佈]。 Google 代碼管理工具會保留發佈紀錄，方便您查看版本生效的時間及發佈者。
完成以上的步驟即可。