Google 代碼管理工具
此頁面列印時間為 Jun 02, 2023。如須最新版本,請至 https://help.shopify.com/zh-TW/manual/reports-and-analytics/google-analytics/google-tag-manager。
使用 Google 代碼管理工具的考量事項
若要在 Shopify Plus 網路商店使用 Google 代碼管理工具,請按照以下方式操作:
- 取得
checkout.liquid
檔案的存取權限。如果您沒有存取佈景主題程式碼檔案的權限,請聯絡 Shopify Plus 支援服務取得協助,以改為搭配 Google 代碼管理工具使用 Checkout Extensibility。 - 利用 Shopify 的整合功能來使用 Google Analytics (分析) 和 Meta 像素,而非透過 Google 代碼管理工具來使用上述兩者。
- 複製 Google Tag Manager 提供的程式碼片段,並貼上至
theme.liquid
和checkout.liquid
佈景主題檔案。
將 Google 代碼管理工具程式碼新增到主題中
步驟:
-
安裝 Google 代碼管理工具,取得所需的程式碼片段,複製該片段後貼到 Shopify 商店中。由於 Shopify 使用範本,您僅需複製程式碼片段並貼上至
theme.liquid
和checkout.liquid
檔案即可。- 如果您是初次安裝 Google 代碼管理工具,請參考 Google 代碼管理工具提供的安裝步驟。請在取得要新增至網頁中的兩個程式碼片段時暫停,然後按照下方說明操作。
- 如果您已安裝 Google 代碼管理工具,請點擊「管理員」,然後點擊「安裝 Google 代碼管理工具」,即可在 Google 代碼管理工具中找到所需的程式碼片段。
在 Shopify 管理介面,依序按一下「線上商店」和「主題」。
在主題下拉式選單中,按一下「編輯程式碼」。
-
複製 Google 代碼管理工具的第一段程式碼片段,並貼到
theme.liquid
和checkout.liquid
程式碼的<head>
代碼中:- 複製 Google 代碼管理工具的第一段程式碼片段
- 在 Shopify 管理介面 ,開啟
theme.liquid
檔案。 - 盡可能將程式碼片段貼在與
theme.liquid
程式碼的<head>
等高位置。 - 開啟
checkout.liquid
檔案。 - 盡可能將程式碼片段貼在與
checkout.liquid
程式碼的<head>
等高位置。
-
複製 Google 代碼管理工具的第二段程式碼片段,並貼到
theme.liquid
和checkout.liquid
程式碼的<body>
代碼中:- 在 Shopify 管理介面 ,開啟
theme.liquid
頁面。 - 盡可能將程式碼片段貼在與
theme.liquid
頁面的<body>
等高位置。 - 開啟
checkout.liquid
頁面。 - 盡可能將程式碼片段貼在與
checkout.liquid
程式碼的<body>
等高位置。
- 在 Shopify 管理介面 ,開啟
在 Shopify 管理介面 ,按一下「儲存」。
-
在 Google 代碼管理工具中繼續安裝 Google 代碼管理工具。系統提示您新增代碼時,請勿新增下列類型的代碼:
- Google Analytics (分析) 的通用 Analytics (分析)
- 舊版的 Google Analytics (分析)
- Meta 像素
驗證 Google 代碼管理工具是否已安裝
若要驗證您已正確安裝 Google 代碼管理工具,您可以使用:
- Google 代碼管理工具的預覽模式
- Google Tag Assistant Chrome 擴充功能。