Install the Google Tag Manager container snippet
您可以運用 Google 代碼管理工具,設定及部署 Google 產品和第三方的代碼。
什麼是代碼?
「代碼」是指由分析、行銷和支援供應商提供的程式碼片段,可協助您將產品整合至網站或行動應用程式。使用 Google 代碼管理工具,您就不必將這些代碼直接新增至專案中;只要在「代碼管理工具」的使用者介面中指定及發布代碼,並設定代碼啟動方式就行了。
什麼是帳戶?
「代碼管理工具」帳戶代表機構組織的最頂層。一般來說,一家公司只需要一個帳戶。「代碼管理工具」帳戶含有一或多個容器。
什麼是容器?
容器由多個代碼和用來管理代碼的規則構成,可分成許多種,分別適用於:
- 網站
- AMP 網頁
- Android 應用程式
- iOS 應用程式
- 在伺服器上執行代碼管理工具
1. 建立新帳戶和容器
建立新帳戶時,您需要逐步完成新容器的設定步驟。
- 在代碼管理工具中,依序點選「帳戶」分頁標籤 >「建立帳戶」。
- 輸入「帳戶名稱」,然後選取帳戶的國家/地區。
- 輸入描述性的「容器名稱」,然後選取容器類型。
- 如要建立容器,請按一下「建立」並同意《服務條款》。
結果
首次載入新容器時,系統會根據容器類型顯示不同的對話方塊。
- 網頁和 AMP:您會收到網站的安裝程式碼片段。
- iOS 和 Android:您會收到開發人員說明文件的連結。
- 伺服器:您可以選擇自動或手動佈建伺服器。
您可以立即安裝容器,也可以按一下「確定」清除對話方塊,之後再繼續安裝。
如要從多個來源 (例如網站和應用程式) 收集指標,您必須為每個平台另外建立更多容器。
選用:在帳戶中加入更多容器
- 開啟代碼管理工具。
- 在「帳戶」分頁中,依序點選帳戶名稱旁邊的「更多動作」圖示 >「建立容器」。
- 輸入清楚易懂的「容器名稱」,然後選取容器類型。
- 按一下「建立」並同意《服務條款》,即可建立容器。
2. 安裝容器
請按照下列說明設定網站容器,用來追蹤網站上的代碼。如果您對於編寫程式碼不熟悉,或是無權存取網站或行動應用程式的程式碼,建議在這個步驟尋求開發人員協助。
- 在「代碼管理工具」中按一下「工作區」。
- 在視窗頂端附近,找到格式為「GTM-XXXXXX」的容器 ID。
- 按一下容器 ID,「安裝代碼管理工具」方塊就會在畫面上顯示。
- 按照「安裝代碼管理工具」方塊中的操作說明,複製程式碼片段並貼進網站。
- 在網頁 HTML 輸出程式碼的
<head>
部分,安插<script>
程式碼片段 (位置應盡量靠近<head>
開頭標記,而且必須在所有的 dataLayer 宣告下方)。 - 在 HTML 輸出程式碼中,將
<noscript>
程式碼片段安插在緊接<body>
標記之後的位置。
- 在網頁 HTML 輸出程式碼的
如果您的網站原本就包含代碼,請將這些代碼遷移至代碼管理工具容器,做法請見「3. 新增代碼」一節。請務必將程式碼中以硬式編碼方式寫入的代碼全數移除,以免代碼啟動兩次。
代碼管理工具的網頁程式碼片段預設使用 HTTPS 通訊協定,以免容器遭到第三方窺探。
若您因故必須以支援非安全網頁的方式部署代碼管理工具容器,只要將容器片段中的來源網址通訊協定從 https://
改為 //
即可。若想進一步瞭解如何使用通訊協定相關網址,請見這篇文章。
3. 新增標記
在網站上安裝容器後,就可以新增代碼了。Google 代碼管理工具可支援 Google 產品代碼和第三方代碼,如要接收 Google 產品的指標資料,請設定 Google 代碼。
- 在工作區中按一下「 代碼」。
- 按一下「新增」加入代碼。
- 為代碼命名並進行設定:
- 代碼設定:選擇您要管理的代碼類型。請參閱「Google 代碼管理工具指南」,進一步瞭解如何在代碼管理工具中設定特定 Google 產品的代碼。
如果沒有相符的代碼類型,您可以建立自訂 HTML 標記或圖片代碼。 - 觸發條件:觸發條件用來控制觸發或封鎖網頁代碼的時機。若想進一步瞭解觸發條件,請見這篇文章。
- 代碼設定:選擇您要管理的代碼類型。請參閱「Google 代碼管理工具指南」,進一步瞭解如何在代碼管理工具中設定特定 Google 產品的代碼。
- 選用步驟:您可視需求在設定中加入附註,以便日後參考。如果要這麼做,請按一下更多動作選單圖示 ,然後選取「顯示附註」。
- 按一下「儲存」,然後視需要建立更多代碼。
4. 確認代碼可正常運作
新增代碼後,您需要確認代碼能夠正常運作。檢查代碼設定的步驟如下:
- 按一下「預覽」按鈕,Google Tag Assistant 會在新分頁中開啟。
- 輸入安裝了代碼管理工具容器的網站網址。如有任何錯誤,請使用 Tag Assistant 進行偵錯。
- 若要修改代碼,請按一下代碼名稱來修改設定。舉例來說,假設代碼原本是在網頁載入後觸發,但您希望改成在使用者按下按鈕時觸發代碼,這時只要更新觸發條件即可。
- 儲存修改完畢的代碼,然後重新啟動「預覽」模式,確認是否解決了問題。
5. 發布代碼
確認代碼可正常運作後,就可以發布了。
請按照下列步驟發布目前的工作區:
- 按一下畫面右上角的 [提交],這時候會出現「提交變更」畫面,其中列出多種可使用的容器版本發布及儲存選項。
- 設定完成後請選取 [發佈及建立版本]。
- 檢查「工作區變更」部分,確認一切設定都正確無誤。
- 輸入「版本名稱」和「版本說明」。
- 按一下「發布」。