带有新 Relic 的 WooCommerce 报告

WooCommerce 报告传统上侧重于规范的业务指标。 定制也可能具有挑战性。

在本次会议中，了解如何使用 New Relic 应用程序性能监控 (APM) 来更好地了解在线商店的性能——在同一仪表板中跟踪站点性能和关键业务指标。

演讲嘉宾：

• WP Engine 产品营销经理 Joshua Dailey
• Damien DeHart，MSP 合作伙伴工程师，New Relic 团队负责人

会议幻灯片：

成绩单：

乔什·戴利： 大家好。 Josh Dailey 是 WP Engine 电子商务解决方案的产品营销经理，我在过去十年中一直在创建商业商店以及开发和启动 WooCommerce 的扩展。 我在这里的工作是不断改进我们的电子商务解决方案。

目前，我们提供的电子商务套餐具有一些独特的优势，可以推动转化并简化正在进行的商店管理。 这包括适用于 WooCommerce 的 EverCache，它使用智能缓存来提供 90% 以上的商店页面缓存，Live Cart 可以让您向更多并发购物者销售更多商品，而不会中断连接或牺牲功能性能，由 ElasticPress 提供支持的 Instant Store Search 可以更快、更多准确的搜索，具有 17 点 WooCommerce 视觉回归测试的智能插件管理器，以及用于 WooCommerce 的构建器工具，可轻松建立和发展商店。

此外，我们还有应用程序性能监控等附加组件，用于扩展您的工具集。 多年来，我们一直与 New Relic 合作，为我们所有的高级客户提供此功能，但我们发现它对 WooCommerce 商店具有独特的优势，我们希望确保您能够充分利用它。

根据 Built With 的说法，WooCommerce 是世界上使用最广泛的商务解决方案，安装量超过 700 万。 商家和开发人员选择它是因为它与 WordPress 无缝集成，并且能够快速创建和定制购物体验。 使用 WooCommerce 简化开发为您提供了入门基础，并使我们能够更快地投入生产，最终使我们能够在我们的项目上取得更多成就。

但是，一旦您的商店启动并运行并获得流量，我们听到的最常见问题之一就是如何优化我的商店以实现转化以及我们在哪里可以获得更好的报告？ 这是因为 WooCommerce 附带了基本功能和基础工具。 它们开箱即用，适用于原型商店，其中包括四个可配置的报告：订单、客户、库存或存货以及税收。

现在，如果您是初学者，这很好。 但是，如果您是一名开发人员并且您的工作是确保您的网站针对特定活动进行扩展，那么通用的 WooCommerce 报告还远远不够，因为报告仅限于结果。 但健康——但为了健康分析，您需要能够深入了解您的网站性能如何与您网站的结果相关联。 如果在一个地方没有这些信息，您将在大海捞针中寻找针头。 客户商店依靠健康的报告来围绕客户获取和保留、绩效瓶颈、营销活动、绩效与转化率的对应关系做出决策，并最终降低开支并提高利润。

我们的仪表板不是大海捞针，而是像磁铁一样为您拔针。 我们将其视为我们电子商务产品的绝佳补充，让您可以更智能地构建和优化 WooCommerce。 例如，您可以准确查看数据库响应时间如何跟踪特定时间段内的订单数量。 您的网站正在扩展吗？ 在哪里可以优化性能以增加转化率？

因此，在本次会议中，我们希望通过您可以标准化的工具真正实用地构建仪表板，从而节省您的时间并为您提供灵活、可扩展的商店报告。 这就是为什么我很高兴 New Relic 的 Damien 来到这里，让您深入了解如何使用为我们最大的 WP Engine WooCommerce 客户之一创建的真实世界仪表板来增强您的 Woo 报告。 达米恩，谢谢你加入我们。 我真的很高兴能跟进。

DAMIEN DEHART： Josh，谢谢你邀请我。 很高兴来到这里协助这次演讲。 因此，在我们开始讨论我们与 WPE 最大的 WooCommerce 消费者之一构建的实际解决方案之前，我想花点时间谈谈整个 New Relic 平台。

因此，新的 New Relic 平台，我们今天将重点关注仪表板功能和 APM，以及这些功能如何融合在一起为 WooCommerce 客户创建更强大的报告功能。 但是，对整个平台进行简要介绍以及我们如何做出这个决定以及我们如何利用不同的功能来实现这一目标是有意义的。

