使用Experience Platform调试器验证Web SDK实施

了解如何使用 Adobe Experience Platform Debugger 验证您的 Adobe Experience Platform Web SDK 实施。

Experience Platform调试器是一个适用于Chrome和Firefox浏览器的扩展,可帮助您查看在网页中实施的Adobe技术。 下载首选浏览器的版本:

如果您以前从未使用过该调试器,则可能需要观看以下时长为5分钟的概述视频:

在本课程中,您使用Adobe Experience Platform Debugger扩展Luma演示网站上硬编码的标记属性替换为您自己的属性。

此技术称为环境切换,当您以后在自己的网站上使用标记时,此技术将非常有用。 它允许您在浏览器中加载生产网站,但需要使用​ 开发 ​标记库。 此功能使您能够放心地做出并验证标记更改,而不依赖于常规代码发布。 毕竟,将营销标记发布与常规代码发布分开是客户最初使用标记的主要原因之一!

学习目标

在本课程结束时,您将能够使用调试器执行以下操作:

  • 加载备用标记库
  • 验证客户端XDM事件是否按预期捕获数据并将数据发送到PlatformEdge Network
  • 启用Edge跟踪以查看由平台Edge Network发送的服务器端请求

先决条件

您熟悉数据收集标记和Luma演示网站,并完成了本教程中以前的课程:

使用Debugger加载备用标记库

Experience PlatformDebugger具有一项酷炫功能,允许您使用其他标记库替换现有标记库。 此技术对验证非常有用,允许我们跳过本教程中的许多实施步骤。

  1. 确保已打开Luma演示网站,并选择Experience PlatformDebugger扩展图标

  2. 调试器将打开并显示硬编码实施的一些详细信息(您可能需要在打开调试器后重新加载Luma网站)

  3. 确认Debugger已“连接到Luma”(如下图所示),然后选择“锁定”图标以将Debugger锁定到Luma网站。

  4. 选择​ 登录 ​按钮,然后使用您的AdobeID登录Adobe Experience Cloud。

  5. 现在,转到左侧导航栏中的​ Experience Platform标签

    调试器标记屏幕

  6. 选择​ 配置 ​选项卡

  7. 右侧显示​ 页面嵌入代码,打开​ 操作 ​下拉列表,然后选择​ 替换

    选择“操作”>“替换”

  8. 由于您已经过身份验证,调试器将会拉入您的可用标记属性和环境。 选择您的资产

  9. 选择您的Development环境

  10. 选择​ 应用 ​按钮

    选择备用标记属性

  11. Luma网站现在将使用您自己的标记属性​ 重新加载

    已替换 标记属性

在本教程的后面部分,您将使用此技术将Luma网站映射到您自己的标记资产,以验证您的Platform Web SDK实施。 在您自己的网站上使用标记时,您可以使用该同一技术验证生产网站上的开发标记库。

使用Experience Platform调试器验证客户端网络请求

您可以使用Debugger验证从Platform Web SDK实施触发的客户端信标,以查看发送到PlatformEdge Network的数据:

  1. 转到左侧导航中的​ 摘要,以查看标记属性的详细信息

    摘要选项卡

  2. 现在,转到左侧导航栏中的​ Experience PlatformWeb SDK ​以查看​ 网络请求

  3. 打开​ 事件 ​行

    Adobe Experience Platform Web SDK请求

  4. 请注意,如何查看您在更新变量操作中指定的web.webpagedetails.pageView事件类型,以及其他位于AEP Web SDK ExperienceEvent字段组后面的现成变量

    事件详细信息

  5. 向下滚动到web对象,选择以打开它并检查webPageDetails.namewebPageDetails.serverwebPageDetails.siteSection。 它们应与主页上的相应digitalData数据层变量匹配

TIP
要查看和比较主页上的digitalData数据层,请执行以下操作:
  1. 在Luma主页上,打开浏览器开发人员工具。 对于Chrome,请选择键盘上的按钮F12
  2. 选择​ 控制台 ​选项卡
  3. 输入digitalData并在键盘上选择Enter以调出数据层值

网络选项卡

您还可以验证身份映射详细信息:

  1. 使用凭据test@adobe.com/test登录Luma网站

  2. 返回 Luma 主页

  3. 在左侧导航中打开​ Experience PlatformWeb SDK ​部分

    Debugger中的 Web SDK

  4. 选择​ 事件 ​行以在弹出窗口中打开详细信息

    Debugger中的 Web SDK

  5. 在弹出窗口中搜索​ identityMap。 在这里,您应该看到包含authenticatedState、id和primary三个密钥的lumaCrmId
    Debugger中的 Web SDK

使用浏览器开发工具验证客户端请求

这些类型的请求详细信息也会显示在浏览器的Web开发人员工具​ 网络 ​选项卡中(假设网站正在加载您的标记库)。

  1. 打开浏览器的Web开发人员工具​ 网络 ​选项卡,然后重新加载页面。 筛选具有/ee的调用以查找该调用,选择它,然后查看​ 标头 ​选项卡和​ 有效负载 ​选项卡

    网络选项卡

  2. 转到​ 响应 ​选项卡,并记下ECID值是如何包含在响应中的。

    网络选项卡

    note note
    NOTE
    ECID值在网络响应中可见。 它没有包括在网络请求的identityMap部分中,也没有以此格式存储在Cookie中。

使用Experience Platform调试器验证服务器端网络请求

如您在配置数据流课程中所学的,Platform Web SDK会先将数据从您的数字资产发送到PlatformEdge Network。 然后,平台Edge Network会向数据流中启用的相应服务发出其他服务器端请求。 您可以在Debugger中使用Edge跟踪来验证平台Edge Network发出的服务器端请求。

启用Edge跟踪

要启用Edge跟踪,请执行以下操作:

  1. 在​ Experience Platform调试器 ​的左侧导航中,选择​ 日志

  2. 选择​ Edge ​选项卡,然后选择​ 连接

    连接Edge跟踪

  3. 目前为空

    连接的Edge跟踪

  4. 刷新Luma主页并再次检查​ Experience Platform调试器,以查看数据通过。

    Analytics信标Edge跟踪

此时,您无法查看任何将转至Adobe应用程序的平台Edge Network请求,因为您未在数据流中启用任何请求。 在将来的课程中,您将使用Edge跟踪查看用于Adobe应用程序和事件转发的传出服务器端请求。 但首先,了解用于验证平台Edge Network发出的服务器端请求的另一个工具 — Adobe Experience Platform Assurance!

下一步:

NOTE
感谢您投入时间学习Adobe Experience Platform Web SDK。 如果您有疑问、希望分享一般反馈或有关于未来内容的建议,请在此Experience League社区讨论帖子上分享这些内容
recommendation-more-help
8cbc0fd8-ca1d-433b-9c3d-bc3f113347d4