利用 Google 代碼管理工具將值傳送至 Floodlight 代碼

利用 Google 代碼管理工具導入 Floodlight 代碼時，您可從自己的網站將值傳送至代碼，藉此擷取重要的行銷參數，以便在日後用於建立目標對象或針對特定自訂指標產生相關報表。

dataLayer 是 Google 代碼管理工具中的 JavaScript 物件，可提供用於將必要的值傳送至巨集的介面，以便日後用來填入指派的代碼。本文說明如何利用 dataLayer 與 Campaign Manager 360 進行通訊，以及如何將任何必要的值傳送到 Floodlight 代碼。如需進一步說明，請參閱 Google Developers 網站中有關 Google 代碼管理工具網頁實作的說明文章。

一般來說，新建的 Floodlight 代碼會包含預留位置，供網頁程式開發人員在呼叫代碼時替換為必要的值。以下是程式碼片段範例：

...
document.write('<iframe
    src="http://XXXXXXX.fls.doubleclick.net/activityi;src=XXXXXXXX;type=;cat=;u1=[item];u2=[quantity];u3=[price];u4=[postage];u5=[seller];ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
</script>
...

以粗體表示的元素 (item、quantity、price、postage 和 seller) 必須替換成實際想傳送至 Floodlight 代碼的值。在一般情況下，您可以利用自己的「內容管理系統」自行替換這些元素，或者請開發團隊為您填入這些程式碼。

如要設定 Google 代碼管理工具，使其在系統呼叫代碼時，使用變數來插入相關值，請按照下列步驟操作。這些步驟假設 Campaign Manager 360 帳戶已連結至相關的 Google 代碼管理工具帳戶，而且您可以將代碼傳送到 Google 代碼管理工具並加以核准。在 Google 代碼管理工具中進行變更後，即可按照一般的測試及發布程序進行後續動作。

設定

1. 在 Google 代碼管理工具中，為每一個您想傳送的值建立巨集。

   1. 為巨集命名，名稱請使用描述性文字。舉例來說，如果您是要擷取所訂購產品的名稱，可將巨集命名為「product_name」。

   2. 將巨集類型設為資料層變數。

   3. 指定 dataLayer 呼叫所宣告的變數名稱。

   4. 選取版本 2 做為版本號碼。

2. 在 Campaign Manager 360 中建立 Floodlight 代碼並啟用 u 標準變數。

3. 將 Floodlight 代碼推送至 Google 代碼管理工具並加以核准。

4. 在 Google 標記管理工具中編輯廣告代碼，然後將適當的巨集指派至各個 u 變數。舉例來說，假設您想擷取 u 變數「u1」中的產品名稱，請按照以下步驟進行：

   1. 前往「欄變數」部分。

   2. 點選下拉式選單，然後選取 [u1]。

   3. 點選文字方塊旁的巨集圖示，然後選擇您在步驟 1 建立的「{{product_name}}」巨集 (請注意，大括號 {{}} 僅用於表示這是一個巨集，而不是指巨集的名稱為「product_name」)。

   4. 針對您想擷取的所有其他 u 變數和巨集重複上述步驟。

導入

目前實作 dataLayer 有幾個不同方法，請根據以下情況採用相關實作方法。

方法 1：您有一個確認網頁，其中包含所有必要的值

部分網站是使用內容管理系統 (CMS) 或其他類似方式建立要求的網頁。而且 CMS 可傳送先前網頁中設定的值或者傳送後端資料庫的值。

在這種情況下，您可以執行以下步驟：

1. 為 Floodlight 代碼設定啟動規則，在網址等於您的確認網頁時執行代碼。

2. 在網站上的 Google 代碼管理工具代碼前方插入一個類似下方所示的 dataLayer 定義，並且將括號中的所有元素替換成您想傳送的值 (假設所有巨集的名稱均附加 _value 字樣)：

   <script>
    var dataLayer = [{“item_value”:item_value,
        “quantity_value”:quantity_value,
        “price_value”: price_value,
        “postage_value”: postage_value,
        “seller_value”: seller_value}];
</script>

   填入的代碼範例：

   <script>
    var dataLayer = [{“item_value”:”great shoes”,
        “quantity_value”: 1,
        “price_value”: 20,
        “postage_value”: 8,
        “seller_value”: “shoemaker”}];
</script>

當 Google 代碼管理工具啟動 Floodlight 代碼時，系統會將所指定巨集替換成您在 dataLayer 定義中指定的值。

方法 2：您的結帳網頁和確認網頁使用相同的網址，或者網頁採用 AJAX (JavaScript 方法)

1. 建立一項規則，當發生某事件時啟動代碼。例如，您可以建立名為「purchase_complete」的事件。

   規則名稱：fire_floodlight_tag
   條件：{{event}} equals purchase_complete
   包含這項規則的代碼：無

2. 使用 JavaScript 觸發事件，然後將所有必要資訊傳送至 Floodlight 代碼：

   dataLayer.push = ({ “event”: “purchase_complete”,
    “item_value”:item_value,
    “quantity_value”: quantity_value,
    “price_value”: price_value,
    “postage_value”: postage_value,
    “seller_value”: seller_value});

   填入的 JavaScript 呼叫範例：

   dataLayer.push = ({ “event”: “purchase_complete”,
    “item_value”:”great shoes”,
    “quantity_value”: 1,
    “price_value”: 20,
    “postage_value”: 8,
    “seller_value”: “shoemaker”});

   請注意，新增的事件值 (上方範例中以粗體表示的部分) 是用來通知 Google 代碼管理工具使用的事件，可以啟動 Floodlight 代碼了。

方法 3：您的結帳網頁和確認網頁使用相同的網址，或者網頁採用 AJAX (自動追蹤事件方法)

「自動追蹤事件」會使用事件監聽器，這是網頁上的一種特殊代碼，會在使用者事件發生時建立一個程式輔助事件，用於觸發其他廣告代碼。使用者事件可包含使用者進行的各種動作，例如點選按鈕或連結、提交表單或計算定義間隔的計時器。

下方範例說明如何使用連結點擊監聽程式啟動代碼。在這種情況下，當使用者點選清單或從下拉式選單中選擇產品後，系統就會將使用者導向至 PDF 手冊下載網頁。該網頁包含一個手冊連結，只要使用者點選這個連結，系統便會予以記錄成一次轉換。

請前往您的 Goolge 代碼管理工具帳戶，然後執行以下動作：

1. 設定連結點選監聽程式。

   1. 選擇新代碼。

   2. 輸入描述性名稱，例如「downloadLinkListener」(PDF 手冊下載連結所使用的名稱)。

   3. 在 [廣告代碼類型] 下拉式選單中，將滑鼠游標移至「事件監聽器」部分，然後從右側展開的下拉式選單中選取 [連結點選監聽程式]。

   4. 如果這個連結會將訪客導向至其他網頁，請務必勾選 [等待代碼]。如果您沒有特殊原因 (例如您啟用了大量廣告代碼，想確定所有廣告代碼可正常執行)，請不要變更 [等候時間上限]。

2. 設定一個巨集，負責當有人點選連結時擷取網址。

   1. 選擇新巨集。

   2. 輸入描述性名稱，例如「linkURL」。

   3. 從 [巨集類型] 下拉式選單中選擇 [自動事件變數]。

   4. 從 [變數類型] 下拉式選單中選擇 [元素網址] (請注意，這個選項僅適用於採用標準 HREF 格式的連結，與 JavaScript 連結剛好相反)。

3. 設定巨集，以擷取使用者選取的產品。至於這個範例的用途，我們假設產品名稱是列在下拉式選單中，而且選單的 HTML ID 代碼為「productName」。如果您在尋找這個 ID 時需要協助，請洽詢您的網頁程式開發人員。

   1. 選擇新巨集。

   2. 輸入描述性名稱，例如「selectedProduct」。

   3. 從 [巨集類型] 下拉式選單中選擇 [Dom 元素]。

   4. 在 [元素編號] 欄位中，輸入欄位的編號。在這種情況下，編號是「productName」(沒有雙引號)。

   5. 在 [屬性名稱] 欄位中輸入「值」，系統會在您選取下拉式選單時擷取值屬性的內容。

4. 設定一項規則，用於啟動事件監聽器廣告代碼。

   1. 選擇新規則。

   2. 輸入描述性名稱，例如「downloadLinkClicked」。

   3. 在 [條件] 底下，將第一個下拉式選單設為 {{event}}，第二個下拉式選單設為等於，並將文字方塊設定成 gtm.linkClick。

   4. 按一下加號 (+)。

   5. 將新增的行中的第一個下拉式選單設為您在步驟 2 建立的 {{linkURL}} 巨集，第二個下拉式選單設為等於，並將文字方塊設定成欲下載 PDF 的網址 (例如 http://www.site.com/pdfs/brochure1.pdf)。

5. 將 Floodlight 代碼設定成擷取轉換 (如果您已建立這個代碼或已透過 Campaign Manager 360 共用這個代碼，請直接從步驟 E 開始進行)。

   1. 選擇新代碼。

   2. 輸入描述性名稱，例如「brochureDownloadTag」。

   3. 根據自己的需求，選擇適當的廣告代碼類型，例如 [Floodlight 計數器]。

   4. 將 [廣告客戶編號]、[群組代碼] 和 [活動代碼字串] 設成相關的識別值，然後視需要設定其他的標準廣告代碼值。

   5. 從「自訂變數」底下的下拉式選單中，選擇 [u1] 或任何您想用於追蹤用途的自訂變數。

   6. 點選文字方塊旁的 [巨集] 按鈕，然後選擇您在步驟 3 中建立的 {{selectedProduct}} 巨集。

6. 視需要進行測試及發布。