設定 Google 產品及傳送事件資料

本頁面適用於需要使用 gtag.js 設定 Google 代碼的開發人員。您也可以透過 Google 代碼在使用者介面中調整部分設定，詳情請參閱「配置 Google 代碼設定」。

安裝 Google 代碼後，您可以在程式碼中 Google 代碼片段之後的任何位置呼叫 gtag() 指令。

本文包含下列做法：

1. 使用 config 指令，在網站和 Google 產品之間建立資料流程
2. 使用 event 指令將事件傳送至 Google 產品
3. 使用 set 指令設定要隨著每個事件傳送的值

事前準備

請務必先完成下列事項，再按照本指南的說明操作：

• 熟悉 Google 代碼的運作方式
• 已安裝 Google 代碼

如要設定資料流程，您需要：

• 可存取已安裝 Google 代碼的網站程式碼
• 要連結至 Google 代碼的 Google 產品代碼 ID

什麼是代碼 ID？如何找出代碼 ID？

代碼 ID 用於識別 Google 代碼。一個 Google 代碼可有多個 ID。 舉例來說，如果您使用 Google Ads，代碼現在會有兩個 ID：一個舊版 ID (AW) 和一個 Google 代碼 ID (GT)。 代碼 ID 可互換。下表概略列出與 Google 代碼相容的代碼。

前置字串	ID 類型	說明
GT-XXXXXX	Google 代碼	每個新建立的 Google 代碼都會有 GT 前置字串和專屬 ID。
G-XXXXXX	Google 代碼 (舊版前置字串)	Google Analytics 代碼是前置字元為 G 的 Google 代碼，並具有專屬 ID。
AW-XXXXXX	Google 代碼 (舊版前置字元)	Google Ads 代碼是 Google 代碼，前置字元為 AW，並有專屬 ID。
DC-XXXXXX	Google 代碼 (舊版前置字串)	Google Floodlight 代碼是前置字元為 DC 的 Google 代碼，並具有專屬 ID。

通用 Analytics (UA) 代碼與 Google 代碼 (GT) 不相容。

找出代碼 ID：

• Google Ads
• Google Analytics
• Google Floodlight

步驟 1：將 Google 產品連結至代碼

使用 config 指令建立資料流向 Google 產品的資料流。

關於 config 指令

config 指令會指定要將事件資料傳送至哪些 Google 產品。指令格式如下：

gtag('config', 'TAG_ID', {<additional_config_params>});

gtag('config', 'TAG_ID', {'send_page_view': false});

設定資料收集

如要為 Google 產品設定資料收集，請新增 config 指令並附上代碼 ID。

範例

Google 代碼 (GT-XXXXXX) 會將資料傳送至您定義的目的地，例如 Google Ads 和 Google Analytics。

以下範例說明如何更新程式碼，載入與 Floodlight 目的地連結的第二個 Google 代碼。

如要將資料傳送至 Floodlight (代碼 ID DC-ZZZZZZ)，請在初始化第一個 Google 代碼 (代碼 ID GT-XXXXXX) 後，新增另一個 config 指令：

<head>
 ...
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());
  gtag('config', 'GT-XXXXXX');
  gtag('config', 'DC-ZZZZZZ');
</script>
</head>

產品專屬 config 行為

視 TAG_ID 中指定的產品而定，config 指令也可能啟動該產品的特定行為。舉例來說，在某些情況下，config 指令會指示 gtag.js 啟動網頁瀏覽事件。

如要進一步瞭解 config 指令在個別產品中的行為，請參閱各產品適用的說明文件：

• Google Ads 轉換和再行銷
• Campaign Manager 和 Display & Video 360
• Search Ads 360
• Google Analytics

步驟 2：使用 event 傳送資料

設定與 Google 產品的連線後，您需要使用 event 指令傳送資料。

關於 event 指令

event 指令可讓您將事件資料傳送至 config 指定的產品。指令格式如下：

gtag('event', 'event_name', {
  'key': 'value',
});

設定事件

初始化 Google 代碼後，您可以在程式碼中的任何位置呼叫 event 方法。

1. 定義事件。如果您使用的是建議事件，請務必使用標準化事件名稱和預先定義的鍵/值組合。

2. 定義事件的觸發時機，例如在載入網頁時傳送，或在使用者點選按鈕時傳送。

範例

以下範例說明使用者點選按鈕時，其中一種可能用來評估電子報訂閱的方法。這個範例使用自訂事件，並將事件傳送至 Google Analytics 資源。

<head>
   ...
   /* 1. Initialize the Google tag and gtag.js library */
   <!-- 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');
   </script>
</head>

<body>
   <script>
     let date = Date.now();
     /* 2. Define your event. */
     function newsletterSignup() {
       gtag('event', 'newsletter_signup', {
       'time': date,
       });
   }
   </script>
   ...
   /* 3. Trigger your event */
   <button type="submit" onclick="newsletterSignup()">Sign me up!</button>
   ...
</body>

選用：使用 set 傳送每個事件的資料

set 指令可讓您定義與網頁上每個後續事件相關聯的參數。

舉例來說，您可以共用廣告活動參數，讓同一頁面上的多個代碼都能存取這些參數。

指令格式如下：

gtag('set', 'parameterName');

步驟 3：驗證設定

為確保系統正確傳送事件資料，請採取下列行動：

1. 開啟您預期會看到資料的 Google 產品。
2. 檢查是否有資料傳入。每項產品都有不同的位置，可供您查看是否收到資料：
   • Google Analytics：查看即時報表。
   • Google Ads：查看「轉換動作」表格，然後查看「狀態」欄 (最多可能需要 24 小時才會更新)。
   • Floodlight：使用 Tag Assistant 確認 Floodlight 代碼是否觸發。

後續步驟

設定 Google 產品和事件後，基本的 Google 代碼設定就完成了。

如要管理多項產品，並詳細瞭解資料流向，請參閱「分組及傳送資料」。