伺服器端代碼簡介

伺服器端代碼是使用 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。對於用戶端產生的事件結構,我們提供了一些建議,但唯一的要求是容器的其餘部分必須瞭解這些事件。

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

用戶端會將結果封裝,然後傳回裝置。容器執行完畢後,就可以回覆快訊。回覆內容可以採用多種形式,Maybe the client just says "OK, done." 或許其中一個代碼想將要求重新導向至其他收集伺服器。或者,其中一個標籤會指示烤麵包機上的燈光變更顏色。無論應該發生什麼事,用戶端的工作都是將結果封裝並傳回給要求者。

幸好,代碼管理工具會為您處理大部分這類事項。伺服器容器內含 2 個用戶端:Google Analytics 和 Measurement Protocol。建立容器後,您就能立即使用這些用戶端提供的工具,開始檢測應用程式。

簡短範例

讓我們快速瀏覽一個範例,瞭解所有部分如何整合。在本範例中,您將建立下列項目:

  1. 使用 gtag.jsclick 事件傳送至伺服器容器的簡易網站。
  2. 接收事件的 Google Analytics 用戶端。
  3. click 事件觸發時啟動的觸發條件。
  4. Google Analytics 代碼,可將事件資料傳送至 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 用戶端

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

點擊觸發條件

接著,建立在 click 事件觸發時啟動的觸發條件。建立自訂觸發條件,在事件名稱內建變數等於「click」時觸發。

觸發條件設定

Google Analytics 代碼

最後,將 Google Analytics 代碼附加至觸發條件。與用戶端一樣,伺服器容器也會內含 Google Analytics 代碼。只要建立代碼、設定相關設定,即可完成容器的連線。Google Analytics 用戶端和 Google Analytics 代碼可搭配運作。也就是說,您只需要建立 Google Analytics 代碼,系統就會自動從用戶端傳送的事件中提取設定。

預覽容器

容器設定完成後,請按一下「預覽」。在其他瀏覽器視窗中造訪您的網站。要求和事件傳送至伺服器容器後,預覽頁面左側會列出這些要求和事件。

確認變更內容無誤後,請發布伺服器容器。

設定伺服器,以便在正式環境模式中放送第一方廣告

將任何正式版流量傳送至伺服器容器前,強烈建議您先在第一方網域上安裝伺服器,並將伺服器升級至正式版模式