分析現有的代碼設定

安裝新代碼前,請先評估網站或行動應用程式中是否已存在代碼,以免新增多餘的代碼。本文將說明評估現有代碼的方法。

即使您已完成初步評估,也應將定期檢查納入標準代碼管理程序。定期評估網站或應用程式中執行的代碼,對於資料保護和安全性至關重要。

如要評估現有的標記,請參考下列資源:

Tag Assistant

Google Tag Assistant 是 Google 代碼安裝作業的代碼分析工具。啟用後,Tag Assistant 會在瀏覽器中顯示偵錯窗格,方便您查看哪些 gtag.js 指令已觸發,以及觸發的順序為何。Tag Assistant 會顯示哪些資料將傳送至資料層,以及觸發這些資料交換作業的事件。也會顯示命中 (HTTP 要求) 和相關參數。進一步瞭解 Tag Assistant

代碼管理工具

您可以檢查代碼管理工具帳戶和容器,以分析現有的代碼設定。代碼管理工具也提供預覽模式,其功能與 Tag Assistant 相似。

您可以使用代碼管理工具容器中的搜尋列,找出代碼、觸發條件和變數中的代碼行、代碼或設定。搜尋列是找出可能含有需要重新評估的設定或程式碼的最佳方法。

版本

代碼管理工具中的「版本」功能會顯示現有容器設定的摘要。

  1. 在代碼管理工具中,按一下「版本」
  2. 按一下清單中的最新版本,即可查看容器目前的狀態。

代碼管理工具會在這個資料檢視中顯示代碼、觸發條件、變數和自訂範本。

預覽模式

代碼管理工具的預覽模式會顯示網頁上觸發的代碼、觸發這些代碼的事件,以及推送至資料層的資料。預覽模式的運作方式與 Tag Assistant 大致相同。 進一步瞭解預覽模式

手動檢查程式碼

如要進一步分析現有的代碼設定,建議您手動檢查程式碼。請在原始碼中搜尋以下常見的代碼關鍵字,以便找出任何可能的代碼設定:

  • gtag(:這是 gtag() 指令的開頭,這些程式碼片段通常包含額外的檢測功能。
  • googletagmanager.com:這個網域會載入代碼管理工具和 gtag.js 功能,可協助您找出這類代碼。

如果您已有 gtag.js 或 Google 代碼管理工具,或許就能更新現有代碼或檢測,不必導入新的設定。

  • dataLayer:可用於確認是否已建立資料層程式碼,以及 dataLayer.push() 呼叫特定事件的檢測設備。
  • analytics.jsga.js:用於舊版 Google Analytics 導入作業的程式庫檔案名稱。
  • conversion.jsconversion_async.js:Google Ads 轉換評估所用的程式庫檔案名稱。
  • optimize.js – 用於 Google 最佳化工具代碼。
  • 可能包含 Google 代碼的第三方代碼管理系統。在原始碼中尋找可能的第三方代碼管理系統,例如 utag.js_satellite

gtag.js

如果您已使用 Google 代碼片段,將其加入網頁,您可以查看代碼,進一步瞭解其用途。核心標記如下所示:

  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=GA-XXXXXX-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'GA-XXXXXX-1');
  </script>

您可能會看到其他產品和帳戶多行 gtag('config',...)。例如:

  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    
    gtag('config', 'GA-XXXXXX-1');
    gtag('config', 'GA-YYYYYY-2');
    gtag('config', 'TAG_ID');
  </script>

每個 config 行都包含產品前置字串 (用於指出要設定哪項產品),後面接著要設定的帳戶 ID。如要進一步瞭解產品前置字元,請參閱下方說明。

Google 代碼的產品前置碼

代碼 ID 可用來識別 Google 代碼。一個 Google 代碼可有多個 ID。舉例來說,如果您使用 Google Ads,代碼現在會有兩個 ID:一個舊版 ID (AW) 和一個 Google 代碼 ID (GT)。 畫面顯示 Google Ads 中的 Google 代碼,其中有兩個代碼 ID。 代碼 ID 可互換使用。下表概略說明哪些代碼與 Google 代碼相容。
前置字串 ID 類型 說明
GT-XXXXXX Google 代碼 每個新建立的 Google 代碼都會獲得一個 GT 前置字元和專屬 ID。
G-XXXXXX Google 代碼 (舊版前置字元) Google Analytics 4 代碼是含有 G 前置字元和專屬 ID 的 Google 代碼。
AW-XXXXXX Google 代碼 (舊版前置字元) Google Ads 代碼是含有 AW 前置碼和專屬 ID 的 Google 代碼。
DC-XXXXXX Google 代碼 (舊版前置字元) Google Floodlight 代碼是含有 DC 前置字元和專屬 ID 的 Google 代碼。
通用 Analytics (UA) 代碼與 Google 代碼 (GT) 不相容。

透過 Google 代碼設定的網頁,可能會有 ID 前置字串為「G」或「AW」。「G」前置字串表示 Google 代碼最初是在 Google Analytics 中建立。前置字串「AW」表示 Google 代碼最初是在 Google AdWords 中建立。這兩個 ID 是代碼 ID 的不同版本,可互相替換,因此如果您看到含有其中一個前置字元的 ID,就不需要再新增含有另一個前置字元的 ID。進一步瞭解如何設定代碼 ID

Google 代碼管理工具

使用代碼管理工具設定的網頁會安裝容器代碼,如下例所示。您可以檢查容器程式碼,找出代碼管理工具容器 ID。容器 ID 開頭為「GTM-」,下方列出容器 ID 的示例。

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<:!-- End Google Tag Manager -->

取得容器 ID 後,請開啟 Google 代碼管理工具帳戶畫面,然後按一下 來搜尋這個 ID。接著,您可以檢查網站的代碼、觸發條件和變數設定