文件Experience PlatformWeb SDK 教學課程

建立資料元素

Last update: Sun Mar 08 2026 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主題：

建立對象：

  • 初學者
  • 中繼
  • 開發人員

瞭解如何在Luma示範網站的內容、商務和身分資料的標籤中建立資料元素。 然後填入XDM結構描述中的欄位。

學習目標

在本課程結束時，您能夠：

  • 瞭解將資料層對應至XDM的不同方法
  • 建立資料元素以擷取資料
  • 將資料元素對應至XDM物件

先決條件

您已瞭解什麼是資料層，並已完成本教學課程中的先前課程：

IMPORTANT
此課程的資料來自adobeDataLayerLuma網站上的資料層。 若要檢視資料層，請開啟您的開發人員主控台，並輸入adobeDataLayer以檢視可用的完整資料層。 adobeDataLayer資料層

資料層方法

有多種方式可使用Adobe Experience Platform的標籤功能，將資料從資料層對應至XDM。 以下是三種不同方法的一些優點和缺點。 如有需要，可以合併方法：

  1. 在資料層中實作XDM
  2. 在標籤中對應到XDM
  3. 在資料流中對應到XDM
NOTE
本教學課程中的範例會依照標籤中的「對應至XDM」方法進行。

在資料層中實作XDM

在此方法中，網頁開發人員實作完整定義的XDM物件作為資料層的結構。 然後您只需將整個資料層對應至標籤中的XDM物件即可。 如果您的實作不使用標籤管理程式，此方法可能是理想之選，因為您可以使用XDM sendEvent命令，直接從應用程式傳送資料至XDM。 如果您確實使用標籤，您可以建立自訂程式碼資料元素，將擷取整個資料層作為傳遞JSON物件至XDM。 然後，您將傳遞JSON對應到「傳送事件動作」中的XDM物件欄位。

以下是資料層使用Adobe使用者端資料層格式的範例：

資料層中的XDM範例
code language-json 
window.adobeDataLayer.push({
"eventType": "web.webPageDetails.pageViews",
"web":{
         "webInteraction":{
            "linkClicks":{
               "id":"",
               "value":""
            },
            "URL":"",
            "name":"",
            "region":"",
            "type":""
         },
         "webPageDetails":{
            "pageViews":{
               "id":"",
               "value":"1"
            },
            "URL":"https://luma.enablementadobe.com/",
            "isErrorPage":"",
            "isHomePage":"",
            "name":"luma:home",
            "server":"enablementadobe.com",
            "siteSection":"home",
            "viewName":""
         },
         "webReferrer":{
            "URL":"",
            "type":""
         }
      }
});

優點

  • 消除重新對應至XDM資料層變數的額外步驟
  • 如果您的Web開發團隊也擁有數位行為的標籤，部署可能會更快一些

缺點

  • 完全依賴開發團隊和開發週期來更新要傳送到XDM的資料
  • XDM從資料層接收確切的裝載，因此彈性有限
  • 無法使用內建標籤功能，例如刮取、持續性、快速部署功能
  • 資料圖層較難用於協力廠商畫素（但您可能想要將這些畫素移至事件轉送！）
  • 無法在資料層和XDM之間轉換資料

在標籤中對應到XDM

此方法包括將個別資料層變數對應至標籤中的資料元素，最終對應至XDM。 這是使用標籤管理系統實作的傳統方法。

優點

  • 最靈活的方法，因為您可以在資料進入XDM之前控制個別變數並轉換資料
  • 可使用Adobe標籤觸發器和刮取功能將資料傳遞至XDM
  • 可以將資料元素對應至第三方畫素使用者端

缺點

  • 將資料層重新建構為標籤資料元素需要時間
IMPORTANT
如先前所述，本教學課程中的範例依照標籤中的「對應至XDM」方法進行。

在資料流中對應到XDM

此方法使用內建在資料流設定中的功能，稱為資料收集的資料準備，並略過將資料層變數對應到標籤中的XDM。

優點

缺點

  • 資料層變數無法當作使用者端協力廠商畫素的資料元素使用，但可用於事件轉送
  • 無法在標籤中使用刮取功能
  • 如果將資料層對應到標籤和資料流中，維護複雜性就會增加
TIP
Google資料層
如果您的組織已使用Google Analytics，且您的網站上具有傳統Google資料層物件，您可以在標籤中使用Google資料層擴充功能。 這可讓您更快速地部署Adobe技術，而不需要向IT團隊請求支援。 將Google資料層對應至XDM會遵循上述相同步驟。

建立資料元素以擷取資料層

