對於網站的 Google 代碼管理工具容器,請依本文說明安裝必要的程式碼片段。有關其他類型的代碼管理工具容器設定,操作步驟也很類似,請見下方資源:
- iOS:iOS 版 Google 代碼管理工具
- Android:Android 版 Google 代碼管理工具
- AMP:AMP 和代碼管理工具設定指南
- 伺服器:伺服器端代碼管理工具
事前準備
- 需要建立代碼管理工具帳戶和容器。
- 需要有網站程式碼的存取權。
步驟
- 前往 https://tagmanager.google.com。
- 登入 Google 帳戶。瞭解如何建立 Google 帳戶。
- 開啟要編輯的代碼管理工具容器。
- 在「工作區」分頁中,選取容器 ID (開頭為「GTM」)。
- 在「安裝 Google 代碼管理工具」對話方塊中,按照下列步驟,完成網站每個網頁的設定:
注意:如果您的網站是使用網站製作工具或內容管理系統 (CMS) 建構而成,例如 WordPress、Shopify 或 Wix,則可以透過整合功能設定 Google 代碼,不需要更新網站中每個網頁上的程式碼。瞭解如何使用網站製作工具或 CMS 加入 Google 代碼
- 複製第一個區塊的程式碼,然後貼到
<head>
代碼內 (盡量安插在最高的位置)。範例
請參閱下列 HTML 程式碼範例,將第一組 Google 代碼管理工具程式碼片段,貼到開頭的 <head> HTML 標記後面。請注意,下列範例使用「GTM-ABCDEFGH」,但您需要將這個 ID 換成容器 ID。<!DOCTYPE html>
<html lang="en">
<head>
<!-- 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-ABCDEFGH');</script>
<!-- End Google Tag Manager -->
<title>範例網頁</title>
</head>
<body>
<!-- Content of your website -->
<h1>歡迎光臨我的網站</h1>
<p>這是網頁的範例段落。</p>
</body>
</html> - 複製第二個區塊的程式碼,並緊貼到
<body>
開頭標記後面。Example
請參閱下列 HTML 程式碼範例,將第二組 Google 代碼管理工具程式碼片段,緊貼到開頭的 <body> HTML 代碼後面。請注意,下列範例使用「GTM-ABCDEFGH」,但您需要將這個 ID 換成容器 ID。<!DOCTYPE html>
<html lang="en">
<head>
<!-- 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-ABCDEFGH');</script>
<!-- End Google Tag Manager -->
<title>範例網頁</title>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-ABCDEFGH"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- Content of your website -->
<h1>歡迎光臨我的網站</h1>
<p>這是網頁的範例段落。</p>
</body>
</html> - 輸入網站連結,接著點按「測試」,即可測試網站。
- 複製第一個區塊的程式碼,然後貼到
- 按一下「確定」。
後續步驟
使用 Google 代碼管理工具設定及管理代碼。