第一方模式:透過伺服器端代碼載入 Google 指令碼

本文適用於使用伺服器端代碼,且想透過自有伺服器提供 Google 指令碼的開發人員。

透過伺服器端標記,您可以直接從自己的標記伺服器載入 Google 指令碼 (例如 gtm.js 或 gtag.js),而非從 Google 的伺服器載入。這樣一來,您就能在第一方情境中放送資料。

本指南假設您已完成下列事項:

如要開始使用,請選擇導入選項。

步驟 1:設定用戶端

如要在網頁容器和標記伺服器之間建立第一方情境,Google 指令碼必須透過伺服器載入。

如要透過伺服器容器載入 Google 指令碼,請按照下列步驟操作:

  1. 開啟 Google 代碼管理工具
  2. 在伺服器容器中,按一下「客戶」
  3. 按一下「新增」
  4. 選取「Google 代碼管理工具:網站容器」用戶端類型。 「Choose client type」對話方塊,其中標示出「Tag Manager:Web Container」用戶端

  5. 在「用戶端設定」中:

    • 新增容器 ID:輸入您要在網站上使用的代碼管理工具網站容器的容器 ID。
    • 自動執行所有相依的 Google 指令碼:啟用這項功能 (預設設定) 後,標記伺服器會自動執行根 Google 指令碼所需的指令碼。這樣一來,您就不需要將 Google 指令碼所需的每個容器都列入許可清單。如果您只想從標記伺服器提供初始容器,請取消選取這個選項。
    • 啟用區域專屬設定:使用這個選項,根據使用者所在位置觸發特定代碼。瞭解詳情

    代碼管理工具網頁容器用戶端的螢幕截圖

  6. 為客戶命名,然後按一下「儲存」

  7. 發布工作區。

步驟 2:更新指令碼來源網域

根據預設,代碼管理工具或 gtag.js 會從 Google 自有伺服器 (例如 https://example.com/metrics) 載入依附元件。如要透過您的自有伺服器載入依附元件,請更新網站上的指令碼網址。

如要透過伺服器容器載入 GTM 代碼,請按照下列步驟操作:

  1. 找出網頁上現有的代碼管理工具程式碼。
  2. 在 Google 代碼管理工具安裝程式碼的 <head><body> 中,將 https://example.com/metrics 字串換成標記伺服器的網域名稱。

    • 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://example.com/metrics/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
    <!-- End Google Tag Manager -->
    
    • 內文:
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://example.com/metrics/ns.html?id=TAG_ID"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    

步驟 3:驗證指令碼來源

下列操作說明說明如何使用 Google Chrome 進行測試。您可以使用任何瀏覽器,但步驟可能會有所不同。

如要測試伺服器容器是否載入依附元件,請按照下列步驟操作:

  1. 在新的瀏覽器分頁中開啟網站。
  2. 開啟瀏覽器的開發人員工具。在 Google Chrome 中,您可以對頁面上的任一處按一下滑鼠右鍵,然後選取「檢查」
  3. 在開發人員工具中,開啟「Sources」分頁。這個視窗會顯示開啟網站時載入的所有依附元件。

    • ✅ 如果 gtm.js 是從您指定的來源載入,表示實作方式正確無誤。

    開發人員工具的螢幕截圖,其中使用您自己的伺服器做為 Google 指令碼的來源

    • ❌ 如果「Sources」分頁顯示 www.googletagmanager.comgtm.js 的來源,依附元件仍會從 Google 伺服器載入。

    開發人員工具的螢幕截圖,其中 www.googletagmanager.com 是 Google 指令碼的來源

    • 請檢查是否已在程式碼中修改來源網址,請參閱步驟 2
    • 檢查代碼是否已啟用。

後續步驟

如果您使用同意聲明模式,可以設定特定區域的代碼行為,進一步控管廣告活動。