在填入XDM欄位之前，請先擷取您需要的資料點做為標籤資料元素：

  1. 移至​ 資料元素 ​並選取​新增資料元素 (或​建立新資料元素 （如果標籤屬性中沒有現有的資料元素）

    建立資料元素

  2. 將資料元素命名為 Page Name

  3. 使用​JavaScript變數 資料元素型別​指向Luma資料層中的值： adobeDataLayer.0.page.name

  4. 勾選​ 強制小寫值 ​和​ 清除文字 ​方塊，以標準化大小寫格式並移除多餘的空格

  5. 保留None為​ 儲存期間 ​設定，因為此值在每個頁面上都不相同

  6. 選取​儲存

    Page Name資料元素

請依照相同的步驟建立這些額外的資料元素：

  • User Id​對應至
    adobeDataLayer.0.user.id

  • User Logged In​對應至
    adobeDataLayer.0.user.loggedIn

  • Ecommerce Product Id​對應至adobeDataLayer.0.ecommerce.detail.products.0.id

  • Ecommerce Product Name​對應至adobeDataLayer.0.ecommerce.detail.products.0.name

  • Ecommerce Purchase Id​對應至adobeDataLayer.0.ecommerce.purchase.actionField.id

  • 使用​ Ecommerce Product Category ​自訂程式碼​ ​ ​資料元素型別​和下列自訂程式碼的：

    code language-javascript 
    return adobeDataLayer[0].ecommerce.detail.products[0].category+":"+adobeDataLayer[0].ecommerce.detail.products[0].subcategory;

  • Ecommerce Cart Products​使用以下自訂程式碼：

    code language-javascript 
    const cartProducts = adobeDataLayer
.flatMap(evt => Array.isArray(evt?.ecommerce?.cart?.items) ? evt.ecommerce.cart.items : [])
.filter(item => item && item.id && item.name && item.brand)
.map(({ id, name, brand }) => ({ id, name, brand }));

return cartProducts;

  • Ecommerce Purchase Products​使用以下自訂程式碼：

    code language-javascript 
    const purchaseEvent = adobeDataLayer.find(e => e.event === "purchase");

const currencyCode = purchaseEvent?.ecommerce?.currencyCode ?? "USD";

const purchasedProducts = (purchaseEvent?.ecommerce?.purchase?.products || []).map(p => {
   const unitPrice = parseFloat(String(p.price).replace(/[^0-9.-]/g, "")) || 0;
   const qty = Number(p.quantity) || 0;

   return {
   SKU: p.id,                       // id -> SKU
   name: p.name,                    // name -> name
   quantity: qty,                   // quantity -> quantity
   priceTotal: unitPrice * qty,     // price -> priceTotal (unit price × quantity)
   currencyCode                     // "USD" -> currencyCode (from ecommerce.currencyCode)
   };
});

return(purchasedProducts);
CAUTION
JavaScript變數資料元素型別會將陣列參照視為點而非括弧，因此將使用者名稱資料元素參照為adobeDataLayer[0].page.name 將無法運作。

為XDM和資料物件建立變數資料元素

您剛建立的資料元素將用於建立XDM物件（適用於Platform應用程式）和資料物件(適用於Analytics、Target和Audience Manager)。 這些物件有自己的特殊資料元素，稱為​ 變數 ​資料元素，這些資料元素很容易建立。

若要建立XDM的變數資料元素，請將其連結至您在設定結構描述課程中建立的結構描述：

  1. 選取​新增資料元素

  2. 為資料元素命名XDM Variable。 建議您為XDM專屬的資料元素加上前置詞「XDM」，以便更妥善地組織標籤屬性

  3. 選取​ Adobe Experience Platform Web SDK ​做為​擴充功能

  4. 選取​ 變數 ​做為​資料元素型別

  5. 選取​ XDM ​做為​屬性

  6. 選取您建立結構描述的​沙箱

  7. 選取適當的​結構描述，在此案例中為Luma Web Event Data

  8. 選取​儲存

    XDM 的 變數資料元素

接下來，為資料物件建立變數資料元素：

  1. 選取​新增資料元素

  2. 為資料元素命名Data Variable。

  3. 選取​ Adobe Experience Platform Web SDK ​做為​擴充功能

  4. 選取​ 變數 ​做為​資料元素型別

  5. 選取​ 資料 ​做為​屬性

  6. 選取您想要實作的Experience Cloud解決方案，作為本教學課程的一部分

  7. 選取​儲存

    資料物件的變數資料元素

在這些步驟結束時，您應該建立下列資料元素：

核心擴充功能資料元素
Platform Web SDK擴充功能資料元素
Ecommerce Cart Products
Data Variable
Ecommerce Product Category
XDM Variable
Ecommerce Product Id
Ecommerce Product Name
Ecommerce Purchase Id
Ecommerce Purchase Products
Page Name
User Id
User Logged In

設定好這些資料元素後，您就可以開始使用標籤規則將資料傳送至Platform Edge Network了。 但首先，瞭解如何使用Web SDK收集身分資料。

NOTE
感謝您花時間學習Adobe Experience Platform Web SDK。 如果您有任何疑問、想分享一般意見或有關於未來內容的建議，請在這篇Experience League社群討論貼文上分享
recommendation-more-help
8cbc0fd8-ca1d-433b-9c3d-bc3f113347d4