WooCommerceストア用の高度なレポートアプリの作成

11月11日 19:41更新

015510

WordPress用のWooCommerceプラグインを使用すると、eコマースプラットフォームを効率的に作成および管理することができ、新規または完了した注文、在庫レベルの低下、および支払いの成功を警告する組み込みの通知を提供します。これらの機能は重要ですが、WooCommerceが収集する貴重なデータについての見識はほとんどありません。

これらの制限は、WordPress 環境で実行される従来のプラグインの特徴です。WooCommerce APIと統合し、外部リソースを使用することで、ホストされたアプリケーションは、高度なレポート、カスタマイズされたアラート、およびeコマーストランザクションの詳細な洞察を提供することができます。

既存のレポートおよび通知機能

WooCommerceの内蔵アラートとステータスアップデートは基本的なショップ管理に役立ちますが、すべてのビジネスニーズを満たすとは限りません。そのため、多くのユーザーは通知やレポート機能を強化するためにサードパーティのプラグインを利用しています。

最も人気のあるプラグインには次のようなものがあります：

WooCommerce管理者 - 直感的なダッシュボードに、ショップの主要な指標とレポートを表示します。
WooCommerceのPDF請求書と梱包伝票 - インボイスとパッキングリストのテンプレートをカスタマイズし、作成されたインボイスとパッキングリストの記録とともに顧客に自動的にEメールで送信することができます。
WooCommerce Google Analyticsの統合 - Google Analyticsツールを使用して、顧客属性やトラフィックソースに関する詳細なレポートを作成します。

これらのプラグインを使用することで、WooCommerceは注文のサマリー、在庫不足のアラート、在庫管理、Google Analyticsのようなツールとの統合による詳細な分析など、レポートやアラートオプションを提供します。

現行の報告システムの限界

現在のレポーティング・システムは便利ではありますが、機能が限られており、多くの制限があります：

カスタマイズ一般的なレポーティングツールやプラグインでは、データから深く具体的な洞察を得ることができません。一般的なレポーティングツールやプラグインでは提供できないような、特殊なメトリクス、独自のビジュアライゼーション、独自の分析ツールとの統合、またはデータフィルタが必要です。
スケーラビリティ： 既存のレポーティングシステムは、大規模なデータセットを扱う際にスケーラビリティの問題に直面することがあります。パフォーマンスの低下やデータ処理のボトルネックは、効率的なデータ分析を妨げ、意思決定や応答時間の遅れにつながります。
WordPressへの依存：WordPressとの統合は、独立性、カスタマイズ性、拡張性を制限するため、サーバーリソース、プラグインの互換性、セキュリティの脆弱性に関連する制限に直面する可能性があります。また、この統合によって、組織がより高度な技術やソリューションを採用できなくなる可能性もあります。

高度なレポートアプリケーション

このガイドで想定している高度なレポート・アプリケーションには、以下の機能があります：

顧客が新しい注文をすると、詳細な取引アラートがメールでショップオーナーに送信されます。また、アプリにはダッシュボードがあり、すべての注文とその詳細が表示されます。
在庫更新はダッシュボードにショップの在庫詳細を表示します。ここから各商品の在庫レベルを簡単に追跡できます。
総売上高レポートでは、長期的な収益傾向を分析することができます。

一般的なプラグインやWooCommerceのデフォルトの通知・アラートシステムとは異なり、このアプリは残りの在庫や総売上に関する詳細でカスタマイズ可能なアラートを提供します。

高度なレポートアプリケーションの開発方法

このセクションでは、Node.jsとWooCommerce REST API 歌で応えるウェブフックショップのデータを取得するためのレポーティングアプリケーションを一緒に作りましょう。

お願いします：

1つまたは複数の商品グループを含むローカルで運営されるWooCommerceショップです。
メール送信無料メールガンアカウント .
Node.jsのインストール歌で応えるングロク .
プロジェクトベース入門テンプレート.
コードエディター。

入門テンプレートの設定

以下の手順に従って、Getting Startedテンプレートを設定してください：

Mailgun APIキーとサンドボックスのドメインをメモしてください。に貼り付け、その値を対応する変数と一緒に環境をご覧ください。についてはmailgun_sender_email変数の値として、Mailgun アカウントを作成するために使用される電子メールを提供します。
WordPressの管理ダッシュボードで、以下を選択します。WooCommerce >セットアップ >高いレベル > REST API.

クリックキーを追加 アプリケーションからのリクエストを認証するためのAPIキーを作成します。
とおす主な内容 セクションを選択し、指示とユーザーを提供します。読み取り/書き込み をクリックします。APIキーの生成.

