Creare un’app di reportistica avanzata per un negozio WooCommerce

Il plugin WooCommerce per WordPress permette di creare e gestire in modo efficiente una piattaforma di e-commerce, fornendo l’accesso a funzioni di notifica integrate che avvisano di ordini nuovi o completati, di livelli di giacenze basse e di pagamenti andati a buon fine. Queste funzioni sono essenziali ma offrono solo una visione limitata dei preziosi dati che WooCommerce raccoglie.

Queste limitazioni sono nella natura dei plugin tradizionali che operano nell’ambiente WordPress. D’altro canto, le applicazioni in hosting, ovvero le operazioni basate sul web su server esterni, sono molto più estensibili.

Integrandosi con le API di WooCommerce e utilizzando risorse esterne, le applicazioni in hosting possono fornire report avanzati, avvisi personalizzati e informazioni dettagliate sulle transazioni di e-commerce.

In questa guida scopriremo come creare un’applicazione in hosting che genera avvisi via e-mail con dati completi sulle transazioni, superando le capacità del plugin standard.

Funzionalità di reporting e notifica esistenti

Gli avvisi e gli aggiornamenti di stato integrati in WooCommerce aiutano con le attività di gestione essenziali del negozio, ma potrebbero non soddisfare tutte le esigenze aziendali. Per questo motivo, molti utenti si rivolgono a plugin di terze parti per aumentare le proprie capacità di notifica e reporting.

Alcuni dei plugin più popolari sono:

• WooCommerce Admin: fornisce una dashboard intuitiva con le principali metriche e report del negozio.
• WooCommerce PDF Invoices and Packing Slips: permette di personalizzare i modelli di fattura e di bolla di accompagnamento, che vengono inviati automaticamente ai clienti tramite e-mail, e di registrare le fatture e le bolle di accompagnamento generate.
• Integrazione di WooCommerce Google Analytics: utilizza gli strumenti di Google Analytics per generare report dettagliati sui dati demografici dei clienti e sulle fonti di traffico.

Con questi plugin, WooCommerce offre opzioni di reportistica e di avviso, tra cui riepiloghi degli ordini, avvisi di esaurimento scorte, gestione dell’inventario e analisi approfondite grazie all’integrazione con strumenti come Google Analytics.

I limiti degli attuali sistemi di reportistica

Pur essendo vantaggiosi, gli attuali sistemi di reportistica hanno capacità limitate e presentano diverse limitazioni, come ad esempio:

• Personalizzazione: gli strumenti di reportistica generici e i plugin limitano la profondità e la specificità degli approfondimenti che l’azienda può ottenere dai dati. Potreste aver bisogno di metriche specializzate, visualizzazioni uniche, integrazione con strumenti di analisi proprietari o determinati filtri di dati non facilmente disponibili negli strumenti di reporting e nei plugin generici.
• Scalabilità: i sistemi di reporting esistenti possono avere problemi di scalabilità quando si tratta di grandi insiemi di dati. Prestazioni lente e colli di bottiglia nell’elaborazione dei dati possono impedire un’analisi efficiente dei dati, con conseguenti ritardi nel processo decisionale e nei tempi di risposta.
• Dipendenza da WordPress: poiché l’integrazione con WordPress limita l’indipendenza, la personalizzazione e la scalabilità, potreste dover affrontare problemi legati alle risorse del server, alla compatibilità dei plugin e alle vulnerabilità della sicurezza. Questa integrazione può anche impedire all’azienda di adottare tecnologie e soluzioni più avanzate.

Al contrario, un’applicazione di reporting personalizzata può fornire informazioni dettagliate sulle transazioni e sui clienti. È possibile utilizzare questi dati per anticipare le tendenze del mercato e ottimizzare le proprie offerte di conseguenza.

Inoltre, è possibile scalare rapidamente un’applicazione di reportistica personalizzata per adattarla a volumi di dati crescenti, assicurandosi un’operatività senza interruzioni in caso di crescita dell’azienda.

