帶有新 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} 度過餘下的時光。