如何將 UET 標籤新增至我的網站?

如何將 UET 標籤新增至我的網站?

建立 UET 標籤後,您必須將該標籤新增至自己的網站。了解如何使用 JavaScript、標籤管理工具或對單頁應用程式 (SPA) 網站進行這項作業。
重要

您必須有辦法編輯自己網站的程式碼,才能新增 UET 標籤追蹤程式碼。如果您不確定該如何編輯自己網站的程式碼,請連絡您的網站管理員。

建立 UET 標籤後,下一步便是將 UET 標籤追蹤程式碼新增至您的網站。建議您或您的網站管理員將追蹤程式碼新增至您網站每個頁面的 head 或 body 區段。又或者,如果您的網站使用了主版頁面,您只要將追蹤程式碼新增至主版頁面一次,您網站的每個頁面就都會包含追蹤程式碼。

您有幾個選項來使用 UET 標籤。您可以使用 JavaScript 直接將 UET 標籤追蹤程式碼加到自己網站的程式碼中,也可以使用協力廠商標籤管理工具。使用標籤管理工具的優點是,您能夠在單一位置管理自己的網站標籤。此外,如果您的網站是建在網站平台上 (例如 Shopify 或 WordPress),您可以使用該系統來加上 UET 標記。

注意

您可以將 UET 標籤追蹤程式碼加在自己網頁 head 區段 (但要在結束 head 標籤:"</head>" 之前) 或 body 區段 (但要在結束 body 標籤:"</body>" 之前) 內的任何位置。

將 UET 標籤追蹤程式碼直接新增至您的網站expando image
如果您已複製追蹤程式碼,或是已下載或透過電子郵件收到追蹤程式碼,可直接將追蹤程式碼貼到您的網站中並跳到步驟 5。
  1. 按一下 [廣告活動] 索引標籤,然後在左窗格按一下 [成交追蹤]
  2. [成交追蹤] 下,按一下 [UET 標籤]
  3. 在資料表中找到您想要使用的 UET 標籤,然後在 [動作] 資料欄位中按一下 [檢視標籤]
  4. [UET 標籤追蹤程式碼] 方塊中,依序按一下 [複製][完成]
  5. 在您網站的每個頁面或是主版頁面貼上 UET 標籤追蹤程式碼 (貼在 head 或 body 區段內都可以)。在下圖中,UET 標籤是貼在網頁 body 區段的頂端。
    UET 標籤
使用標籤管理工具新增 UET 標籤追蹤程式碼expando image

標籤管理工具會將靜態標籤取代成更好實作及更新的動態標籤。所謂的動態標籤是個容器,以一小段程式碼的形式存在,可讓您在自己的網站中動態插入標籤。您可以將容器標籤想成裡頭會裝別種標籤的貯藏桶。

UET 可搭配所有主要的標籤管理系統使用。以下列出目前經測試可支援的標籤管理工具 (及其使用說明連結):

使用您的網站平台新增 UET 標籤追蹤程式碼expando image

UET 已設計成可搭配所有主要的網站平台來使用。以下列出目前經測試可支援您安裝 UET 標籤的平台 (及其使用說明連結):

注意
  • 若要查看已安裝在網頁 body 區段中的 JavaScript UET 標籤追蹤程式碼範例,請造訪這個網頁 (只有英文版)、在網頁中按一下滑鼠右鍵,然後按一下 [檢視原始檔][檢視網頁原始碼] (視您是使用什麼瀏覽器而定)。
  • 您的網頁載入時,會觸發 UET 標籤來產生一些 HTTP 要求。其中最重要的要求便是對 "bat.bing" 發出的要求 (長得像 "http://bat.bing.com/action/0?ti=..." 的要求)。這項要求在告訴 Bing Ads 有使用者造訪了您的網頁。若要監控您的瀏覽器在網頁載入時所提出的一切要求,可以使用 Fiddler 之類的協力廠商工具。

對單頁應用程式 (SPA) 網站使用 UET 標籤

要對常見的單頁應用程式 (SPA) 網站進行追蹤,可謂一大挑戰。在 SPA 中,內容是動態載入,而不會有典型的導覽事件發生。表面上看起來,頁面只有載入一次。但從分析及目標追蹤的角度來看,每次個別的導覽均必須各視為一次新的頁面載入。

了解在 SPA 中啟用 UET 標籤需要做什麼動作expando image

在 SPA 網站中,必須使用 JavaScript UET 標籤追蹤程式碼。SPA 事件是以和自訂事件相同的語法觸發,動作為 "page_view", 位置為 "page_path" 參數 (必要;"page_title" 則為選擇性)。'page_path' 參數的開頭必須是 '/'。範例:

window.uetq = window.uetq || []; 
window.uetq.push('event', 'page_view', { page_path: '/spa_page' });

以下是觸發 SPA 事件的三種不同方式。請注意,我們建議使用的是第一種方式。在每種方式中,各有一個範例網頁,您可以造訪這些網頁來查看實際應用時的適當程式碼。

  • 內容變更:只要您的應用程式載入動態內容,就觸發 SPA 事件。在這個案例中,真正的網址會在第一次載入時自動以標準的 pageLoad 事件傳送回來。您可以在目的地目標中使用這個網址,如此一來,凡是在該第一個頁面觸發的自訂事件,就會與該頁面相關聯。每個 SPA 事件各會以該 SPA 網址 (不需要是可載入的路徑) 產生一個 pageLoad 事件。您也可以在自己的目標中參考這些網址。凡是在 SPA 事件之後觸發的自訂事件,均只會與 SPA pageLoad 相關聯 (換句話說,不是與原始網址相關聯)。
  • 所有頁面:在所有頁面上觸發 SPA 事件,包括初始載入在內。這個案例和上一個相同,只不過不會使用自動 pageLoad 事件。因為這樣仍然會觸發,所以請務必將事件排序成讓 SPA 事件早於任何其他自訂事件來觸發。如果不照這個順序觸發,部分甚至全部事件可能會變成與自動 pageLoad 事件 (及原始網址) 相關聯,而非與 SPA pageLoad 事件 (及含有 page_path 的 SPA 網址) 相關聯。
  • 所有頁面,但停用自動功能:在所有頁面上觸發 SPA 事件,同時還停用自動頁面載入。這是透過在初始化參數中加上 'disableAutoPageView:true' 來實現 (注意:請勿直接修改程式碼片段來進行停用)。這與上一個案例相同,但是並沒有初始頁面載入時 SPA 事件必須最先觸發的要求。不過,後續 SPA 事件仍必須早於任何與其相關聯的自訂事件觸發 (否則這些自訂事件就會歸給前一個 SPA 事件)。

See more videos...