L’applicazione di reporting avanzato

L’applicazione di reporting avanzato descritta in questa guida ha le seguenti funzioni:

• Avvisi dettagliati sulle transazioni vengono inviati via e-mail al proprietario del negozio quando il cliente effettua un nuovo ordine. L’app ha anche un cruscotto che mostra un elenco di tutti gli ordini con i relativi dettagli.
• Gli aggiornamenti dell’inventario mostrano i dettagli dell’inventario del negozio sulla dashboard. Da qui si possono facilmente monitorare i livelli di giacenze di ogni prodotto.
• Il report sulle vendite totali permette di analizzare l’andamento dei ricavi nel tempo.

A differenza dei plugin generici o del sistema di notifiche e avvisi predefinito di WooCommerce, questa app offre avvisi dettagliati e personalizzabili sulle scorte rimanenti e sulle vendite totali.

L’hosting di un’applicazione offre diversi vantaggi, come ad esempio:

• Scalabilità: l’hosting indipendente riduce al minimo i colli di bottiglia nell’elaborazione dei dati, garantendoti la possibilità di espandere le operazioni senza limiti di risorse.
• Personalizzazione: l’hosting indipendente permette di personalizzare il modo in cui si utilizzano i dati raccolti, ad esempio integrando servizi di terze parti (come i motori di analisi predittiva) e implementando tecniche di visualizzazione dei dati uniche per allinearsi meglio ai requisiti e agli obiettivi dell’azienda.
• Autonomia: rimuovere l’applicazione dall’ambiente WordPress libera da restrizioni come le risorse limitate del server e i potenziali conflitti tra i vari plugin.

Come sviluppare un’applicazione di reportistica avanzata

In questa sezione realizzeremo un’applicazione di reporting utilizzando Node.js con l’API REST di WooCommerce e i webhook per recuperare i dati del negozio.

Requisiti:

• Un negozio WooCommerce in esecuzione in locale con uno o più prodotti impostati.
• Un account Mailgun gratuito per inviare email.
• Node.js e ngrok installati.
• Il template di partenza del progetto.
• Un editor di codice.

Configurare il template di partenza

Seguiamo questi passaggi per configurare il template di partenza:

1. Prendiamo nota della chiave API Mailgun e del dominio sandbox e incolliamo i loro valori nel file .env insieme alle variabili corrispondenti. Per la variabile MAILGUN_SENDER_EMAIL, inseriamo come valore l’email che abbiamo utilizzato per creare l’account Mailgun.
2. Nella bacheca di amministrazione di WordPress, selezioniamo WooCommerce > Impostazioni > Avanzate > API REST.

3. Clicchiamo su Aggiungi chiave per creare la chiave API per autenticare le richieste dall’applicazione.
4. Apriamo la sezione Dettagli chiave e forniamo una descrizione e un utente, selezioniamo i permessi di lettura/scrittura e clicchiamo su Genera chiave API.

