伺服器端代碼簡介

伺服器端代碼是採用 Google 代碼管理工具的新方式,可用來檢測不同裝置上的應用程式。伺服器容器使用的代碼、觸發條件和變數模型與您慣用的代碼、觸發條件和變數模型相同,同時提供新工具,讓您無論發生任何事件,都能評估使用者活動。

沒有伺服器端代碼的典型代碼設定,則是仰賴網頁上的容器,將評估資料傳送至不同的收集伺服器。圖 1 說明在網路瀏覽器中執行的代碼管理工具網站容器如何傳送資料至多個伺服器的範例。

關於使用 Google 代碼管理工具網站容器的網站圖表

圖 1:有關使用 Google 代碼管理工具網站容器的網站圖表。

相較之下,伺服器容器不會在使用者的瀏覽器或手機上執行,而是在您控管的伺服器上執行。

這張圖表顯示了使用伺服器端代碼容器設定的網站。

圖 2:使用伺服器容器的標記設定範例。

伺服器會在您自己的 Google Cloud Platform 專案或您選擇的不同環境中執行,且只有您可以存取伺服器中的資料,直到您選擇將資料傳送至其他位置為止。您可以完全掌控資料的形狀方式,以及資料從伺服器轉送的位置。代碼採用沙箱 JavaScript 技術建構。權限可讓您瞭解標記可執行的操作,政策則可讓您設定容器周圍的邊界。

伺服器會接收使用者裝置傳出的網路要求,並將這類要求轉換為事件。每個事件都會由容器的標記、觸發條件和變數處理。伺服器容器中的代碼、觸發條件和變數的運作方式與其他類型的容器完全相同:觸發條件會檢查每個事件,尋找特定條件;如果適用,還會觸發傳送要處理事件資料的代碼。

這個模型針對伺服器容器提出兩個重要問題:

  • 如何將評估資料從使用者的裝置傳送到伺服器容器?
  • 傳送至伺服器容器的評估資料會如何轉換成事件?

兩個問題的答案都是用於伺服器容器的新種類:用戶端

客戶的運作方式

用戶端是使用者裝置上執行的軟體與您的伺服器容器之間的轉接器。用戶端會從裝置接收測量資料、將該資料轉換為一或多個事件,在容器中轉送要處理的資料,並封裝結果並回傳給要求者。

內容過多!接著就來深入瞭解各個部分。 圖 3 顯示資料從使用者的網路瀏覽器傳入伺服器容器,以及從網路伺服器到伺服器容器的流程。

這張圖表顯示了使用伺服器端代碼容器設定的網站。

圖 3:每個資料串流都由不同的用戶端處理。

用戶端會從裝置接收評估資料。假設您想要在以下三個位置評估使用者活動:網站、手機應用程式和智慧型烤麵包機。網站使用 Google Analytics (分析),您的手機應用程式使用 Firebase Analytics,而浮動式訊息會使用名為「ToastMeasure」的專屬通訊協定。

使用 Google 代碼管理工具檢測這三個裝置時,通常需要為每個平台使用不同的容器。由於伺服器容器不會在裝置上執行,因此同一容器可以處理全部三個裝置平台的分析檢測作業。儘管有問題,這些裝置的通訊方式不盡相同。Google Analytics (分析) 通訊協定與 ToastMeasure 通訊協定不同。這時客戶就能派上用場。

為了取代這三個容器,您的伺服器容器會有三個用戶端。每個用戶端收到容器的每個要求都會依照優先順序進行處理,由優先順序最高的用戶端優先處理。每個用戶端首先會判斷是否要處理這類要求。如果可以,用戶端會「認領」要求,並繼續執行下一個處理階段。認領要求的動作會禁止後續用戶端執行。如果用戶端無法處理要求,則不會執行任何動作,並允許其他用戶端決定是否處理要求。

用戶端將要求資料轉換為一或多個事件。ToastMeasure 用戶端聲明瞭要求後,必須將要求轉換為容器的其餘部分能理解的內容。也就是一組「事件」

