New Relic を使用した WooCommerce レポート

WooCommerce のレポートは、伝統的に規範的なビジネス指標に焦点を当ててきました。 また、カスタマイズが難しい場合もあります。

このセッションでは、New Relic Application Performance Monitoring (APM) を使用して、オンライン ストアのパフォーマンスをより詳細に把握し、サイトのパフォーマンスと主要なビジネス指標をすべて同じダッシュボードで追跡する方法を学びます。

スピーカー:

• Joshua Dailey 氏、WP Engine のプロダクト マーケティング マネージャー
• Damien DeHart、MSP パートナー エンジニア、New Relic チーム リード

セッションのスライド:

転写:

ジョシュ・デイリー: みなさん、こんにちは。 WP Engine e コマース ソリューションのプロダクト マーケティング マネージャーである Josh Dailey と私は、過去 10 年間、コマース ストアの作成と、WooCommerce の拡張機能の開発と立ち上げの両方に費やしてきました。 ここでの私の仕事は、e コマース ソリューションを継続的に改善することです。

現在、コンバージョンを促進し、継続的な店舗管理を簡素化するためのいくつかの独自の利点を持つ e コマース パッケージを提供しています。 これには、スマート キャッシングを使用してストア ページ キャッシュの 90% 以上を提供する WooCommerce 用の EverCache、接続を切断したり機能性のためにパフォーマンスを犠牲にしたりすることなく、より多くの同時買い物客に販売できるライブ カート、ElasticPress を利用したインスタント ストア検索が含まれます。正確な検索、17 ポイントの WooCommerce ビジュアル リグレッション テストを備えたスマート プラグイン マネージャー、ストアを簡単に構築および成長させるための WooCommerce 用のビルダー ツール。

さらに、ツールセットを拡張するためのアプリケーション パフォーマンス監視などのアドオンもあります。 何年もの間、New Relic と提携してすべてのプレミアム顧客にこれを提供してきましたが、WooCommerce ストアに固有の利点があることがわかり、最大限に活用できるようにしたいと考えました.

Built With によると、WooCommerce は世界で最も使用されているコマース ソリューションであり、インストール数は 700 万回を超えています。 マーチャントと開発者は、WordPress とのシームレスな統合と、ショッピング エクスペリエンスをすばやく作成およびカスタマイズする機能のために、それを選択します。 WooCommerce を使用して開発を合理化することで、開発を開始するための基盤が提供され、より迅速に本番環境に移行できるようになり、最終的にはプロジェクトでより多くの成果を上げることができます。

しかし、ストアが稼働してトラフィックを受信すると、最もよく聞かれる質問の 1 つは、コンバージョンのためにストアを最適化する方法と、どこでより良いレポートを取得できるかということです。 これは、WooCommerce に基本的な機能と基本的なツールがパッケージ化されているためです。 これらはスターター ストアですぐに使用でき、注文、顧客、在庫または在庫、税という 4 つの構成可能なレポートが含まれています。

これで、初心者でも大丈夫です。 しかし、あなたが開発者で、サイトが特定のキャンペーンに合わせてスケーリングされるようにすることが仕事である場合、レポートは結果に限定されるため、一般的な WooCommerce レポートでは十分とは言えません。 健全な分析ですが、健全な分析のためには、サイトのパフォーマンスがサイトの結果にどのようにつながっているかを掘り下げて回答できる必要があります。 その情報が 1 か所になければ、干し草の山から針を探していることになります。 クライアント ストアは健全なレポートに依存して、顧客の獲得と維持、パフォーマンスのボトルネック、マーケティング キャンペーン、パフォーマンスがコンバージョンにどのように対応するか、そして最終的に経費を削減し、収益を増加させることについて決定を下します。

干し草の山から針を探すのではなく、ダッシュボードが磁石のように針を引き出してくれます。 WooCommerce の構築と最適化をよりスマートに行えるようにすることで、当社の e コマース製品への素晴らしい追加機能であると考えています。 たとえば、データベースの応答時間が特定の期間の注文数とともにどのように追跡されるかを正確に表示できます。 あなたのサイトはスケーリングしていますか? コンバージョンを増やすためにパフォーマンスを最適化できるのはどこですか?