5. Assicuriamoci di copiare la chiave del consumatore e il segreto del consumatore dalla pagina risultante, poiché non potremo più vederli.
6. Apriamo il file .env e assegniamo i valori copiati nel passaggio precedente alle rispettive variabili. Forniamo l’URL del negozio per la variabile WOOCOMMERCE_STORE_URL (qualcosa come http://localhost/mystore/index.php).
7. Installiamo tutte le dipendenze del progetto con il seguente comando nel terminale:

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

npm i -D nodemon

Queste dipendenze servono per i seguenti scopi:

• express: framework Node.js per creare un’API.
• @woocommerce/woocommerce-rest-api: effettua chiamate di rete all’API REST di WooCommerce.
• dotenv: carica le variabili d’ambiente dal file .env.
• ejs: crea modelli JavaScript.
• mailgun.js: invia email utilizzando Mailgun.
• nodemon: riavvia automaticamente il server quando vengono rilevate modifiche ai file.

Implementare le funzioni dell’applicazione

Il modello iniziale contiene il codice per il rendering dei modelli JavaScript incorporati (EJS) nella cartella views. In questo modo, possiamo concentrarci sulla logica del server, che recupera i dati necessari dalle API di WooCommerce e li passa ai modelli EJS per visualizzarli sull’interfaccia utente (UI).

Per implementare le funzionalità dell’applicazione, seguiamo i passaggi qui sotto:

1. Creiamo un file chiamato server.js nella cartella principale del progetto. Questo file è il punto di ingresso al server Express.
2. Incolliamo il seguente codice all’interno del file 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_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}`)
})

Il codice qui sopra utilizza Express.js per creare un server web. Si inizia importando i pacchetti necessari, configurando il client di WooCommerce per interagire con l’API REST di WooCommerce e impostando l’applicazione per utilizzare i modelli EJS.

Per prima cosa, definiamo un endpoint / che potremo utilizzare per verificare se l’applicazione è attiva e funzionante. Poi, definiamo una route /products che recupera tutti i prodotti dal negozio WooCommerce. Se l’operazione ha esito positivo, questa route rende il modello inventory con i dati recuperati.

Notate che il codice passa anche il template currentPage per tutte le route e aiuta a identificare le pagine attive della dashboard.

3. Eseguiamo il comando npm run dev e apriamo http://localhost:3000/products nel browser per visualizzare i risultati:

La pagina dell’Inventario del negozio mostra tutti i prodotti disponibili nel negozio e i loro dettagli. Queste informazioni aiutano a tenere traccia dei prodotti disponibili e a gestire l’inventario di conseguenza.

4. Per gestire i report sulle vendite, aggiungiamo il seguente percorso al file server.js:

// 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);
       });
})

Questo codice definisce un endpoint /sales che recupera il report mensile delle vendite dall’API di WooCommerce. La chiamata all’API include il parametro period con il valore month, che indica il report delle vendite del mese corrente. Una volta che la richiesta è andata a buon fine, il codice rende il modello EJS delle vendite con i dati recuperati.

5. Navighiamo su http://localhost:3000/sales nel browser per visualizzare i risultati:

Questa pagina mostra un report completo sulle vendite totali, aiutando così ad analizzare l’andamento dei ricavi mensili dell’azienda.

Implementare la gestione degli ordini

1. Aggiungiamo la route qui sotto al file server.js.

// 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);
       });
})

Questo codice recupera tutti gli ordini dal negozio WooCommerce e rende il modello Ordini con i dati recuperati.

2. Navighiamo su http://localhost:3000/orders nel browser per visualizzare i risultati. Questa pagina mostra le informazioni per la gestione degli ordini:

Personalizzare gli avvisi per un resoconto completo delle transazioni

Per implementare la funzionalità di invio di un avviso e-mail personalizzato quando un cliente effettua un ordine sul sito, seguiamo questi passaggi:

1. Apriamo una finestra di terminale ed eseguiamo ngrok http 3000 per eseguire il tunnel della connessione al server web. Questo comando genera un link HTTPS che WooCommerce può utilizzare per inviare i dati del webhook. Copiamo il link di inoltro generato.
2. Aggiungiamo la route seguente al file server.js :

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
});

Questo codice definisce un percorso che gestisce i dati in arrivo da un webhook di WooCommerce attivato quando un cliente crea un nuovo ordine. Se i dati ricevuti contengono la proprietà id (che indica un ordine valido), utilizza l’API Mailgun per inviare una notifica via e-mail all’indirizzo di posta elettronica specificato.

L’email include vari dettagli dell’ordine come il nome del cliente, l’email, l’importo totale, lo stato, il metodo di pagamento e un elenco degli articoli acquistati.

Il codice compone l’email utilizzando la funzione newOrderEMail() definita nel file utils/new-order-email.js , che restituisce un modello di email personalizzato. Dopo aver elaborato i dati e inviato l’email, il server risponde con un codice di stato 200, che indica la ricezione del webhook e un messaggio corrispondente (“Webhook ricevuto con successo”).

3. Aggiungiamo la seguente dichiarazione per importare la funzione newOrderEmail():

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

4. Eseguiamo il comando npm run start per avviare il server.

5. Nella bacheca di amministrazione di WordPress, selezioniamo WooCommerce > Impostazioni > Avanzate > Webhooks.

6. Clicchiamo su Aggiungi webhook e forniamo le seguenti informazioni nel modulo Dati webhook :

• • Nome: Avviso di nuovo ordine
  • Stato: Attivo
  • Argomento: Ordine creato
  • URL di consegna: Incolliamo l’URL di inoltro di ngrok che abbiamo copiato al punto 1. Assicuriamoci di aggiungere /woocommerce-webhook/new-order all’URL. Questo è il nuovo endpoint definito per ricevere il payload del webhook.

• Segreto: lasciamo questo campo vuoto. Il valore predefinito è il segreto del consumatore dell’utente API corrente. Il segreto genera un hash del webhook consegnato nelle intestazioni della richiesta. Il destinatario può utilizzare questo segreto per verificare l’autenticità dei dati in arrivo. Se la firma corrisponde al valore previsto, conferma che i dati sono stati inviati da WooCommerce, garantendo fiducia e sicurezza.
• Versione API: WP REST API Integration v3.

7. Clicchiamo su Salva webhook.

8. Visitiamo il negozio ed effettuiamo un ordine. Dovremmo vedere un’e-mail come quella qui sotto:

Distribuire tutto su Kinsta

Con Kinsta, possiamo distribuire non solo il nostro sito web WordPress + WooCommence con l’Hosting WordPress gestito, ma anche la nostra nuova applicazione di reporting con l’Hosting di Applicazioni.

I nostri servizi di hosting premium offrono caratteristiche fondamentali, come:

• Prestazioni elevate e velocità incredibile: Kinsta ospita i siti e le app sulla rete Premium Tier di Google Cloud Platform con le macchine C2 più veloci e robuste e con l’edge cache attraverso il CDN di Cloudflare con 260+ PoP.
• Distribuzione rapida e senza complicazioni: per un’esperienza di hosting senza problemi, Kinsta esegue automaticamente la build delle applicazioni e distribuisce i siti WordPress senza bisogno di configurazioni manuali. È possibile installare e sviluppare facilmente i propri siti con DevKinsta e pubblicarli premendo un pulsante, lasciando le impostazioni lato server al nostro team di tecnici specializzati.
• Sicurezza: le applicazioni e i siti web vivono dietro due firewall, con protezione e mitigazione DDoS, HTTP/3 e TLS 1.3. Vengono distribuiti in un container isolato, evitando picchi di traffico da parte di altre applicazioni che interferiscono con l’ambiente di produzione, nonché la contaminazione da parte di attacchi dannosi provenienti da altri siti.

Riepilogo

Grazie alla flessibilità di un hosting esterno, abbiamo creato un’applicazione di reporting avanzata che aggiorna i livelli di inventario rimanenti e fornisce un report completo sulle vendite totali.

Inoltre, fornisce avvisi dettagliati sulle transazioni, offrendo approfondimenti in tempo reale su transazioni specifiche, compresi i dettagli dei prodotti, le quantità e le informazioni sui clienti, in modo da poter gestire in modo proattivo le giacenze e comprendere le tendenze di vendita e i modelli di fatturato.

Siete pronti a dare una svolta alla vostra esperienza WooCommerce? Provate Kinsta per implementare una reportistica WooCommerce avanzata e personalizzata.

Marcia Ramos Kinsta

Sono l'Editorial Team Lead di Kinsta. Sono un'appassionata di open source e amo il coding. Con più di 7 anni di esperienza in scrittura tecnica e di editing per l'industria tecnologica, amo collaborare con le persone per creare contenuti chiari e concisi e migliorare i flussi di lavoro.

• LinkedIn