所以如果你看这张图的底部，你会看到 New Relic One。 New Relic One 是 New Relic 平台。 它建立在一个庞大的时间序列数据库之上，实际上每天看到的点击量比谷歌搜索结果的点击量还要多。

在该平台之上是您看到的所有不同功能：浏览器、Synthetics、移动、New Relic APM 和基础设施。 所有这些都将遥测数据发送到 New Relic 中，我们使用这些数据并将其提供给我们的最终客户、WPE 以及他们的所有客户，以使用这些数据来构建仪表板、自定义警报等不同的东西，并生成不同的业务洞察力他们在 New Relic 平台上可能拥有的任何用例。

因此，我们与 WPE 最大的 WooCommerce 消费者之一建立了一个仪表板。 您会在右侧看到屏幕截图，它显示了我们构建的仪表板的快照。 我想花点时间谈谈利用 New Relic 仪表板和功能的主要好处。

正如我们在上一张幻灯片中所讨论的，New Relic 是一个庞大的时间序列数据库，每天的点击量比谷歌搜索量还多。 因此，我们构建了这个数据库以提高规模和性能。 因此，当您开始考虑仪表板以及 WooCommerce 与报告可能存在的差异时，这是一个专门用于大规模搜索数据的解决方案。 这意味着我们让您能够实时关注对您的业务最关键的绩效指标。

我们还让您能够使用在 New Relic 中捕获的任何您想要的数据来构建仪表板。 您无需为此编写代码。 我将通过说您需要了解我们的 SQL——我们的反 SQL 语言来稍微收回这一点。 但基本上，如果你知道 SQL，你就会知道 New Relic。 它还允许您在整个堆栈中更快地诊断问题。

因此，再次重申，您正在摄取到 New Relic 平台的任何数据，无论是来自您在 WooCommerce 中运行的应用程序，还是您应用程序本身中客户的前端交互，例如 JavaScript 错误，您都可以跟踪所有与 New Relic 在同一个地方。 最后，我们的主要目标是推动数据驱动的决策以优化业务成果。

那么我们该怎么做呢？ 当我们查看该仪表板时，我们会看到很多关于购物车总数、订单总数、Google 会话 ID 等的非常好的指标。 我们让您能够深入了解每个会话，以了解客户做了什么、他们的表现如何、购物车中有多少钱，甚至购物车放弃率等信息。

但在这次电话会议上，每个人都想知道的真正问题是，“”我们做了什么？ 幕后发生的技术问题是什么？ 因此，为了做到这一点，我们需要再次了解 New Relic APM 的工作原理。

New Relic APM 将自身注入到您的 PHP WordPress 应用程序的代码级别，让您可以看到对该应用程序进行的每一次调用。 因此，New Relic 处于一个独特的位置，能够实时收集有关应用程序用户的数据。 所以你在这里看到的是 VS Code 的屏幕截图，我们实际上将一些自定义数据注入到应用程序中。 我们实际上并没有注入自定义数据。 我们在其中放置了一些脚本，它实际上提取了属性，正如我们所说的那样，或者关于应用程序中用户的不同元数据，这些元数据已经由 PHP 中的 WooCommerce 附加组件收集。

所以你可以在底部看到突出显示的部分。 我们实际上正在做我们所说的向 New Relic 添加自定义参数，我们正在添加订单电子邮件。

我们正在为成功结帐添加一个 New Relic 交易，以便能够跟踪客户何时实际在网站上购买东西。 我们正在添加购物车中的全部商品。 我们还添加了购物车中的所有产品，并且我们实际上将每个产品与订单项总数一起循环。 然后我们实际上将其汇总为订单总数。 所有这些数据实际上都被注入了 New Relic，它与我们已经收集的所有数据一致。

因此，如果您从性能和优化的角度考虑它，这使您能够深入了解每个客户并查看，嘿，这个客户在我这里花了多少钱？ 他们在网站上的表现如何？ 他们有没有遇到任何错误？ 我们的数据库是否花费了太长时间？ 这使您能够充分地为您的大客户和小客户提供服务，甚至可以将他们分组，这样您就可以进行队列分析，了解绩效对您的日常业务有多大影响，以及您的底线是否有效，以及您赚了多少钱产生。