したがって、このセッションでは、時間を節約し、柔軟で拡張可能な店舗レポートを提供できるダッシュボードを構築するために標準化できるツールを使用して、実際に実践的に学びたいと考えています。 そのため、New Relic の Damien がここに来て、WP Engine WooCommerce の最大の顧客の 1 人のために作成された現実世界のダッシュボードを使用して Woo レポートを強化する方法についてインサイダーを見ていただけることをうれしく思います. ダミアン、ご参加ありがとうございます。 フォローしていただけると本当に嬉しいです。

DAMIEN DEHART: ジョシュ、私を迎えてくれてありがとう。 このプレゼンテーションをお手伝いできることをうれしく思います。 そのため、WPE の最大の WooCommerce コンシューマの 1 つで構築した実際のソリューションについて話を始める前に、New Relic プラットフォーム全体についてお話ししたいと思います。

そのため、新しい New Relic プラットフォームについては、今日はダッシュボード機能と APM、およびこれらがどのように融合して WooCommerce 顧客向けのより堅牢なレポート機能を作成するかに多くの焦点を当てます。 しかし、プラットフォーム全体と、この決定に至った経緯、およびこれを実現するためにさまざまな機能をどのように活用しているかについて簡単に紹介することは理にかなっています.

したがって、この図の下部を見ると、New Relic One が表示されます。 New Relic One は New Relic プラットフォームです。 これは、大規模な時系列データベースに基づいて構築されており、実際には、Google が検索結果に対して行うよりも多くのヒットが毎日表示されます。

そのプラットフォームの上には、ブラウザ、Synthetics、モバイル、New Relic APM、インフラストラクチャなど、さまざまな機能がすべてあります。 これらはすべてテレメトリ データを New Relic に送信し、それを消費してエンド カスタマーである WPE とそのすべての顧客に提供し、ダッシュボード、カスタマイズされたアラートなどを構築するために消費し、さまざまなビジネス インサイトを生成します。 New Relic プラットフォームでのあらゆるユースケース。

そこで、WPE の WooCommerce の最大の消費者の 1 つでダッシュボードを構築しました。 右側のスクリーンショットは、私たちが作成したダッシュボードのスナップショットを示しています。 そして、New Relic のダッシュボードと機能を活用することの主なメリットについてお話したいと思います。

前のスライドで説明したように、New Relic は大規模な時系列データベースであり、毎日 Google が検索するよりも多くのヒットが表示されます。 そのため、スケールとパフォーマンスのためにこのデータベースを構築しました。 したがって、ダッシュボードや、おそらく WooCommerce とレポートの違いについて考え始めると、これは大規模なデータを検索するための専用ソリューションになります。 つまり、ビジネスにとって最も重要なパフォーマンス指標をリアルタイムで監視できるようになります。

また、New Relic 内にキャプチャされている任意のデータを使用してダッシュボードを構築する機能も提供します。 コーディングする必要はありません。 私たちのSQL、つまりアンチSQL言語を理解する必要があると言って、それを少し撤回します. しかし基本的に、SQL を知っていれば、New Relic を知っていることになります。 また、スタック全体で問題をより迅速に診断することもできます。

繰り返しますが、New Relic プラットフォームに取り込んでいるデータは、WooCommerce で実行されているアプリケーションから、JavaScript エラーなど、アプリケーション自体での顧客のフロントエンド インタラクションまで、すべて追跡できます。それを New Relic で 1 か所にまとめます。 そして最後に、私たちの主な目標は、データ主導の意思決定を推進して、ビジネスの成果を最適化することです。

では、どうすればよいのでしょうか。 そのダッシュボードを見ると、カートの合計、注文の合計、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、データ レイヤー、そして最終的にはビジネスの実践に追加することにまで及びます。 -開発者から CTO、さらにはビジネス側の CEO まで、あらゆる人から参加します。 そのため、WordPress のサブスクリプションに含まれている New Relic Synthetics を使用して WordPress ソリューションを管理する方法と、これを e コマースに使用する方法についても少しお話ししたいと思います。

したがって、New Relic Synthetics は非常に堅牢な Selenium ベースのテスト ツールであるため、ストレス テストや負荷テストのソリューションとして自社を宣伝するのは好きではありません。非常に具体的なシナリオをテストするために。 そのため、WP Engine の監視パッケージに対して、サブスクリプションで得られるさまざまなチェックがいくつかあります。 最初に説明するのは、可用性テストです。

したがって、これは基本的に DNS サーバーへの ping であり、この時点で Web サイトが存在するかどうかを示します。 したがって、用途があります。 私たちはこれを模擬試験の基本的なタイプと考えています。 ただし、利用可能な他のバージョンがいくつかあります。 したがって、SSL証明書の有効期限テストがあります。