結果ページからのコピーコンシューマーキー 歌で応えるコンシューマー・キーは二度と見ることができません。
とおす環境ファイルにコピーし、前のステップでコピーした値をそれぞれの変数に代入します。ショップのURLを変数 woocommerce_store_url (に似ています。http://localhost/mystore/index.php).
ターミナルで以下のコマンドを実行して、プロジェクトの依存関係をすべてインストールします：

npm i express @woocommerce/woocommerce-rest-api dotenv ejs mailgun.js

npm i -D nodemon

これらの依存関係の役割は以下の通り：

エクスプレスAPIを作成するためのNode.jsフレームワークです。
@woocommerce/woocommerce-rest-api: WooCommerce REST APIへネットワーク電話をかけます。
ドットエンブ.env よりファイルで環境変数をロードします。
イーイエスJavaScript テンプレートを作成します。
mailgun.jsMailgunを使ってメールを送信します。
頷きファイルの変更を検出すると、自動的にサーバーを再起動します。

アプリケーション機能の実装

開始テンプレートには、ビューのレンダリングに使用されるテンプレートが含まれます。埋め込みJavaScript（EJS）テンプレートのコードは、.NETフォルダにあります。こうすることで、WooCommerce APIから必要なデータを取得し、ユーザーインターフェース（UI）に表示するためにEJSテンプレートに渡すサーバーロジックに集中することができます。

アプリケーションの機能を実装するには、以下の手順を実行します：

という名前のファイルをプロジェクトのルート・フォルダーに作成します。server.jsファイルです。このファイルは、Express サーバーへの入り口となります。
以下のコードをserver.jsファイルに貼り付けます：

const express = require('express')
const WooCommerceRestApi = require("@woocommerce/woocommerce-rest-api").default；
require('dotenv').config()；

const app = express()
const port = 3000

const WooCommerce = new WooCommerceRestApi({
 url: process.env.WOOCOMMERCE_STORE_URL, consumerKey: process.env.WOOCOMMERCE_STORE_URL, consumerKey: process.env.WOOCOMMERCE_STORE_URL
 consumerKey: process.env.WOOCOMMERCE_CONSUMER_KEY, consumerSecret: process.env.
 consumerSecret: process.env.WOOCOMMERCE_SECRET_KEY, consumerSecret: process.env.
 バージョン: "wc/v3"
});

app.set('view engine', 'ejs')

// アプリケーションが稼働しているかどうかをチェックするエンドポイント
app.get('/', (req, res) => {
   res.send('The application is up and running!')
})

// ストア内の全商品を取得
app.get('/products', (req, res) => { WooCommerce.get("products")
   WooCommerce.get("products")
       .then((response) => {
           res.render('pages/inventory', {
               products: response.data, {
               currentPage: req.originalUrl
           });
       })
       .catch((エラー) => {
           console.log(error.response.data); }); }) .catch((error) => { }) .catch((error) => { }); }) .catch((error) => {
       });
})

app.listen(ポート, () => {
 console.log(`App listening on port ${port}`)
})

上記のコードではExpress.jsを使用してウェブサーバーを作成しています。まず必要なパッケージをインポートし、WooCommerceクライアントがWooCommerce REST APIインタラクションを設定し、EJSテンプレートを使用するようにアプリケーションを設定します。

まず/ エンドポイントを定義します。次に/製品 WooCommerce ショップからすべての商品を取得するルート。成功した場合、このルートは在庫 取得したデータのプレゼンテーションテンプレートを使用します。

このコードではカレントページすべてのルートのテンプレートはテンプレートに渡され、ダッシュボードでアクティブなページを識別するのに役立ちます。

コマンドの実行npm run dev さらにhttp://localhost:3000/products ブラウザで開くと結果が表示されます：

店舗在庫ページには、ショップ内のすべての商品とその詳細が表示されます。この情報は利用可能な商品を追跡し、それに応じて在庫を管理するのに役立ちます。

売上レポートを処理するには、server.jsファイルに以下のルートを追加します：

