El plugin WooCommerce para WordPress te permite crear y gestionar eficazmente una plataforma de comercio electrónico, proporcionándote acceso a funciones de notificación integradas que te alertan sobre pedidos nuevos o completados, niveles bajos de existencias y pagos realizados con éxito. Estas funciones son esenciales, pero sólo ofrecen una visión limitada de los valiosos datos que recopila WooCommerce.

Tales restricciones son la naturaleza de los plugins tradicionales que operan en el entorno de WordPress. Por otro lado, las aplicaciones alojadas — operaciones basadas en web en servidores externos — son mucho más extensibles.

Al integrarse con las API de WooCommerce y utilizar recursos externos, las aplicaciones alojadas pueden proporcionar informes avanzados, alertas personalizadas y una visión detallada de las transacciones de comercio electrónico.

En esta guía, aprenderás a crear una aplicación alojada que genere alertas por correo electrónico con datos exhaustivos de las transacciones, superando las capacidades del complemento estándar.

Funciones Existentes de Informes y Notificaciones

Las alertas y actualizaciones de estado integradas de WooCommerce ayudan en la gestión esencial de la tienda, pero pueden no satisfacer todas las demandas empresariales. Por ello, muchos usuarios recurren a plugins de terceros para aumentar sus capacidades de notificación e información.

Algunos de los plugins más populares son:

  • WooCommerce Admin — Proporciona un panel de control intuitivo con métricas e informes clave de la tienda.
  • WooCommerce PDF Invoices and Packing Slips — Permite personalizar las plantillas de facturas y albaranes — que se envían automáticamente a los clientes por correo electrónico — y proporciona un registro de las facturas y albaranes generados.
  • WooCommerce Google Analytics Integration — Utiliza las herramientas de Google Analytics para generar informes detallados sobre los datos demográficos de los clientes y las fuentes de tráfico.

Con estos plugins, WooCommerce ofrece opciones de informes y alertas, como resúmenes de pedidos, alertas de existencias bajas, gestión de inventario y analíticas en profundidad mediante la integración con herramientas como Google Analytics.

Las Limitaciones de los Sistemas de Informes Actuales

Aunque son beneficiosos, los sistemas de informes actuales tienen capacidades limitadas e introducen varias limitaciones, como:

  • Personalización: Las herramientas de informes genéricos y los plugins restringen la profundidad y especificidad de los conocimientos que tu empresa puede obtener de los datos. Es posible que necesites métricas especializadas, visualizaciones únicas, integración con herramientas analíticas propias o determinados filtros de datos que no están fácilmente disponibles en las herramientas y plugins genéricos de elaboración de informes.
  • Escalabilidad: Los sistemas de elaboración de informes existentes pueden tener problemas de escalabilidad al tratar con grandes conjuntos de datos. Un rendimiento lento y los cuellos de botella en el procesamiento de datos pueden impedir un análisis eficaz de los datos, lo que provoca retrasos en la toma de decisiones y en los tiempos de respuesta.
  • Dependencia de WordPress: Como la integración con WordPress limita la independencia, la personalización y la escalabilidad, puedes enfrentarte a restricciones relacionadas con los recursos del servidor, la compatibilidad de los plugins y las vulnerabilidades de seguridad. Esta integración también puede impedir que tu empresa adopte tecnologías y soluciones más avanzadas.

En cambio, una aplicación de informes personalizada puede proporcionar información detallada sobre transacciones y clientes. Puedes utilizar estos datos para anticiparte a las tendencias del mercado y optimizar tus ofertas en consecuencia.

Además, puedes escalar rápidamente una aplicación de informes personalizada para adaptarla a volúmenes de datos cada vez mayores, garantizando operaciones fluidas a medida que crece tu negocio.

La Aplicación de Informes Avanzados

La aplicación de informes avanzados prevista en esta guía tiene las siguientes funciones:

  • Las alertas detalladas de transacciones se envían por correo electrónico al propietario de la tienda cuando el cliente realiza un nuevo pedido. La aplicación también tiene un panel que muestra una lista de todos los pedidos con sus detalles.
  • Las actualizaciones de inventario muestran los detalles del inventario de la tienda en el panel de control. Desde ahí, puedes seguir fácilmente los niveles de existencias de cada producto.
  • Los informes de ventas totales te permiten analizar las tendencias de los ingresos a lo largo del tiempo.

