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

本頁內容適用於需要使用 gtag.js 設定 Google 代碼的開發人員。如要改為在使用者介面中調整設定，請參閱「調整 Google 代碼設定」。

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

本文包含下列做法：

1. 使用 event 指令將事件傳送至 Google 產品
2. 使用 set 指令設定要隨每個事件傳送的值

事前準備

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

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

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

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

步驟 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 代碼的基本設定。

如果您管理多項產品，且想更詳細地管理資料流程，請參閱「分組及轉送資料」。