だから、これはまさにそれがどのように聞こえるかです。 証明書の有効期限が切れる時期を設定すると、その日に近づくと通知が届きます。 また、Web サイト上のすべてのリンクを表示する Page Link Crawler もあり、Web サイトのリンクが壊れているかどうかを実際に通知します。

これは、e コマースの顧客にとって特に有用であることがわかりました。これは、Web サイトにさまざまな製品リンクがあり、それらが変化していることが多いためです。 そして、それについていくのが難しい場合もあります。 そのため、何が壊れていて顧客がアクセスできないかをテストすることは、e コマース サイトを通じて最大の収益を上げていることを確認する上で最も重要です。 また、すべてのアセットでページ全体の読み込みを行うページ読み込みパフォーマンス モニターもあり、ページ上のさまざまなアセットすべてが何を行っているかを実際に教えてくれます。 Web サイトに関連するエラーであり、リストは延々と続きます。

次に、ステップの実行またはユーザー フローの機能テストに関するデモを実際に行います。これは、デモ環境の 1 つ内のチェックアウト ページをウォークスルーします。 そして、プロセス全体で発生する障害が表示されます。 そのため、顧客がサインインし、チェックアウト フローを通過し、商品をカートに入れ、チェックアウトを試みるまでの手順を説明します。 そして、そこで何が起こるか見てみましょう。 それでは早速、デモの時間です。

よし、これで New Relic の内部にいる。 ここに表示されているのは、New Relic のホームページです。 このページに慣れていない方のために説明すると、New Relic に存在するさまざまなエンティティがすべて表示されます。 基本的に、エンティティとは、監視したいデータを発行するものです。

ということで、今日は合成繊維についてお話します。 シンセティックにたどり着くには、ここの左側に移動すると、左側にシンセティック モニタリングが表示されます。 ここで合成モニターをクリックしてアクセスすることもできます。 しかし、完全を期すために、今日はそれをクリックします。

こちらのデモアカウント内に大量のモニターがあることがわかります。 チェックアウト フローが機能していることを確認する、スクリプト化されたブラウザをお見せしたいと思います。 だから私はこれが検証という名前であることを知っています、名前を検証しています。 入力すると、これが私のモニターそのものであることがわかります。

モニターに入ると、いろいろ見えます。 したがって、実際にはこれを 3 つの異なる場所に対して実行しています。 シンガポール、ロンドン、ポートランドです。 これら 3 つは、New Relic がパブリック ロケーションと呼んでいるものです。

そのため、AWS には世界中に多数のホストされた場所があり、これらすべてに対して実際にチェックを実行できます。 したがって、グローバルな Web サイトなどを持っていて、世界中でパフォーマンスをテストしたい場合は、次のようにします。

これは、CDN のリクエストにも役立ちます。 たとえば、小切手を実行していて、シンガポールでは速度が非常に遅いとしますが、データ センターとすべてのホスティングはおそらく米国西部にあるとします。 世界中で持続的なパフォーマンスを得るために、ここで CDN を立ち上げたいと思うかもしれません。

したがって、このグラフでは、過去 30 分間に見ている時間枠でのチェックの数に対する失敗の数が表示されます。 これを 1 日程度に拡大すると、ここで指標の一部が変化することがわかりますが、これは進行中です。これは、実際には過去 2 時間半にわたって表示されています。 失敗は赤で表示されます。

したがって、実際には過去 2 時間半に障害は発生しておらず、場所全体でいくつかの基本的なタイミング情報が見られます。 少し下に行くと、いくつかのパフォーマンス メトリックも表示されます。

つまり、これはユーザー中心のパフォーマンス メトリックを示しています。 したがって、基本的に、ページ上の何かが表示されたときの最初のバイト。 最初のペイントは、写真やテキストなどをロードした場合のようなものです。 ページの読み込みはページ全体の読み込みです。つまり、ページが完全に読み込まれたときです。

First Contentful Paint は基本的に、ページにロードされた最大の画像です。 そのため、このチェックのすべてのタイミング情報を提供しています。 リクエストをドメイン別に表示しています。