A diferencia de los plugins genéricos o del sistema predeterminado de notificaciones y alertas de WooCommerce, esta aplicación ofrece alertas detalladas y personalizables sobre el inventario restante y las ventas totales.

El alojamiento de la aplicación también ofrece varias ventajas, como:

  • Escalabilidad: El alojamiento independiente minimiza los cuellos de botella en el procesamiento de datos, garantizando que puedas ampliar las operaciones sin limitaciones de recursos.
  • Personalización: El alojamiento independiente te permite adaptar la forma en que utilizas los datos recopilados, por ejemplo, integrando servicios de terceros (como motores de análisis predictivo) e implementando técnicas únicas de visualización de datos para alinearte mejor con los requisitos y objetivos de tu empresa.
  • Autonomía: Sacar tu aplicación del entorno WordPress te libera de restricciones como los recursos limitados del servidor y los posibles conflictos entre varios plugins.

Cómo Desarrollar una Aplicación de Informes Avanzada

En esta sección, vamos a crear una aplicación de informes utilizando Node.js con la API REST de WooCommerce y webhooks para recuperar los datos de la tienda.

Requisitos:

Configurar la Plantilla de Inicio

Sigue estos pasos para configurar la plantilla de inicio:

  1. Toma nota de tu clave API de Mailgun y de tu dominio sandbox y pega sus valores en el archivo .env junto a sus variables correspondientes. Para la variable MAILGUN_SENDER_EMAIL, proporciona como valor el correo electrónico que utilizaste para crear la cuenta Mailgun.
  2. En tu panel de administración de WordPress, selecciona WooCommerce > Ajustes > Avanzado > API REST.

Pestaña Avanzado de WooCommerce mostrando la sección API REST. Hay un botón Añadir clave, un campo Buscar clave, una lista Acciones masivas y un botón Aplicar. Cada clave tiene una tabla con las columnas Descripción, Clave de consumidor que termina en, Permisos y Último acceso.
Pestaña Avanzado de WooCommerce mostrando la sección API REST.

  1. Haz clic en Añadir clave para crear la clave API que autentique las solicitudes de tu aplicación.
  2. Abre la sección Detalles de la clave y proporciona una descripción y un usuario, selecciona Permisos de lectura/escritura y haz clic en Generar clave API.

