分析現有的代碼設定

安裝新代碼前,請先評估網站或行動應用程式中現有的代碼 (如果有的話),以免新增任何多餘的代碼。本文說明評估現有代碼的方法。

即使在初步評估後,您仍應將定期檢查納入標準代碼管理流程中。為保護資料安全,請務必定期評估在網站或應用程式上執行的代碼。

如要評估現有代碼,請使用下列資源:

標記助理

Google Tag Assistant 是一種代碼分析工具,用於安裝 Google 代碼 (gtag.js)。啟用後,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

Google 代碼 (gtag.js)

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

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

    gtag('config', 'UA-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', 'UA-XXXXXX-1');
    gtag('config', 'UA-YYYYYY-2');
    gtag('config', 'TAG_ID');
  </script>

每個 config 行都包含產品前置字串 (指出要設定的產品),後面接著所設定帳戶的 ID。以下進一步說明產品前置字串。

Google 代碼的產品前置字元

代碼 ID 可用來識別 Google 代碼。一個 Google 代碼可包含多個代碼 ID。舉例來說,如果您使用 Google Ads,代碼現在有兩個 ID:一個舊版 ID (AW) 和一個 Google 代碼 ID (GT)。 畫面顯示 Google Ads 中具有兩個代碼 ID 的 Google 代碼。 代碼 ID 可互換。下表概略列出與 Google 代碼相容的代碼。
前置字串 ID 類型 說明
GT-XXXXXX Google 代碼 每個新建立的 Google 代碼都會有一個 GT 前置字元和專屬 ID。
G-XXXXXX Google 代碼 (舊版前置字元) Google Analytics (分析) 4 代碼是含有「G」前置字元和專屬 ID 的 Google 代碼。
AW-XXXXXX Google 代碼 (舊版前置字元) Google Ads 代碼是 Google 代碼,開頭為 AW 前置字元和專屬 ID。
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。 接著,您就可以檢查網站的代碼、觸發條件及變數設定