// 月次売上レポートの取得
app.get('/sales', (req, res) => { 次のようになります。
   WooCommerce.get("reports/sales", {
       期間: "月"
   })
       .then((response) => {
           res.render('pages/sales', {
               sales: response.data, {
               currentPage: req.originalUrl
           })
       })
       .catch((error) => {
         console.log(error.response.data)；
       });
})

このコードは/販売 WooCommerce Sales Reporting APIから月次売上レポートを取得するためのエンドポイントです。 APIコールには以下が含まれますピリオド の値を持つパラメータ月このパラメータは、当月の売上レポートを指定します。リクエストに成功すると、コードは取得したデータを使用して売上 EJS テンプレートをレンダリングします。

ブラウザでhttp://localhost:3000/sales 結果を見る

このページでは、毎月の収益動向を分析するための包括的な売上総利益レポートを表示します。

受注管理の実施

以下のルートをserver.js ドキュメンテーション

// すべての注文を取得
app.get('/orders', (req, res) => {
   WooCommerce.get("orders")
       .then((response) => {
           res.render('pages/orders', {
               orders: response.data, {
               currentPage: req.originalUrl
           })
       })
       .catch((error) => {
           console.log(error.response.data)；
       });
})

このコードはWooCommerceショップのすべての注文を取得し、取得したデータを使用して注文テンプレートをレンダリングします。

ブラウザでhttp://localhost:3000/orders 結果を表示します。この画面は注文管理情報を表示します：

連結取引レポートのアラートをカスタマイズ

あなたのウェブサイト上で顧客が注文したときにカスタマイズされた電子メールアラートを送信する機能を実装するには、以下の手順に従ってください：

ターミナルウィンドウを開きngrok http 3000 を使用して、ウェブサーバ接続用のトンネルを確立します。このコマンドはWooCommerceがウェブフックデータを送信するために使用できるHTTPSリンクを生成します。生成された転送リンクをコピーします。
server.jsファイルに以下のルートを追加します：

app.post('/woocommerce-webhook/new-order', (req, res) => {.
   const data = req.body; // WooCommerce webhookからデータを受信しました。
   console.log('New order:', data)；

   if(data?.id){
       mg.messages.create(process.env.MAILGUN_SANDBOX_DOMAIN, {
           from: `WooCommerceストア  `、
           
           件名: "新規注文作成"、
           html: newOrderEmail(data.order_key, `${data.billing.first_name} ${data.billing.last_name}`, data.billing.email, data.total, data.status, data.payment_method_title, data.line_items)
       })
       .then(msg => console.log(msg)) // レスポンス・データを記録します。
       .catch(err => console.log(err)); // エラーのログを記録します。
   }

   res.status(200).send('Webhook received successfully'); // WooCommerceにレスポンスを送信します。
}).

このコードは、顧客が新規注文を作成したときにトリガーされる WooCommerce ウェブフックからの受信データを処理するルートを定義します。受信データに id 属性 (注文が有効であることを示す) が含まれている場合、Mailgun API を使用して指定されたメールアドレスにメール通知を送信します。

Eメールには、顧客名、Eメール、合計金額、ステータス、支払い方法、購入商品のリストなど、さまざまな注文の詳細が含まれます。

コードの使用 utils/new-order-email.jsファイルで定義されたnewOrderEMail()関数がメールを書き込み、カスタムメールテンプレートを返します。データが処理され、Eメールが送信されると、サーバーはWebhookが正常に受信されたことを示す200のステータスコードと対応するメッセージ("Webhook successfully received")で応答します。

以下のステートメントをインポートに追加します。newOrderEmail() 関数です：

const { newOrderEmail } = require('./utils/new-order-email')；

コマンドの実行npm run start をクリックしてサーバーを起動します。
WordPressの管理ダッシュボードで、以下を選択します。WooCommerce >セットアップ >高いレベル > ウェブフック.

クリックWebhookを追加しウェブフックデータフォームには以下の情報が記載されています：

なニューオーダーアラート
情勢アクティブ
ごかんけいせいぼおんオーダー作成
配信URL: 手順1でコピーした ngrok 転送 URL を貼り付けます。/woocommerce-webhook/新規注文 を URL に追加します。これは、Webhook のロードを受信するために新しく定義されたエンドポイントです。

反則(シークレット): 空白のままにします。デフォルトは現在の API ユーザーのコンシューマーシークレットです。このシークレットは、リクエストヘッダ内の配信されたウェブフックのハッシュを生成します。受信者は、この秘密を使って受信データの真正性を確認できます。署名が期待される値と一致する場合、データが WooCommerce によって送信されたことを確認し、信頼とセキュリティを提供します。
APIバージョンWP REST API Integration v3.

クリックウェブフックの保存.
ショップにアクセスして注文してください。下記のようなメールが届きます：

概要

残りの在庫レベルを更新し、包括的な総売上レポートを提供する高度なレポートアプリケーションを作成しました。また、商品詳細、数量、顧客情報など、特定の取引をリアルタイムで可視化する詳細な取引アラートも提供されるため、在庫を積極的に管理し、販売傾向と収益パターンを把握することができます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み