Pestaña Avanzado de WooCommerce mostrando los detalles de la Clave API.
Pestaña Avanzado de WooCommerce mostrando los detalles de la Clave API.

  1. Asegúrate de copiar la Clave de Cliente (Consumer Key) y el Secreto de Cliente (Consumer Secret) de la página resultante, ya que no podrás volver a verlos.
  2. Abre el archivo .env y asigna los valores que has copiado en el paso anterior a sus respectivas variables. Proporciona la URL de tu tienda para la variable WOOCOMMERCE_STORE_URL (algo así como http://localhost/mystore/index.php).
  3. Instala todas las dependencias del proyecto ejecutando el siguiente comando en tu terminal:
npm i express @woocommerce/woocommerce-rest-api dotenv ejs mailgun.js

npm i -D nodemon

Estas dependencias sirven para lo siguiente:

  • express: Node.js framework para crear una API.
  • @woocommerce/woocommerce-rest-api: Realiza llamadas de red a la API REST de WooCommerce.
  • dotenv: Carga variables de entorno del archivo .env.
  • ejs: Crea plantillas JavaScript.
  • mailgun.js: Envía correos electrónicos utilizando Mailgun.
  • nodemon: Reinicia el servidor automáticamente cuando se detectan cambios en los archivos.

Implementar las Funciones de la Aplicación

La plantilla de inicio contiene el código para renderizar las plantillas JavaScript incrustadas (EJS) en la carpeta views. De esta forma, puedes centrarte en la lógica del servidor, que obtiene los datos necesarios de las API de WooCommerce y los pasa a las plantillas EJS para que se muestren en la interfaz de usuario (UI).

Para implementar la funcionalidad de la aplicación, sigue estos pasos:

  1. Crea un archivo llamado server.js en la carpeta root del proyecto. El archivo actúa como punto de entrada al servidor Express.
  2. Pega el siguiente código dentro del archivo 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}`)
})

El código anterior utiliza Express.js para crear un servidor web. Empieza importando los paquetes necesarios, configurando el cliente WooCommerce para que interactúe con la API REST de WooCommerce y configurando la aplicación para que utilice plantillas EJS.

En primer lugar, defines un endpoint / que puedes utilizar para comprobar si la aplicación está en funcionamiento. A continuación, define una ruta /products que recupere todos los productos de la tienda WooCommerce. Si tiene éxito, esta ruta muestra la plantilla inventory con los datos obtenidos.

Observa que el código también pasa el currentPage a la plantilla para todas las rutas, y ayuda a identificar las páginas activas en el panel de control.

  1. Ejecuta el comando npm run dev y abre http://localhost:3000/products en tu navegador para ver los resultados:

La página Inventario de la tienda proporciona una imagen del artículo, su Nombre, Fecha de creación, Tipo, Estado, Precio normal, Precio, Ventas totales y Cantidad de existencias.
Página de Inventario de la Tienda con detalles de los artículos.

La página Inventario de la tienda muestra todos los productos disponibles en la tienda junto con sus detalles. Esta información te ayuda a hacer un seguimiento de los productos disponibles y a gestionar el inventario en consecuencia.

  1. Para gestionar los informes de ventas, añade la siguiente ruta al archivo 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);
       });
})

Este código define un endpoint /sales que recupera el informe mensual de ventas de la API de informes de ventas de WooCommerce. La llamada a la API incluye el parámetro period con el valor month, que especifica el informe de ventas del mes actual. Una vez que la solicitud tiene éxito, el código muestra la plantilla EJS de ventas con los datos obtenidos.

  1. Navega a http://localhost:3000/sales en tu navegador para ver los resultados:

Página del Informe Mensual de Ventas con los totales de Ventas, Pedidos, Artículos Vendidos y Reembolsos. Debajo hay una tabla con las columnas Fecha, Ventas, Pedidos y Artículos vendidos.
Página del Informe Mensual de Ventas.

Esta página muestra un completo informe de ventas totales, que te ayuda a analizar las tendencias de los ingresos mensuales de tu empresa.

Implementar la Gestión de Pedidos

  1. Añade la siguiente ruta al archivo 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);
       });
})

Este código recupera todos los pedidos de la tienda WooCommerce y muestra la plantilla Pedidos con los datos obtenidos.

  1. Navega a http://localhost:3000/orders en tu navegador para ver los resultados. Esta página muestra información para la gestión de pedidos:

Página Pedidos con una tabla que contiene las columnas Cliente, Divisa, Número de artículos, Creado el, Descuento, Gastos de envío, Total del carrito, Forma de pago y Estado.
Página de pedidos que muestra los detalles de las transacciones.

Personalizar las Alertas para Obtener Informes Completos de las Transacciones

Para implementar la funcionalidad que te envía una alerta personalizada por correo electrónico cuando un cliente hace un pedido en tu sitio, sigue estos pasos:

  1. Abre una ventana de terminal y ejecuta ngrok http 3000 para crear un túnel en la conexión de tu servidor web. Este comando genera un enlace HTTPS que WooCommerce puede utilizar para enviar datos de webhook. Copia el enlace de reenvío generado.
  2. Añade la siguiente ruta al archivo 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
});

Este código define una ruta que gestiona los datos entrantes de un webhook de WooCommerce activado cuando un cliente crea un nuevo pedido. Si los datos recibidos contienen una propiedad id (que indica un pedido válido), utiliza la API Mailgun para enviar una notificación por correo electrónico a la dirección de correo electrónico especificada.

El correo electrónico incluye varios detalles del pedido, como el nombre del cliente, el correo electrónico, el importe total, el estado, la forma de pago y una lista de los artículos comprados.

El código compone el correo electrónico utilizando la función newOrderEMail() definida en el archivo utils/new-order-email.js , que devuelve una plantilla de correo electrónico personalizada. Tras procesar los datos y enviar el correo electrónico, el servidor responde con un código de estado 200, que indica que el webhook se ha recibido correctamente, y un mensaje correspondiente («Webhook recibido correctamente»).

  1. Añade la siguiente sentencia para importar la función newOrderEmail():
const { newOrderEmail } = require('./utils/new-order-email');
  1. Ejecuta el comando npm run start para iniciar el servidor.
  1. En tu panel de administración de WordPress, selecciona WooCommerce > Configuración > Avanzado > Webhooks.

Pestaña Avanzado que muestra la sección Webhooks. Tiene un botón Añadir webhook, una lista Acciones con un botón Aplicar y una tabla con columnas Nombre, Estado, Tema y URL de entrega.
La página Avanzado muestra la sección Webhooks.

  1. Haz clic en Añadir webhook y proporciona la siguiente información en el formulario de datos del webhook :
    • Nombre: Alerta de Nuevo Pedido
    • Estado: Activo
    • Tema: Pedido Creado
    • URLde envío: Pega la URL de reenvío ngrok que copiaste en el paso 1. Asegúrate de añadir /woocommerce-webhook/new-order a la URL. Este es el nuevo endpoint definido para recibir la carga útil del webhook.
  • Secreto: Déjalo en blanco. Por defecto es el secreto de cliente del usuario actual de la API. El secreto genera un hash del webhook entregado en las cabeceras de la solicitud. El receptor puede utilizar este secreto para verificar la autenticidad de los datos entrantes. Si la firma coincide con el valor esperado, confirma que los datos han sido enviados por WooCommerce, proporcionando confianza y seguridad.
  • Versión de la API: Integración WP REST API v3.

Página avanzada que muestra el formulario de datos del Webhook. Tiene los campos Nombre, Estado, Tema, URL de entrega, Secreto y Versión de la API con un botón Guardar webhook.
Página avanzada que muestra el formulario de datos Webhook.

  1. Haz clic en Guardar webhook.
  1. Visita tu tienda y realiza un pedido. Deberías ver un correo electrónico como el siguiente:

Correo electrónico de Nuevo Pedido Creado con el ID del Pedido, el Nombre del Cliente, el Total del Pedido, el Estado del Pedido, la Forma de Pago y las Partidas especificando su Nombre, Cantidad y Total.
Alerta por correo electrónico de un nuevo pedido e información de inventario.

Despliega Todo en Kinsta

Con Kinsta, puedes desplegar no sólo tu sitio web WordPress + WooCommence con el Alojamiento Administrado de WordPress, ya que también puedes desplegar tu nueva aplicación de informes con el Alojamiento de Aplicaciones.

Nuestros servicios de alojamiento premium ofrecen funciones vitales, como:

  • Alto rendimiento y velocidad increíble: Alto rendimiento y velocidad increíble: Kinsta aloja tus sitios y aplicaciones en la Red de Nivel Premium de Google Cloud Platform con las máquinas C2 más rápidas y robustas, y con caché en el edge a través de la CDN de Cloudflare con más de 260+ PoPs.
  • Despliegue rápido y sin complicaciones: para una experiencia de alojamiento sin complicaciones, Kinsta crea aplicaciones automáticamente y despliega sitios WordPress sin necesidad de configuración manual. Puedes instalar y desarrollar fácilmente tus sitios con DevKinsta, y publicarlos con sólo pulsar un botón, dejando la configuración del lado del servidor para nuestro equipo de ingenieros especializados.
  • Seguridad: Tus aplicaciones y sitios web viven detrás de dos cortafuegos, con protección y mitigación DDoS, HTTP/3 y TLS 1.3. Se despliegan en un contenedor aislado, evitando los picos de tráfico de otras aplicaciones que interfieren con tu entorno de producción, así como la contaminación por ataques maliciosos desde otros sitios.

Resumen

Gracias a la flexibilidad del alojamiento externo, has creado una aplicación de informes avanzada que actualiza los niveles de inventario restantes y proporciona informes completos sobre las ventas totales.

También proporciona alertas detalladas de transacciones, ofreciendo información en tiempo real sobre transacciones concretas, incluidos detalles de productos, cantidades e información sobre clientes, para que puedas gestionar proactivamente las existencias y comprender las tendencias de ventas y los patrones de ingresos.

¿Listo para transformar tu experiencia WooCommerce? Prueba Kinsta para implementar informes personalizados avanzados de WooCommerce.

Marcia Ramos Kinsta

Soy el Jefe del Equipo Editorial de Kinsta. Soy una entusiasta del código abierto y me encanta programar. Llevo más de 7 años escribiendo y editando textos técnicos para el sector tecnológico, y me encanta colaborar con la gente para crear contenidos claros y concisos y mejorar los flujos de trabajo.