使用Experience Platform Debugger驗證Web SDK實作
了解如何使用 Adobe Experience Platform Debugger 驗證您的 Adobe Experience Platform Web SDK 實施。
Experience Platform Debugger是Chrome擴充功能，可協助您檢視在網頁中實作的Adobe技術。 Experience Platform Debugger和瀏覽器的開發人員主控台，是驗證和偵錯Web SDK實作瀏覽器端的最佳方式。 下一個課程將涵蓋Adobe Experience Platform Assurance，提供資料進出平台Edge Network時的最佳檢視。
如果您以前從未使用過Debugger，您可以觀看這段5分鐘的概述影片：
在本課程中，您使用Adobe Experience Platform Debugger擴充功能，將Luma示範網站上以硬式編碼撰寫的標籤屬性取代為您自己的屬性。
此技巧稱為環境切換，您日後在自己的網站上使用標籤時，此技巧將有所幫助。 它可讓您在瀏覽器中載入您的生產網站，但搭配您的 開發 標籤程式庫。 此功能可讓您安心地變更及驗證標籤，而不受定期程式碼發行的影響。 畢竟，將行銷標籤發行與定期程式碼發行分開，是客戶使用標籤的主要原因之一！
學習目標
在本課程結束時，您將能夠使用除錯工具：
- 載入替代標籤程式庫
- 驗證使用者端XDM事件是否如預期般擷取及傳送資料給Platform Edge Network
- 啟用Edge追蹤以檢視Platform Edge Network傳送的伺服器端請求
先決條件
您熟悉資料收集標籤和Luma示範網站，並已完成教學課程中先前的課程：
使用Debugger載入替代標籤程式庫
Experience Platform Debugger有一種很酷的功能，可讓您使用其他標籤程式庫取代現有的標籤程式庫。 此技巧對於驗證相當實用，可讓我們略過本教學課程中的許多實作步驟。
-
確定您已開啟Luma示範網站，並選取Experience Platform Debugger擴充功能圖示
-
Debugger將會開啟並顯示硬式編碼實作的一些詳細資料（您可能需要在開啟Debugger後重新載入Luma網站）
-
確認Debugger為"已連線至Luma" （如下圖所示），然後選取"鎖定"圖示以將Debugger鎖定至Luma網站。
-
選取 登入 按鈕，使用您的Adobe ID登入Adobe Experience Cloud，然後選取您的組織。
note tip TIP 如果偵錯工具在登入後顯示的是您的使用者名稱，而非您的組織名稱，請登出然後再試一次。 
-
現在，前往左側導覽中的Experience Platform標籤
-
選取 組態 索引標籤
-
在顯示 頁面內嵌程式碼 的右側，開啟 動作 下拉式清單，然後選取取代
-
由於您已通過驗證，Debugger將會提取您可用的標籤屬性和環境。 選取您的屬性
-
選取您的
Development環境
note tip TIP 如果您無法使用下拉式清單選取您的屬性和環境，請改至標籤 > 環境 > 開發 > 安裝，然後選取圖示以複製內嵌程式碼並將其貼到Debugger中：
-
選取 套用 按鈕
-
Luma網站現在將使用您自己的標籤屬性重新載入。
已取代
繼續進行教學課程的過程中，您會使用此技巧將Luma網站對應至您自己的標籤屬性，以驗證您的Platform Web SDK實施。 在您自己的網站上使用標籤時，您可以使用這種相同的技巧，來驗證生產環境網站上的開發標籤程式庫。
使用Debugger進行驗證
驗證網路請求和XDM
您可以使用Debugger驗證從您的Platform Web SDK實作觸發的使用者端信標，以檢視傳送至Platform Edge Network的資料：
-
前往左側導覽中的摘要，檢視標籤屬性的詳細資料
-
現在，前往左側導覽中的Experience Platform Web SDK，檢視網路要求
-
開啟 事件 列
-
請注意，您如何看到您在
web.webPageDetails.pageView更新變數動作中指定的事件型別，以及其他在AEP Web SDK ExperienceEvent欄位群組後面的現成可用變數
-
向下捲動至
web物件，選取以開啟並檢查webPageDetails.name。 它們應該符合首頁上對應的adobeDataLayer資料層變數
adobeDataLayer資料層：- 在Luma首頁上，開啟瀏覽器開發人員工具。 若是Chrome，請選取鍵盤上的按鈕
F12 - 選取 主控台 索引標籤
- 輸入
adobeDataLayer並在鍵盤上選取Enter以開啟資料層值
驗證在產品頁面、購物車頁面及訂單確認頁面上設定的事件和變數。
驗證身分對應
您也可以驗證「身分對應」詳細資料：
-
在Sign In Luma網站上選取。 選取 Create Account 並使用認證
test@test.com/test建立帳戶 -
使用Debugger中的 跳至最近的 捷徑，快速移至最近的Web SDK事件（這是最後一欄）。 選取 事件 列以開啟詳細資料強制回應視窗。
-
在模組內搜尋identityMap。 您應該會看見具有authenticatedState、id和主要指定之三個金鑰的
lumaCrmId：
Debugger中的
使用瀏覽器開發人員工具進行驗證
許多網頁開發人員可能偏好在瀏覽器的開發人員工具中檢視實作。 這點尤其重要，因為並非所有瀏覽器都支援Debugger擴充功能。 此外，由於架構靈活，您可以檢查其他實施詳細資訊，例如Cookie和回應詳細資訊。
驗證網路要求
Web SDK要求詳細資訊也會顯示在瀏覽器的網頁開發人員工具 網路 標籤中（假設網站正在載入您的標籤庫）。
-
開啟瀏覽器的Web開發人員工具 網路 標籤，然後重新載入頁面。 篩選具有
/ee的呼叫，以找出該呼叫、選取它，然後檢視 標題 索引標籤和 承載 索引標籤
-
前往 預覽 標籤，並記下ECID值如何包含在網路回應中。
note note NOTE ECID值會顯示在網路回應中。 它不會包含在網路要求的 identityMap部分中，也不會以此格式儲存在Cookie中。
Web SDK cookie
進入開發人員工具時，讓我們來看看瀏覽器中的Cookie Web SDK設定。 開啟Application > Cookie > https://luma.enablementadobe.com
您應該會看到由Web SDK設定的數個Cookie：
- kndctr_[IMS_ORGID]_AdobeOrg_identity：這會儲存與ECID相關的資料
- kndctr_[IMS_ORGID]_AdobeOrg_cluster：這會儲存所使用的資料中心位置，以便後續的網路呼叫路由至相同的Edge伺服器
- AMCV_[IMS_ORGID]%40AdobeOrg：這是舊版AMCV Cookie，由SDK Experience Cloud前置程式庫所使用，且已設定，因為我們將預設值 將ECID移轉至VisitorAPI以移轉至Adobe Experience Platform Web SDK標籤擴充功能中選取的Web SDK 設定保留下來。 此設定很重要，您必須在將頁面從舊版資料庫移轉至Web SDK時啟用此設定，但在移轉所有頁面一段特定時間後，才能停用此設定。
如果您清除這些Cookie並重新載入頁面，您可能會注意到在.demdex.net網域上設定了額外的第三方Cookie。 這些設定是因為我們在Adobe Experience Platform Web SDK標籤擴充功能中保留預設的使用第三方Cookie： 已啟用設定。 如果您的瀏覽器不允許協力廠商Cookie，當您重新載入頁面時，系統將會移除這些協力廠商Cookie。
Luma本機儲存體
Luma示範網站僅使用HTML、CSS和JavaScript等使用者端技術。 除了網站預設狀態所使用的Experience Cloud實作之外，沒有任何後端儲存機制。 如使用者名稱詳細資訊等資訊只會使用localStorage儲存在瀏覽器的本機。 因此，如果您刪除此資訊或使用無痕者視窗，您會注意到您可能需要重新建立先前建立的測試使用者帳戶。
接下來，瞭解如何使用Adobe Experience Platform Assurance從Platform Edge Network接收及傳輸這些網路請求時，如何驗證這些網路請求！