Mit dem WooCommerce-Plugin für WordPress kannst du eine E-Commerce-Plattform effizient erstellen und verwalten. Es bietet Zugang zu integrierten Benachrichtigungsfunktionen, die dich über neue oder abgeschlossene Bestellungen, niedrige Lagerbestände und erfolgreiche Zahlungen informieren. Diese Funktionen sind unerlässlich, bieten aber nur einen begrenzten Einblick in die wertvollen Daten, die WooCommerce sammelt.
Solche Einschränkungen liegen in der Natur herkömmlicher Plugins, die in der WordPress-Umgebung arbeiten. Gehostete Anwendungen – webbasierte Operationen auf externen Servern – sind dagegen viel flexibler.
Durch die Integration mit WooCommerce-APIs und die Nutzung externer Ressourcen können gehostete Anwendungen erweiterte Berichte, individuelle Warnmeldungen und detaillierte Einblicke in E-Commerce-Transaktionen liefern.
In diesem Leitfaden erfährst du, wie du eine gehostete Anwendung erstellst, die E-Mail-Benachrichtigungen mit umfassenden Transaktionsdaten generiert, die über die Möglichkeiten des Standard-Plugins hinausgehen.
Vorhandene Berichts- und Benachrichtigungsfunktionen
Die in WooCommerce integrierten Benachrichtigungen und Statusaktualisierungen helfen bei der Verwaltung des Stores, erfüllen aber nicht alle Anforderungen. Daher greifen viele Nutzer auf Plugins von Drittanbietern zurück, um ihre Benachrichtigungs- und Berichtsfunktionen zu erweitern.
Einige der beliebtesten Plugins sind:
- WooCommerce Admin – Bietet ein intuitives Dashboard mit wichtigen Kennzahlen und Berichten.
- WooCommerce PDF Invoices and Packing Slips – Ermöglicht die Anpassung von Rechnungs- und Lieferscheinvorlagen, die automatisch per E-Mail an die Kunden verschickt werden, und bietet eine Aufzeichnung der erstellten Rechnungen und Lieferscheine.
- WooCommerce Google Analytics-Integration – Nutzt die Google Analytics-Tools, um detaillierte Berichte über demografische Daten der Kunden und Traffic-Quellen zu erstellen.
Mit diesen Plugins bietet WooCommerce Berichts- und Warnoptionen, wie z. B. Bestellzusammenfassungen, Warnungen bei niedrigem Lagerbestand, Bestandsverwaltung und detaillierte Analysen durch die Integration mit Tools wie Google Analytics.
Die Grenzen der aktuellen Reporting-Systeme
Die aktuellen Berichtssysteme sind zwar nützlich, haben aber nur begrenzte Möglichkeiten und bringen einige Einschränkungen mit sich, wie z. B:
- Anpassungsmöglichkeiten: Allgemeine Reporting-Tools und Plugins schränken die Tiefe und Spezifität der Erkenntnisse ein, die dein Unternehmen aus den Daten gewinnen kann. Möglicherweise benötigst du spezielle Kennzahlen, einzigartige Visualisierungen, die Integration mit proprietären Analysetools oder bestimmte Datenfilter, die in allgemeinen Reporting-Tools und Plugins nicht ohne Weiteres verfügbar sind.
- Skalierbarkeit: Bestehende Berichtssysteme können bei großen Datenmengen Probleme mit der Skalierbarkeit haben. Langsame Leistung und Engpässe bei der Datenverarbeitung können eine effiziente Datenanalyse behindern und zu Verzögerungen bei der Entscheidungsfindung und den Reaktionszeiten führen.
- Abhängigkeit von WordPress: Da die Integration in WordPress die Unabhängigkeit, Anpassbarkeit und Skalierbarkeit einschränkt, kann es zu Einschränkungen bei den Serverressourcen, der Kompatibilität von Plugins und Sicherheitslücken kommen. Diese Integration kann dein Unternehmen auch daran hindern, fortschrittlichere Technologien und Lösungen einzuführen.
Im Gegensatz dazu kann eine maßgeschneiderte Reporting-Anwendung detaillierte Transaktions- und Kundeninformationen liefern. Mit diesen Daten kannst du Markttrends vorhersehen und dein Angebot entsprechend optimieren.
Außerdem kannst du eine benutzerdefinierte Reporting-Anwendung schnell skalieren, um das wachsende Datenvolumen zu bewältigen und einen reibungslosen Betrieb zu gewährleisten, wenn dein Unternehmen wächst.
Die erweiterte Reporting-Anwendung
Die in diesem Leitfaden vorgestellte Anwendung für erweiterte Berichte hat folgende Funktionen:
- Detaillierte Transaktionswarnungen werden per E-Mail an den Store-Betreiber gesendet, wenn ein Kunde eine neue Bestellung aufgibt. Die Anwendung verfügt außerdem über ein Dashboard, das eine Liste aller Bestellungen mit ihren Details anzeigt.
- Bestandsaktualisierungen zeigen die Details des Store-Inventars auf dem Dashboard an. Von dort aus kannst du die Lagerbestände der einzelnen Produkte leicht verfolgen.
- Mit den Berichten zum Gesamtumsatz kannst du die Umsatzentwicklung im Laufe der Zeit analysieren.
Im Gegensatz zu generischen Plugins oder dem standardmäßigen Benachrichtigungssystem von WooCommerce bietet diese Anwendung detaillierte und anpassbare Benachrichtigungen über den verbleibenden Bestand und den Gesamtumsatz.
Das Hosting der Anwendung bietet außerdem mehrere Vorteile, wie z. B.:
- Skalierbarkeit: Unabhängiges Hosting minimiert Engpässe bei der Datenverarbeitung und stellt sicher, dass du deinen Betrieb ohne Ressourcenbeschränkungen erweitern kannst.
- Anpassbarkeit: Durch unabhängiges Hosting kannst du die Nutzung der gesammelten Daten individuell anpassen, z. B. durch die Integration von Drittanbieterdiensten (wie Predictive Analytics Engines) und die Implementierung einzigartiger Datenvisualisierungstechniken, die besser auf die Anforderungen und Ziele deines Unternehmens abgestimmt sind.
- Eigenständigkeit: Wenn du deine Anwendung aus der WordPress-Umgebung herausnimmst, bist du von Einschränkungen wie begrenzten Serverressourcen und möglichen Konflikten zwischen verschiedenen Plugins befreit.
So entwickelst du eine erweiterte Reporting-Anwendung
In diesem Abschnitt bauen wir eine Reporting-Anwendung mit Node.js, der WooCommerce REST API und Webhooks zum Abrufen der Shopdaten.
Voraussetzungen:
- Ein lokal betriebener WooCommerce-Shop mit einem oder mehreren Produkten.
- Ein kostenloses Mailgun-Konto, um E-Mails zu versenden.
- Node.js und ngrok sind installiert.
- Die Startvorlage für das Projekt.
- Ein Code-Editor.
Konfiguriere die Startvorlage
Befolge diese Schritte, um die Startvorlage zu konfigurieren:
- Notiere dir deinen Mailgun-API-Schlüssel und deine Sandbox-Domäne und füge ihre Werte neben den entsprechenden Variablen in die .env-Datei ein. Für die Variable
MAILGUN_SENDER_EMAILgibst du als Wert die E-Mail an, die du zur Erstellung des Mailgun-Kontos verwendet hast. - Wähle in deinem WordPress-Admin-Dashboard WooCommerce > Einstellungen > Erweitert > REST API.
- Klicke auf Schlüssel hinzufügen, um den API-Schlüssel zu erstellen, mit dem du die Anfragen deiner Anwendung authentifizieren kannst.
- Öffne den Abschnitt Schlüsseldetails und gib eine Beschreibung und einen Benutzer an, wähle Lese-/Schreibrechte und klicke auf API-Schlüssel generieren.
- Achte darauf, dass du den Kunden-Schlüssel und das Kunden-Secret von der resultierenden Seite kopierst, da du sie nicht mehr sehen kannst.
- Öffne die .env-Datei und weise die Werte, die du im vorherigen Schritt kopiert hast, den entsprechenden Variablen zu. Gib die URL deines Stores für die Variable
WOOCOMMERCE_STORE_URLan (z. B.http://localhost/mystore/index.php). - Installiere alle Projektabhängigkeiten, indem du den folgenden Befehl in deinem Terminal ausführst:
npm i express @woocommerce/woocommerce-rest-api dotenv ejs mailgun.js
npm i -D nodemonDiese Abhängigkeiten dienen den folgenden Zwecken:
express: Node.js-Framework, um eine API zu erstellen.@woocommerce/woocommerce-rest-api: Netzwerkaufrufe an die WooCommerce REST API.dotenv: Lädt Umgebungsvariablen aus der .env-Datei.ejs: Erzeugt JavaScript-Vorlagen.mailgun.js: Versendet E-Mails mit Mailgun.nodemon: Startet den Server automatisch neu, wenn Dateiänderungen erkannt werden.
Anwendungsfunktionen implementieren
Die Startvorlage enthält den Code für die Darstellung der eingebetteten JavaScript (EJS)-Vorlagen im Ordner views. So kannst du dich auf die Serverlogik konzentrieren, die die erforderlichen Daten von den WooCommerce-APIs abruft und sie an die EJS-Vorlagen zur Anzeige auf der Benutzeroberfläche (UI) weitergibt.
Um die Funktionen der Anwendung zu implementieren, befolge diese Schritte:
- Erstelle eine Datei namens server.js im Stammordner des Projekts. Diese Datei dient als Einstiegspunkt in den Express-Server.
- Füge den folgenden Code in die Datei server.js ein:
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_CONSUMER_KEY,
consumerSecret: process.env.WOOCOMMERCE_SECRET_KEY,
version: "wc/v3"
});
app.set('view engine', 'ejs')
// endpoint to check if the application is up and running
app.get('/', (req, res) => {
res.send('The application is up and running!')
})
// retrieve all products in the store
app.get('/products', (req, res) => {
WooCommerce.get("products")
.then((response) => {
res.render('pages/inventory', {
products: response.data,
currentPage: req.originalUrl
});
})
.catch((error) => {
console.log(error.response.data);
});
})
app.listen(port, () => {
console.log(`App listening on port ${port}`)
})Der obige Code verwendet Express.js, um einen Webserver zu erstellen. Du beginnst damit, die erforderlichen Pakete zu importieren, den WooCommerce-Client so zu konfigurieren, dass er mit der WooCommerce-REST-API interagiert, und die Anwendung so einzustellen, dass sie EJS-Vorlagen verwendet.
Zuerst definierst du einen / Endpunkt, mit dem du überprüfen kannst, ob die Anwendung läuft. Dann definierst du eine /products Route, die alle Produkte aus dem WooCommerce Store abruft. Bei Erfolg rendert diese Route die Vorlage inventory mit den abgerufenen Daten.
Beachte, dass der Code auch die currentPage an die Vorlage für alle Routen weitergibt und hilft, die aktiven Seiten auf dem Dashboard zu identifizieren.
- Führe den Befehl
npm run devaus und öffnehttp://localhost:3000/productsin deinem Browser, um die Ergebnisse zu sehen:
Auf der Seite mit dem Store-Inventar werden alle im Store verfügbaren Produkte mit ihren Details angezeigt. Diese Informationen helfen dir, den Überblick über die verfügbaren Produkte zu behalten und den Bestand entsprechend zu verwalten.
- Um Verkaufsberichte zu erstellen, fügst du die folgende Route in die Datei server.js ein:
// retrieve monthly sales report
app.get('/sales', (req, res) => {
WooCommerce.get("reports/sales", {
period: "month"
})
.then((response) => {
res.render('pages/sales', {
sales: response.data,
currentPage: req.originalUrl
})
})
.catch((error) => {
console.log(error.response.data);
});
})Dieser Code definiert einen /sales Endpunkt, der den monatlichen Umsatzbericht von der WooCommerce-API für Umsatzberichte abruft. Der API-Aufruf enthält den Parameter period mit dem Wert month, der den Verkaufsbericht des aktuellen Monats angibt. Sobald die Anfrage erfolgreich war, rendert der Code die EJS-Vorlage mit den abgerufenen Daten.
- Navigiere in deinem Browser zu
http://localhost:3000/sales, um die Ergebnisse zu sehen:
Auf dieser Seite wird ein umfassender Gesamtumsatzbericht angezeigt, der dir hilft, die monatlichen Umsatztrends deines Unternehmens zu analysieren.
Auftragsmanagement implementieren
- Füge die folgende Route in die Datei server.js ein.
// retrieve all orders
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);
});
})Dieser Code ruft alle Bestellungen aus dem WooCommerce-Shop ab und rendert die Vorlage Bestellungen mit den abgerufenen Daten.
- Navigiere in deinem Browser zu
http://localhost:3000/orders, um die Ergebnisse zu sehen. Auf dieser Seite werden Informationen zur Auftragsverwaltung angezeigt:
Anpassen von Warnmeldungen für umfassende Transaktionsberichte
Um die Funktion zu implementieren, die dir eine benutzerdefinierte E-Mail-Benachrichtigung sendet, wenn ein Kunde auf deiner Website bestellt, befolge diese Schritte:
- Öffne ein Terminalfenster und führe
ngrok http 3000aus, um die Verbindung deines Webservers zu tunneln. Dieser Befehl generiert einen HTTPS-Link, den WooCommerce zum Senden von Webhook-Daten verwenden kann. Kopiere den generierten Weiterleitungslink. - Füge die folgende Route in die Datei server.js ein:
app.post('/woocommerce-webhook/new-order', (req, res) => {
const data = req.body; // Received data from the WooCommerce webhook
console.log('New order:', data);
if(data?.id){
mg.messages.create(process.env.MAILGUN_SANDBOX_DOMAIN, {
from: `WooCommerce Store <${process.env.MAILGUN_SENDER_EMAIL}> `,
to: [process.env.MAILGUN_SENDER_EMAIL],
subject: "New Order Created",
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)) // logs response data
.catch(err => console.log(err)); // logs any error
}
res.status(200).send('Webhook received successfully'); // Send a response to WooCommerce
});Dieser Code definiert eine Route, die eingehende Daten von einem WooCommerce-Webhook verarbeitet, der ausgelöst wird, wenn ein Kunde eine neue Bestellung aufgibt. Wenn die empfangenen Daten die Eigenschaft id enthalten (was auf eine gültige Bestellung hinweist), wird über die Mailgun-API eine E-Mail-Benachrichtigung an die angegebene E-Mail-Adresse gesendet.
Die E-Mail enthält verschiedene Bestelldetails wie Kundenname, E-Mail, Gesamtbetrag, Status, Zahlungsmethode und eine Liste der gekauften Artikel.
Der Code stellt die E-Mail mithilfe der Funktion newOrderEMail() zusammen, die in der Datei utils/new-order-email.js definiert ist und eine benutzerdefinierte E-Mail-Vorlage zurückgibt. Nach der Verarbeitung der Daten und dem Versenden der E-Mail antwortet der Server mit einem Statuscode 200, der den erfolgreichen Empfang des Webhooks und eine entsprechende Nachricht („Webhook erfolgreich empfangen“) anzeigt.
- Füge die folgende Anweisung hinzu, um die Funktion
newOrderEmail()zu importieren:
const { newOrderEmail } = require('./utils/new-order-email');- Führe den Befehl
npm run startaus, um den Server zu starten.
- Wähle in deinem WordPress-Admin-Dashboard WooCommerce > Einstellungen > Erweitert > Webhooks.
- Klicke auf Webhook hinzufügen und gib die folgenden Informationen in das Webhook-Datenformular ein:
-
- Name: Neuer Bestellungsalarm
- Status: Aktiv
- Thema: Bestellung erstellt
- Weiterleitungs-URL: Füge die ngrok-Weiterleitungs-URL ein, die du in Schritt 1 kopiert hast. Achte darauf, dass du
/woocommerce-webhook/new-orderan die URL anhängst. Dies ist der neu definierte Endpunkt für den Empfang des Webhook-Payloads.
- Secret: Lass dieses Feld leer. Es ist standardmäßig das Kunden-Secret des aktuellen API-Benutzers. Das Secret generiert einen Hash des gelieferten Webhooks in den Anfrage-Headern. Der Empfänger kann dieses Secret verwenden, um die Authentizität der eingehenden Daten zu überprüfen. Wenn die Signatur mit dem erwarteten Wert übereinstimmt, bestätigt sie, dass die Daten von WooCommerce gesendet wurden, und sorgt so für Vertrauen und Sicherheit.
- API-Version: WP REST API Integration v3.
- Klicke auf Webhook speichern.
- Besuche deinen Store und gib eine Bestellung auf. Du solltest eine E-Mail wie die folgende sehen:
Alles auf Kinsta bereitstellen
Mit Kinsta kannst du nicht nur deine WordPress + WooCommence Website mit Managed WordPress Hosting bereitstellen, sondern auch deine neue Berichtsanwendung mit Anwendungs-Hosting.
Unsere Premium-Hosting-Dienste bieten wichtige Funktionen, wie z. B.:
- Hohe Leistung und unglaubliche Geschwindigkeit: Kinsta hostet deine Websites und Anwendungen auf dem Premium Tier Network von Google Cloud Platform mit den schnellsten und robustesten C2-Maschinen und Edge-Caching über das CDN von Cloudflare mit 260+ PoPs.
- Schnelle und unkomplizierte Bereitstellung: Für ein unbeschwertes Hosting-Erlebnis baut Kinsta Anwendungen automatisch auf und stellt WordPress-Websites bereit, ohne dass du sie manuell konfigurieren musst. Du kannst deine Websites ganz einfach mit DevKinsta installieren und entwickeln und sie per Knopfdruck veröffentlichen, während die serverseitigen Einstellungen unserem spezialisierten Technikteam überlassen bleiben.
- Sicherheit: Deine Anwendungen und Websites befinden sich hinter zwei Firewalls, mit DDoS-Schutz und -Abwehr, HTTP/3 und TLS 1.3. Sie sind in einem isolierten Container untergebracht, um Traffic-Spitzen durch andere Anwendungen, die deine Produktionsumgebung stören, sowie bösartige Angriffe von anderen Websites zu vermeiden.
Zusammenfassung
Dank der Flexibilität des externen Hostings hast du eine fortschrittliche Reporting-Anwendung erstellt, die die verbleibenden Lagerbestände aktualisiert und umfassende Berichte über den Gesamtumsatz liefert.
Außerdem bietet sie detaillierte Transaktionswarnungen, die in Echtzeit Einblicke in bestimmte Transaktionen geben, einschließlich Produktdetails, Mengen und Kundeninformationen, damit du proaktiv den Bestand verwalten und Verkaufstrends und Umsatzmuster verstehen kannst.
Bist du bereit, dein WooCommerce-Erlebnis zu verändern? Teste Kinsta, um fortschrittliche, individuelle WooCommerce-Berichte zu erstellen.
Ik ben de Editorial Team Lead bij Kinsta. Ik ben een open source liefhebber en ik houd van coderen. Met meer dan 7 jaar ervaring in technisch schrijven en redactiewerk voor de tech-industrie, werk ik graag samen met mensen om duidelijke en beknopte content te creëren en workflows te verbeteren.
Schreibe einen Kommentar