所以我确实想提一下，这不仅限于显示的参数。 这些只是我们正在收集的东西。 但正如本次电话会议中的每个人都知道的那样，WooCommerce 生成的数据比我们今天收集的数据多得多，因此这利用了我们所谓的自定义属性。 您还可以收集您想要的任何其他数据。 因此，例如，如果您的应用程序正在收集用户名或用户电子邮件或客户名称或支持层，并且列表不断增加，您还可以将这些额外参数注入 New Relic，这为您提供了我刚才所说的那些级别的可见性的。

这扩展到您使用 APM 和应用程序性能监控将该业务上下文添加到 New Relic、UI、数据层中，并最终添加到您的业务实践中，这使您可以做出更明智的决策并获得购买- 从开发人员到您的首席技术官，甚至是业务方面的首席执行官，所有人都参与其中。 因此，我们也想谈谈使用 New Relic Synthetics 的问题，它包含在您的 WordPress 订阅中以管理 WordPress 解决方案，以及如何将其用于电子商务。

所以 New Relic synthetics 是一个非常强大的基于 Selenium 的测试工具，所以我们不喜欢将自己宣传为压力测试或负载测试解决方案，但我们所做的宣传是一种以编程方式将流量发送到您的网站的方法为了测试非常具体的场景。 因此，您再次通过订阅获得了许多不同的检查，以监控 WP Engine 上的包。 我们要介绍的第一个是可用性测试。

所以这基本上是对 DNS 服务器的 ping，告诉您该网站此时是否存在。 所以它有它的用途。 我们认为这是一种基本类型的综合测试。 不过，还有一些其他版本可用。 所以我们有 SSL 证书过期测试。

所以这正是它听起来的样子。 您将其配置为说，当您的证书即将到期时，我们会在您接近该日期时向您发出通知。 您还有 Page Link Crawler，它会向您显示网站上的任何链接，如果您的网站上有损坏的链接，我们实际上会告诉您。

我们发现这对电子商务客户特别有用，因为他们的网站上经常有很多不同的产品链接，这些链接不断变化。 有时，很难跟上。 因此，通过测试告诉您哪些内容出现问题以及您的客户无法访问哪些内容对于确保您通过电子商务网站获得最大收入至关重要。 我们还有一个页面加载性能监视器，它会加载所有资产的整个页面，它实际上会告诉您页面上所有不同资产在做什么——所以如果您的图像太大，如果您有 JavaScript与网站相关的错误，并且这个列表还在继续。

然后，我们实际上接下来将进行有关步骤执行或用户流功能测试的演示，这将在我们的一个演示环境中遍历结帐页面。 它将显示整个过程中发生的任何故障。 因此，我们将通过客户登录、结帐流程、将商品放入购物车，然后尝试结帐。 我们将看看那里会发生什么。 所以事不宜迟，现在是演示时间。

好吧，我们来到了 New Relic。 您在这里看到的是 New Relic 的主页。 对于不熟悉此页面的人，这显示了 New Relic 中存在的所有不同实体。 基本上，实体是发出您想要监控的数据的东西。

所以我们今天要谈谈合成材料。 你如何进入合成是你导航到这里的左侧，你会在左边看到合成监控。 您也可以通过单击此处的合成监视器来到达那里。 但为了完整起见，我们今天将单击它。

你可以看到我的模拟账户里有大量的监视器。 我只想向您展示我的脚本浏览器，它可以验证结帐流程是否正常。 所以我知道这个叫verify，有verify这个名字。 输入后，您可以看到这是我的显示器本身。

进入监视器，您会看到很多东西。 所以我们实际上是针对三个不同的位置运行的。 所以你在这里看到它们：新加坡、伦敦和波特兰。 而这三个就是 New Relic 所说的公共场所。

因此，我们在 AWS 中在全球范围内拥有多个托管位置，这使您能够——您实际上能够对所有这些进行检查。 因此，如果您有一个类似全球网站或类似网站的网站，并且您想要在全球范围内测试性能，这就是您要做的方式。

这也可能有助于 CDN 请求。 因此，假设您正在运行支票并且在新加坡它非常慢，但您的头脑 – 您的数据中心和所有托管可能都在美国西部。 您可能想在这里建立一个 CDN，以便在全球范围内获得持久的性能。