アプリケーション自体で何かを呼び出している場合、それらが完了するまでにどれくらいの時間がかかりますか?時間の経過とともに、それらの要求がいくつ発生するのでしょうか? そして、ドメインごとの期間。 では、これらのそれぞれにどれくらいの時間がかかりますか? 私たちの newrelicdemo.com は、最も時間がかかり、次にリソース タイプごとの平均サイズです。

したがって、ここで画像が最大であることがすでにわかります。 したがって、最適化の機会があれば、おそらくこのサイトの画像を見始めるでしょう。

最後に、エラー応答コードです。 したがって、これらはあなたが期待できるすべてのものです。 合成チェックを作成すると、ここにたくさんのタグがあることもわかります。 これらはプラットフォーム内でカスタマイズ可能です。 したがって、チーム、製品サーフェス、特定の Web サイト、またはテストしている製品がある場合は、実際にそのようにタグ付けできます。 そして、プラットフォームでそれらのタグを検索できます。

さらに、URL が表示されます。 したがって、これをクリックすると、実際には、このチェックで監視している私の Web ページに移動します。 あなたの場合、それはライブの e コマース サイトになります。 この場合、それは私のデモ アプリです。

OK、これで問題ありませんが、何が問題だったのか、またはアプリケーション内で何が問題になる可能性があるのか​​について話す部分にどのように到達すればよいのでしょうか? これについては、左側のサイドバーにさまざまなオプションがあります。 これらのその他のビューに焦点を当てるつもりはありませんが、それぞれが何をするかについて説明します。

下から順に、[設定] タブには、実際にここで実行しているスクリプトが表示されます。 基本的に、モニターの構成設定、選択した場所が表示されます。 私にはこれを編集する権限がありませんので、前に説明したように、すべてのパブリック ロケーションのリストを表示します。 3を選択しました。

そして、ここにスクリプトがあります。 これが私たちのスクリプトです。 これは Node に組み込まれており、実際にこれらの Web ページをクロールし、特定の Web ページをロードして、それらの結果をコンソールに出力しています。

ここでも報告があります。 したがって、デフォルトでは、作成したモニターは SLA レポートを取得し、それらについてもアラートを出すことができます。

そして、私たちはちょうど要約ページにいました。 では、ここでもう一度クリックしてみましょう。 モニター セクションには、すべての結果が表示されます。 したがって、これにより、チェック自体のすべての結果、消費されたリソース、および発生した障害が表示されます。

これをクリックすると、過去 24 時間で 100% の成功率が表示されます。 チェックが失敗したことはありません。 全て大丈夫。 期間は場所ごとに表示されます。

繰り返しになりますが、これらの CDN 要件について話しました。 ポートランドが大幅に低いか、それほどでもないことがわかりますが、他のすべてよりもかなり低くなっています。 つまり、私のデータセンターまたはインフラストラクチャが米国西部にあることを示しているのかもしれません。

世界中で一貫したパフォーマンスを望んでいます。 したがって、これらの他の場所のいくつかに CDN を配置することもできます。 大したことじゃないから仕方ないのかもしれませんが。 それを決めるのはビジネス次第です。

そして、これらのチェックのさまざまな発生がすべて表示されます。 場所ごとに表示されます。 期間別に表示されます。 それらは応答サイズで表示されます。

そして、失敗メッセージがある場合は、それも表示されます。 2 つの失敗のみをフィルタリングすることもできます。 この時間枠では何もありませんでした。 何か面白いものが得られるかどうか見てみましょう。

このモニター自体に障害はないと思います。 しかし、これらのいずれかをクリックすると、結果がどのようになるかをお見せします。 繰り返しますが、これは複数のページにまたがる模擬テストです。 したがって、実際のユーザーが Web サイト内で行うことを模倣しています。

このメインページにたどり着くのが流れです。 これがそのページ内で起こっていることです。 したがって、ユーザー中心のタイミングが得られます。

ページにロードされたさまざまな種類のものをすべて表示できます。 ここに大きな画像があります。これは非常に大きな画像です。これは実際に、これを表示するために意図的に行ったものです。

しかし、ここにこの膨大な画像、この telco.bids 画像があり、多くの時間を費やしています。 ですから、ちょっと見てください、実行できる最適化の機会がいくつかあります。 個人的には、まず注目したいのはその巨大なイメージです。

フローに戻りましょう。メイン ページから始めます。 ログインページに入ります。 ここでも発生するすべてのもの、発生する JavaScript またはその他のエラー、発生している AJAX など、上記のすべてを確認できます。

