安裝新代碼前,請先評估網站或行動應用程式中現有的代碼 (如果有的話),以免新增任何多餘的代碼。本文說明評估現有代碼的方法。
即使在初步評估後,您仍應將定期檢查納入標準代碼管理流程中。為保護資料安全,請務必定期評估在網站或應用程式上執行的代碼。
如要評估現有代碼,請使用下列資源:
標記助理
Google Tag Assistant 是一種代碼分析工具,用於安裝 Google 代碼 (gtag.js)。啟用後,Tag Assistant 會在瀏覽器中顯示偵錯窗格,方便您查看 gtag.js 指令已經觸發,以及觸發的順序。Tag Assistant 會顯示哪些資料要傳遞至資料層,以及哪些事件觸發了這些資料交換。此外也會顯示命中 (HTTP 要求) 和相關參數。進一步瞭解 Tag Assistant。
代碼管理工具
您可以檢查代碼管理工具帳戶和容器,分析現有的代碼設定。代碼管理工具還提供預覽模式,此模式與 Tag Assistant 類似。
搜尋
使用代碼管理工具容器中的搜尋列,即可找出代碼、觸發條件和變數中的代碼、設定或程式碼行。搜尋列是找出含有所需設定或程式碼 (需要重新評估) 的標記的絕佳方法。
版本
- 在代碼管理工具中,按一下「版本」。
- 按一下清單中的最新版本,即可查看容器的目前狀態。
代碼管理工具會在這個檢視畫面中準備代碼、觸發條件、變數和自訂範本。
預覽模式
代碼管理工具中的預覽模式會顯示網頁觸發的代碼、哪些事件觸發這些代碼,以及推送至資料層的資料。預覽模式的運作方式與 Tag Assistant 大同小異。進一步瞭解預覽模式。
手動檢查程式碼
如要更全面分析現有的標記設定,請考慮手動檢查程式碼。在原始碼中搜尋部分常見標記關鍵字,以找出任何可用的代碼設定:
gtag(
:這是gtag()
指令的開場,這些程式碼片段通常包含其他檢測作業。googletagmanager.com
:這個網域會載入代碼管理工具和 gtag.js 的功能,協助您找出這兩種代碼。
如果您已有 gtag.js 或 Google 代碼管理工具,或許可以更新現有代碼或檢測設備,而不必導入新的設定。
dataLayer
- 可用來確認是否已建立資料層程式碼,以及針對特定事件提供檢測的dataLayer.push()
呼叫。analytics.js
或ga.js
- 用於舊版 Google Analytics (分析) 導入作業的程式庫檔案名稱。conversion.js
或conversion_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)。 代碼 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 代碼。 |
使用 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。 接著,您就可以檢查網站的代碼、觸發條件及變數設定。