因此，在此图表上，您可以看到我们在过去 30 分钟内查看的时间范围内的失败次数与检查次数的对比。 如果我将其扩展到一天，您可以看到这里的一些指标发生了变化，但这是在发生变化——这里实际上显示的是过去 2 又 1/2 小时的情况。 任何失败都会以红色显示。

所以我们实际上在过去 2 和 1/2 小时内没有看到任何故障，并且您看到了一些跨位置的基本计时信息。 向下一点，您还会看到一些性能指标。

所以这向您展示了以用户为中心的性能指标。 所以第一个字节，基本上，当页面上的任何内容可见时。 First paint 有点像加载了图片或文本或任何内容。 页面加载是整个页面加载——所以当页面完全加载时。

然后 First Contentful Paint 基本上是页面上加载的最大图像。 因此，我们将为您提供此次检查的所有时间信息。 我们正在按域向您显示请求。

因此，当您在应用程序本身中调用事物时，这些调用需要多长时间——其中有多少请求是随着时间的推移而发生的？ 然后按域持续时间。 那么每一个需要多长时间？ 我们有我们的 newrelicdemo.com，它花费的时间最长，然后按资源类型平均大小。

所以我们已经可以看到这里的图像是最大的。 因此，如果有任何优化机会，我可能会开始查看此站点上的图像。

最后是错误响应代码。 所以这些都是你可以期待看到的东西。 当您创建综合检查时，您还会看到我们这里有一堆标签。 这些可在平台内自定义。 所以如果你有一个团队或一个产品表面或一个特定的网站或者你正在测试的产品，你实际上可以那样标记它。 然后您可以在平台中搜索这些标签。

此外，您还看到了 URL。 因此，如果我要点击它，这实际上会将我带到我的网页，我正在使用此检查进行监控。 在您的情况下，它将是您的实时电子商务网站。 在这种情况下，这是我的演示应用程序。

好的，所以这一切都很好，但是我们如何进入我们讨论哪里出了问题，或者应用程序内部可能出了什么问题的部分？ 所以在这一点上，我们在左侧边栏上有很多不同的选项。 我们不会关注这些更多的视图中的任何一个，但我们将讨论它们中的每一个的作用。

从下往上开始，“设置”选项卡实际上向您显示了您在此处运行的脚本。 它主要向您显示显示器的配置设置，以及您选择的位置。 我实际上没有在这里编辑它的权利，所以它将向您展示，这是我们所有公共场所的列表，正如我们之前讨论的那样。 我们选择了 3 个。

然后我们在这里有一个脚本。 所以这是我们的脚本。 它是在 Node 中构建的，我们实际上是在抓取这些网页，加载特定的网页，然后我们在控制台中打印这些结果。

你也在这里报告。 因此，默认情况下，您创建的任何监视器都会获得一些 SLA 报告，并且您也可以针对这些报告发出警报。

然后我们就在我们的摘要页面上。 所以我会在这里点击一下。 然后在监视器部分，您将获得所有结果。 因此，这将向您显示检查本身的所有结果、正在消耗的资源以及发生的任何故障。

所以一旦我点击它，在过去的 24 小时内，我们看到了 100% 的成功率。 我们看到零检查失败了。 一切都好。 我们按位置查看持续时间。

因此，我们再次讨论了这些 CDN 要求。 您可以看到波特兰的房价明显偏低，或者不是很低，但比其他任何地方都低了很多。 所以也许这告诉我，嘿，我的数据中心或我的基础设施在美国西部。

我想要在全球范围内保持一致的表现。 所以也许我在其他一些位置放置了 CDN。 也许我没有，因为这没什么大不了的。 由企业决定。

然后您会看到这些检查的所有不同情况。 您会按位置查看它们。 您会按持续时间查看它们。 您可以按响应大小查看它们。

然后，如果出现失败消息，您也会看到。 您也可以仅过滤两个失败。 在这个时间范围内我们没有。 让我看看我们是否会得到任何有趣的东西。

我想我们在这台显示器上没有任何故障。 但如果我点击其中一个，我会告诉你结果是什么样子的。 同样，这是一个综合测试，跨越多个页面。 因此，我们正在模仿真实用户在网站内的行为。

所以流程是我们登陆这个主页。 这就是该页面内发生的事情。 所以你有以用户为中心的时间安排。

您可以看到页面上加载的所有不同类型的内容。 所以我们在这里得到了一个大图像，这是一个非常大的图像——实际上我们是故意这样做的，以显示这个。