そして、ログインすると、リダイレクトされます。 その上にもタイムラインが表示されています。素晴らしい滝の眺めです。 すべてのページを見ていきます。

そこで彼らは電話のページに行き、電話を探しています。 彼らが欲しい電話を見つけるのに長い時間がかかります。 それはいいです。

彼らは実際の電話を見つけます。 これは製品のデモ Web サイトの実際のページであり、特定の製品ページです。 そして、ここからが面白くなり始めます。 これを調べるとわかります。このページのパフォーマンスを確認したいだけです。

このページの読み込みにはどのくらいの時間がかかりますか? また、顧客に提供した SLA を無視できますか? 彼らは自分の計画ページに行き、計画を探します。 彼らは計画を決定します。

今、彼らは電話を探しています。 そのため、顧客が必要な電話を見つけ、必要なプランを見つけ、それらすべてをショッピング カートに入れるというプロセス全体を実行しています。 彼らはショッピングカートに行き着きます。

ここでエラーが発生しました。 したがって、エラーが発生したリクエストを確認したい場合は、この HTML リクエストを使用して、このページにアクセスします。 これは有効なリクエストですが、エラーです。 したがって、ここでは完全なトラブルシューティング パスをたどるつもりはありません。

しかし、基本的には、デモ環境で発生するように設定されたシナリオがあり、クーポン自体が有効ではなく、毎回エラーがスローされます。 これは、最適化されていないバックエンド スクリプトまたはバックエンド コードに遡り、データベース内のクーポンを更新するのを忘れていました。 ここから、制御された環境で実際にスローされているエラーと、それがアプリのパフォーマンスにどのように影響するかを確認できます。

そして、あなたはチェックアウトプロセスを通過します。 ここですべてがどれだけ時間がかかるかがわかります。 そして最後に、これが彼らがたどり着く最後のページです。 というわけでチェックアウト完了。

そして、ここですべてのタイミングをどのように見るかを見ることができます. また、ここで発生したすべてを示すスクリプト ログもあります。 ログイン ページにアクセスしてログインし、電話プランを追加して、6 台の電話を追加しました。 彼らはこれらすべてのものをカートに追加してから、カートの中身を購入し、その後カートは空になりました。

また、発生したエラーを示すブラウザ ログも表示されます。 ここにはたくさんの構文エラーがあります。 デモ環境です。

ここで、リソース サーバーの読み込みに失敗し、ステータス 500 で応答したことを確認してください。

したがって、私が開発者であれば、これに注意するでしょう。 私が最初に目にするのは、ここに 500 があり、クーポン ページにあるようです。 彼らは何か重要なものをロードしようとしています。 ここから、ウェブサイトの最適化の機会について話し始めます。

そして最後に、私はそれをここに持っていません。 ただし、チェック自体が失敗した場合は、ここに失敗のスクリーンショット セクションが表示され、実際には、失敗したページのスクリーンショット、予想される内容、および結果が表示されます。 そのため、実際に意図的にエラーを報告するデモ環境がどこかにあり、チェックアウト (そこにあるはずの実際のチェックアウト ボタン) がありません。 そこで、発生した障害やエラーの結果を実際に確認します。 基本的に、重大なエラーや、テストで検出するように指示したコンポーネントが検出されない場合、チェック全体でエラーがスローされます。

その時、スクリーンショットが表示されます。 そのとき、その概要ページにも失敗が表示されます。 繰り返しますが、赤く点灯します。 また、失敗した場所、失敗した場所、およびそのタイムスタンプも確認できます。 これで、今日テストする予定だった合成チェックアウト ワークフロー テストのデモは終了です。

ジョシュ・デイリー: どうもありがとう、ダミアン。 これは非常に洞察に満ちています。 そして、私はあなたが見ている開発者として、またはあなた自身がマーチャントストアのオーナーであり、今見ているなら、New Relicのようなものがあなたのワークフローに追加できる信じられないほどの価値を見て、何かがあれば大きな頭痛の種を救うことを願っています.停止やその他のことが起こっている場合は低下しますが、成長とともに改善するのにも役立ちます.

アプリケーション パフォーマンス監視機能である APM に興味があり、使用していない場合は、アカウント マネージャーに相談するか、チームのメンバーに尋ねて、ここ WP で New Relic の利用を開始する方法を学んでください。エンジン。

もう一度、ありがとう、ダミアン。 皆さん、ありがとうございました。 DE{CODE} での残りの時間をお楽しみください。