跳到主要內容

[行銷]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 代碼管理工具會保留發佈紀錄,方便您查看版本生效的時間及發佈者。
完成以上的步驟即可。

這個網誌中的熱門文章

[娛樂]玩了多年的撲克牌,其實背後是結合工程、歷史、設計的大學問!

  全世界各地的人們都知道撲克牌,也都有和撲克牌打過交道,幾乎每個地方都宣稱撲克牌是自己的發明成果。中國人認為撲克牌最早起源於十二、十三世紀南宋時期傳出的中國的葉子戲(按照四季分為四種類別)。法國人則認為撲克牌是由塔羅牌演變而成,而英國人則表示自己是在所有經過認證的記錄資料中最早提到紙牌遊戲的國家。   現在,大家可能都知道怎樣玩「二十一點」或者是橋牌,但很少有人會靜下心來想一下,一副撲克牌其實是工程學、設計和歷史多方面融合而成的一個奇蹟。撲克牌不僅是一種休閒娛樂時的消遣工具,也是高額賭博和魔術技巧的練習和展示工具,不僅是一種數學概率模型,甚至有時候也會被當作貨幣或者是機密訊息的傳播媒介。   在這個過程中,撲克牌不同起源的獨特之處也展現了出來。撲克牌的名稱、顏色、標誌和設計根據不同的出處以及玩家不同的想法而發生變化。這一張張的圖形卡片不僅僅是玩具,或者是工具,他們更是展現不同習俗的一種文化印記:   有關撲克牌的誕生地一直眾說紛紜,外界也沒有達成一個確定的共識,但就像火藥、茶和瓷器這些發明一樣,幾乎可以肯定的是撲克牌也是起源於東方。國際撲克牌協會(IPCS)主席 Gejus Van Diggele 也表示:「學者們和歷史學家對撲克牌的確切起源存在分歧,但他們普遍認為撲克牌是由東方向西方進行擴散傳播的。」   中國唐朝時期有史料提到了一種紙牌遊戲,雖然這種遊戲更像是現在的多米諾骨牌,但專家認為這是有關紙牌最早的書面記載材料。歐洲 14 世紀末期的一些參考文獻曾提到一種「撒拉遜人(阿拉伯人的古稱)玩的遊戲」突然傳入歐洲,這表明紙牌不是來源於中國,而是來自阿拉伯半島。   此外,還有一種說法是,紙牌最早是由游牧民族從印度帶來的一種能夠預測命運的卡片,為紙牌的起源打上了更為久遠的一個印記。但無論是哪一種起源,應該都是有一定的商業契機促進了紙牌在遙遠的東方與歐洲之間的傳播,與此同時印刷技術的發展也加速了紙牌跨國界的生產和傳播。   在中世紀的歐洲,紙牌遊戲多是與喝酒、賭博還有其他的一些陋習聯繫在一起。由於紙牌遊戲傳播的廣泛性,以及它給當地所帶來的破壞性,當局決定禁止紙牌遊戲。歷史學家 Michael Dummett 在他的《塔羅牌遊戲》一書中提到了巴黎的一項法令,禁止公民在工作日玩紙牌。後來,紙牌遊戲被教會視為異端邪說,傳教士也紛紛遊說,認為「...

[開發]如何讓 Unicode 圖案 (特殊符號) 在網頁上正常顯示?

展示了許多可以取代網站小圖示的 UNICODE,其優點非常顯而易見: ① 字元的傳輸量遠低於圖片的傳輸量。 ② 可以減少許多小圖示的 http 請求量。 那麼接下來的問題會是,要怎麼讓網站所使用的 UNICODE 表情圖案、特殊字元,都能讓所有訪客看到呢? ⑴ 符號數量。 符號數量越多,代表字型檔案越大。目前 Unicode 各國文字的數量太多先略過,屬於圖案的部分超過一千個,持續有新圖案推出。 ⑵ 編碼為 UTF8。 1 2 3 4 5 <!-- HTML4 --> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" > <!-- HTML5 --> <meta charset= "utf-8" > ⑶  使用方式 使用 Unicode 的話,這一切就能懶人化,先查閱 Unicode 特殊符號一覽表,找到對應的圖案,例如西洋棋黑騎士圖案,那麼在網頁想顯示的地方,直接擺上 Html 代碼: 1 &#9822; 輸入以上字元就行,但是為方便維護,建議還是將該內容直接貼上「♞」。 注意:在使用不同的字體時,渲染出來的符號可能會有所不同,因此,iOS 和 Android 將一些unicode字元轉換為表情符號。在您使用這些 unicode 字元之前,最好測試一下它們,確定不會出現在不同瀏覽器表現不同的情況出現。

[特攝]網友票選《最帥特攝俳優》你知道這些人氣男星都是超級戰隊英雄出身的嗎?

  網路資源還沒那麼發達的小時候,第四台能看的日本節目其實很有限,偶爾轉到忍不住停下看的特攝作品也成了接收日本文化的媒介之一。如果說拍攝泳裝寫真是日本女星的必經之路,那麼校園劇和特攝日劇應該就是大部分男星的跳板了,尤其《假面騎士》根本等同"爆紅速成班"一樣主演男星幾乎都大紅,但別忘了《超級戰隊系列》也捧紅不少線上人氣俳優。最近日本網站就請網友們從戰隊英雄出身的俳優中票選了一下覺得最帥的戰隊英雄,大家又會第一個想到誰呢?   第10位:山田裕貴(海賊戰隊豪快者)。   第9位:金子昇(百獸戰隊牙吠連者)。   第8位:白川裕二郎(忍風戰隊破裏劍者)。   第7位:中尾暢樹(動物戰隊獸王者)。   第6位:志尊淳(烈車戰隊特急者)。   第5位 永井大(未來戰隊時間連者)。   第4位:千葉雄大(天裝戰隊護星者)。   第3位:玉山鐵二(百獸戰隊牙吠連者)。   第2位:橫濱流星(烈車戰隊特急者)。   第1位:松坂桃李(侍戰隊真劍者)。   真的好多都是日劇演紅之後才驚覺他們有演過特攝作品的俳優,也更讓人想回去重看這些出道作品呢。