但是这里有这么大的图像，这个 telco.bids 图像，它占用了很多时间。 所以如果我说，嘿，看，有一些优化机会可以完成。 就个人而言，这将是我关注的第一件事是那个巨大的形象。

回到流程，对，所以我们从主页开始。 我们进入登录页面。 您也可以在此处看到发生的所有事情，发生的任何 JavaScript 错误或其他错误，发生的任何 AJAX，以上所有内容。

然后一旦他们登录，他们就会被重定向。 所以我们也看到了时间表，漂亮的瀑布景观。 我们正在浏览所有页面。

所以他们转到电话页面，他们正在浏览电话。 找到他们想要的电话需要很长时间。 没关系。

他们找到了真正的电话。 这是我们产品演示网站中的实际页面，因此是特定产品页面。 这就是它开始变得有趣的地方。 你可以看看这个，你可以看到，好的，我只想看看他们在这个页面上的表现。

加载此页面需要多长时间，它是否符合我已回馈给客户的 SLA？ 他们进入他们的计划页面寻找计划。 他们决定一个计划。

现在，他们正在寻找手机。 因此，我们正在经历客户找到他们想要的手机、找到他们想要的计划、将它们全部放入购物车的整个过程。 他们最终进入购物车。

我们这里有一个错误。 因此，如果您想查看任何有错误的请求，我们会在此处提供带有此 HTML 请求的请求，并转到此页面。 这是一个有效的请求，作为一个错误。 所以我不打算在这里完成完整的故障排除路径。

但基本上，我们有一个场景设置为在我们的演示环境中发生，优惠券本身无效，并且每次都会抛出错误。 这可以追溯到未优化的后端脚本或后端代码段，我们忘记更新数据库中的优惠券。 因此，从这里，您实际上能够在受控环境中看到抛出的错误以及它如何追溯到应用程序的性能。

然后你完成结帐过程。 您会看到这里的一切都需要多长时间。 最后，这是他们登陆的最后一页。 这样结帐就完成了。

你可以在这里看到你如何看待一切的时间安排。 您还有一个脚本日志，它向您显示此处发生的一切。 所以他们访问了登录页面，登录，添加了手机计划，添加了六部手机。 他们将所有这些东西都添加到购物车中，然后他们购买了购物车中的物品，之后购物车就空了。

您还会看到一个浏览器日志，其中显示了发生的任何错误。 我们这里有一堆语法错误。 这是一个演示环境。

现在看，您在这里加载资源服务器失败，响应状态为 500。所以这就是我们正在谈论的优惠券是有效的调用。

因此，如果我是一名开发人员，我会注意到这一点。 我看到的第一件事是，嘿，我们这里有一个 500，它似乎在优惠券页面上。 所以他们试图加载一些重要的东西。 所以这就是我们开始谈论网站优化机会的地方。

最后，我这里没有。 但是，如果检查本身失败，您会在此处看到失败的屏幕截图部分，它实际上会向您显示失败页面的屏幕截图、预期结果以及结果。 所以我们在某个地方确实有一个演示环境，它实际上故意记录了一个失败，并且结帐 - 应该存在的实际结帐按钮丢失了。 因此，这就是您实际看到发生的任何故障和发生的任何错误的结果的地方。 基本上，如果未检测到您指示测试发现的任何严重错误或任何组件，则会引发整个检查失败。

那就是你会看到屏幕截图的时候。 那时您还会在该摘要页面上看到失败。 同样，您会看到它亮起为红色。 您将能够看到失败的位置、失败的位置以及失败的时间戳。 我们今天要测试的合成结帐工作流程测试的演示到此结束。

JOSH DAILEY： 非常感谢，Damien。 这是非常有见地的。 我希望你作为正在观看的开发人员，或者如果你自己是商店老板并且你现在正在观看，你会看到像 New Relic 这样的东西可以添加到你的工作流程中的不可思议的价值，如果有什么东西可以让你省去大麻烦下降，如果有中断和其他事情正在发生，但也只是帮助改善增长。

如果您对 APM 感兴趣但没有使用它，这是我们的应用程序性能监控功能，请与您的客户经理交谈或询问我们团队的任何成员，了解如何在 WP 上开始利用 New Relic引擎。

再次感谢你，达米安。 谢谢你们。 我希望你在 DE{CODE} 度过余下的时光。