「事件」是指需要評估的發生事件。可以是任何內容:start_toastingfinish_toastingbuy_bread。用戶端產生的事件結構有些建議,但容器的其餘部分必須能夠理解這些建議。

用戶端執行容器。用戶端已認領要求,並將其轉換成事件。接著,設定代碼、觸發條件和變數。用戶端會將每個事件傳遞至容器的其餘部分,進行後續處理。

用戶端會封裝結果並傳回裝置。容器執行後,這時就可以回應浮動式訊息。回應可能會以多種形式呈現。也許客戶剛剛說「好,完成了」。也許其中一個標記要將要求重新導向至另一個收集伺服器。或者,其中一種標籤也會指示烤麵包機上的燈光改變顏色。無論情況為何,用戶端都必須負責封裝結果,並將結果傳送回要求者。

幸好,代碼管理工具會代您處理大部分的作業。伺服器容器內含三個用戶端:Google Analytics (分析) 4、Google Analytics (分析):通用 Analytics (分析) 和 Measurement Protocol。建立容器後,這些用戶端可提供您開始檢測應用程式所需的工具。

簡短範例

以下簡單舉例說明所有部分如何搭配在一起。在這個範例中,您會建立以下內容:

  1. 使用 gtag.jsclick 事件傳送至伺服器容器的簡易網站。
  2. 接收事件的 Google Analytics (分析) 4 用戶端。
  3. click 事件觸發的觸發條件。
  4. Google Analytics (分析) 4 代碼,可將事件資料傳送至 Google Analytics (分析) 進行處理。

在本範例中,我們假設您已經建立並部署伺服器容器。

設定 gtag.js

首先,請設定 gtag.js 將資料傳送至伺服器容器。使用 gtag.js 傳送資料至伺服器容器的運作方式就像傳送資料至 Google Analytics (分析) 一樣,只需修改就能執行。如下方範例頁面所示,請將 server_container_url 設定選項設為指向伺服器容器。

<!-- 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', 'TAG_ID', {
    server_container_url: 'https://analytics.example.com',
  });
</script>

TAG_ID 替換成您的標記 ID。 請將 https://analytics.example.com 替換成您的伺服器容器網址。

接著,新增 sendEvent() 函式來處理 click 事件:

<!-- 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', 'TAG_ID', {
    server_container_url: 'https://analytics.example.com',
  });

  function sendEvent() {
    gtag('event', 'click');
  }
</script>

<button onclick="javascript:sendEvent()">Send Event</button>

TAG_ID 替換成您的標記 ID。 請將 https://analytics.example.com 替換成您的伺服器容器網址。

採用這項設定後,事件處理常式 (例如本範例內含的 sendEvent() 函式) 會將 click 事件傳送至您的伺服器容器。

Google Analytics (分析) 4 用戶端

容器需要用戶端在到達伺服器時接收事件。幸好,伺服器容器已預先安裝 Google Analytics (分析) 4 用戶端,因此您已完成這個步驟。

點擊觸發條件

接下來,請建立在 click 事件上啟動的觸發條件。建立自訂觸發條件,當「事件名稱」內建變數等於「點擊」時觸發。

觸發條件設定

Google Analytics (分析) 4 代碼

最後,將 GA4 代碼附加至觸發條件。如同用戶端,伺服器容器也內含 GA4 代碼。您只需建立代碼並調整設定 就能連結容器了GA4 用戶端和 GA4 代碼可以搭配運作。也就是說,您只需要建立 GA4 代碼,設定就會自動從用戶端傳出的事件中提取。

預覽容器

現在容器設定完畢後,請按一下「預覽」。請用另一個瀏覽器視窗造訪您的網站系統將要求和事件傳送至伺服器容器時,在預覽頁面左側將列出要求和事件。

滿意變更後,請發布伺服器容器。

採用第一方服務,將伺服器設為實際執行模式

將任何實際工作環境流量傳送至伺服器容器之前,強烈建議您在第一方網域安裝伺服器,並將伺服器升級至實際工作環境模式