網頁程式開發人員編寫好用來填入購買明細變數的程式碼後,您必須更新 Floodlight 代碼或事件程式碼片段,讓它們能夠將資料傳送至 Search Ads 360。
如有使用 Google 代碼管理工具,您必須更新容器以採用推送至 ecommerce.purchase.products 陣列的資料,或是建立巨集來將資料傳送給 Floodlight 代碼。
手動更新代碼
如要將購買明細直接傳送給 Floodlight 代碼,網頁程式開發人員很可能已經透過某個 JavaScript 物件為網頁提供購買明細變數,或是將購買明細變數做為 DOM 中的自訂變數。
舉例來說,假設網頁程式開發人員是透過「floodlightSpec」這個·JavaScript 物件提供購買明細,您就必須依據下方格式更新 Floodlight 事件程式碼片段:
<!--
Event snippet for Thank You on http://www.example.com/thanks: Please do not remove.
Place this snippet on pages with events you’re tracking.
Creation date: 11/01/2017
-->
<script>
gtag('event', 'purchase',
{
'allow_custom_scripts': true,
'send_to': 'DC-1234567/group1/thank123+transactions',
'transaction_id': floodlightSpec.sessionID,
'value': floodlightSpec.revenue,
'items': [
{ 'id': floodlightSpec.item[0].id,
'price': floodlightSpec.item[0].price,
'quantity': floodlightSpec.item[0].number
},
{ 'id': floodlightSpec.item[1].id,
'price': floodlightSpec.item[1].price,
'quantity': floodlightSpec.item[1].number
}
],
'country': floodlightSpec.country,
'language': floodlightSpec.lang
}
);
</script>
<noscript>
<img src="https://ad.doubleclick.net/ddm/activity/src=1234567;type=group1;cat=thank123;
qty=1;cost=floodlightSpec.revenue;dc_lat=;dc_rdid=;
tag_for_child_directed_treatment=;tfua=;npa=;
ord=floodlightSpec.sessionID
;prd=i1:floodlightSpec.item[0].id|p1:floodlightSpec.item[0].price|q1:floodlightSpec.item[0].number|i2:floodlightSpec.item[1].id|p2:floodlightSpec.item[1].price|q2:floodlightSpec.item[1].number|c:floodlightSpec.country|l:floodlightSpec.lang?" width="1" height="1" alt="">
</noscript>
<!-- End of event snippet: Please do not remove -->
注意:Search Ads 360 產生的事件程式碼均包括一個內含 Floodlight 圖片代碼的選用 <noscript>
代碼。系統會使用這個代碼,回報在不支援 JavaScript 的瀏覽器中所發生的轉換。
使用 Google 代碼管理工具更新代碼
Google 代碼管理工具可協助您管理網站上的代碼。您可以在 Google 代碼管理工具中新增及更新代碼,不必直接在網站上進行這些作業。接著,Google 標記管理工具會視需要輸出網站適用的正確格式標記。進一步瞭解 Google 代碼管理工具。
如果您需要將動態產生的資料 (例如購買明細) 傳送至 Google 代碼管理工具所管理的代碼,您的網頁開發人員可選擇下列其中一種方法:
使用資料層中的資料
如果網頁程式開發人員是透過資料層提供購買明細變數,請按照下列步驟將資料傳送至 Floodlight 代碼:
- 使用 dataLayer.push 方法,在 Google 代碼管理工具的資料層中提供資料。
-
在 Google 代碼管理工具中,瀏覽至您網站專用的容器。
-
按一下 [代碼] 分頁,然後點選會回報銷售資料的 Floodlight 交易代碼。
-
按一下「鉛筆」圖示 以變更代碼。
-
在「產品報表」底下,勾選 [提供產品層級銷售資料] 核取方塊。
-
在「資料來源」清單中,選取 [資料層]。
Google 代碼管理工具會自動採用推送至 ecommerce.purchase.products 陣列中資料層的資料。 -
按一下 [儲存]。
使用變數存取其他資料
如果您的網頁開發人員是在資料層以外的位置提供購買明細變數,請按照下列步驟使用 Google 代碼管理工具變數 (前身為「巨集」) 傳送資料。
-
將資料匯出至其他位置 (例如在 DOM 變數中)。
-
在 Google 代碼管理工具中,瀏覽至您網站專用的容器。
-
按一下 [代碼] 分頁,然後點選會回報銷售資料的 Floodlight 交易代碼。
-
按一下「鉛筆」圖示 以變更代碼。
-
在「產品報表」底下,勾選 [提供產品層級銷售資料] 核取方塊。
-
在「資料來源」清單中,選取下列其中一個選項:
-
JavaScript 變數 (如果資料採用 JavaScript 變數格式)。
-
Floodlight 格式的值 (如果資料採用字串格式)。
-
-
按一下 [產品資料欄位] 旁邊的「新增變數」圖示。
-
按一下右上方的 [新增變數] 按鈕。
-
按一下變數設定卡片中的「鉛筆」圖示 ,然後執行下列步驟:
-
選擇適當的變數類型。舉例來說,假如您透過 JavaScript 變數提供資料,則選取 [JavaScript 變數]。
-
在下一個欄位中,輸入包含該項資料的物件名稱。
舉例來說,以下網頁會將字串輸出為 JavaScript 通用變數。
<script> window.salesData="i1:sku-12345|p1:100.0|q1:1|i2:sku-67890|p2:20.0|q2:2" </script>
-
-
編輯頂端的命名空間來命名變數,或者在隨即顯示的視窗中按一下 [儲存] 並編輯名稱。命名完成後,該名稱會顯示在「產品資料欄位」中並以雙括弧括住。
-
再按一次 [儲存] 以更新代碼的草稿版本。