Creazione di una dashboard WhatsApp personalizzata per analisi in tempo reale

4.5.2025

Con oltre 2 miliardi di utenti attivi, WhatsApp è una piattaforma chiave per le aziende che desiderano interagire con i clienti tramite la messaggistica istantanea. L'API di WhatsApp Business consente alle aziende di gestire interazioni ad alto volume, ma le sue analisi integrate non sono sufficientemente approfondite per fornire insight personalizzati. Una dashboard personalizzata risolve questo problema, fornendo il monitoraggio in tempo reale di messaggi, lead e attività degli utenti, aiutando le aziende a ottimizzare le strategie e migliorare l'esperienza dei clienti. Questo articolo illustra come creare una dashboard WhatsApp scalabile utilizzando tecnologie moderne, corredata da esempi di codice e best practice.

‍

Perché una dashboard WhatsApp personalizzata?

L' app WhatsApp Business offre metriche di base come i tassi di consegna dei messaggi, ma è limitata per le aziende con esigenze complesse. Strumenti di terze parti come respond.io o 360dialog forniscono dashboard, ma spesso mancano di flessibilità per KPI personalizzati, come i tassi di conversione dei lead o le mappe di calore dei messaggi. Una dashboard personalizzata offre:

Monitoraggio in tempo reale: monitora le interazioni con i clienti non appena si verificano per ottenere risposte più rapide.
Metriche personalizzate: concentrati su obiettivi specifici, come i tempi di risposta o le tendenze di coinvolgimento degli utenti.
Scalabilità: supporta team numerosi e volumi elevati di messaggi, a differenza del limite di 256 contatti dell'app Business.
Integrazione: combina i dati di WhatsApp con CRM (ad esempio Salesforce) o piattaforme di analisi (webb).

Uno studio di respond.io del 2023 (fonte: respond.io/blog/whatsapp-analytics) ha rilevato che le aziende che utilizzano analisi avanzate di WhatsApp hanno registrato un aumento di 3 volte dei lead qualificati rispetto a quelle che utilizzano solo l'app Business. Questo evidenzia il valore delle soluzioni personalizzate.

‍

Prerequisiti

Per creare la dashboard, avrai bisogno di:

Accesso all'API di WhatsApp Business: Registrati tramite il portale sviluppatori di Meta (l'approvazione richiede 1-2 settimane).
Competenze di programmazione: conoscenza di Python (backend), JavaScript (frontend) e SQL (database).
Strumenti: Python Flask, Node.js, PostgreSQL, React, Socket.IO e Redis.
Infrastruttura: un server cloud (ad esempio, AWS, Google Cloud) per l'hosting.
Chiavi API: per integrazioni con CRM o strumenti di analisi.

‍

Passaggio 1: configurazione dell'API di WhatsApp Business

L'API di WhatsApp Business potenzia la tua dashboard abilitando l'invio e la ricezione di messaggi. Ecco come configurarla:

Registrati a Meta: crea un account Meta Business e richiedi l'accesso alle API. Riceverai un numero di telefono e le credenziali API.
Configura webhook: imposta un URL webhook per ricevere eventi in tempo reale, come messaggi in arrivo o stati di consegna, in formato JSON.
Prova l'API: invia un messaggio di prova tramite cURL per verificare la tua configurazione:

‍

curl -X POST \
  https://graph.facebook.com/v18.0/{PHONE_NUMBER_ID}/messages \
  -H 'Authorization: Bearer {ACCESS_TOKEN}' \
  -H 'Content-Type: application/json' \
  -d '{
    "messaging_product": "whatsapp",
    "to": "{DECIPIENT_PHONE_NUMBER}", "
    type": "text",
    "text": {"body": "Messaggio di prova dalla dashboard"} }
  '

‍

Ciò conferma che la tua API è pronta a gestire i messaggi.

Fase 2: Progettazione dell'architettura dei dati

Un'architettura dati scalabile garantisce elaborazione e archiviazione efficienti. I componenti chiave includono:

Database: utilizza PostgreSQL per i dati strutturati. Crea tabelle per messaggi, lead e attività degli utenti con indici per le prestazioni:

‍

CREATE TABLE leads (
  id SERIAL PRIMARY KEY,
  phone VARCHAR(20) UNIQUE,
  name VARCHAR(100),
  source VARCHAR(50),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE messages (
  id SERIAL PRIMARY KEY,
  sender VARCHAR(20),
  recipient VARCHAR(20),
  content TEXT,
  timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  status VARCHAR(20),
  lead_id INT REFERENCES leads(id)
);
CREATE INDEX idx_messages_timestamp ON messages(timestamp);

CREATE TABLE user_activity (
  id SERIAL PRIMARY KEY,
  phone VARCHAR(20),
  action VARCHAR(50),
  timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

‍

Coda messaggi: usa Redis per gestire volumi elevati di messaggi:

‍

redis-cli> RPUSH message_queue '{"sender":"1234567890","content":"Hello!","timestamp":"2025-04-29T12:00:00Z"} '‍

‍

Aggiornamenti in tempo reale: implementa WebSocket con Socket.IO per lo streaming di dati in tempo reale sul frontend.

‍

Fase 3: creazione del backend

Il backend elabora gli eventi webhook, memorizza i dati e fornisce analisi. Utilizza Python Flask per una configurazione leggera:

‍

from flask import Flask, request, jsonify
from flask_socketio import SocketIO
import psycopg2
import redis
import json

app = Flask(__name__)
socketio = SocketIO(app)
redis_client = redis.Redis(host='localhost', port=6379, db=0)

# Connessione al database
conn = psycopg2.connect(
    dbname="whatsapp_db", user="admin", password="password", host="localhost"
)
cursor = conn.cursor()

# Webhook per ricevere eventi WhatsApp
@app.route('/webhook', methods=['POST'])
def webhook():
    data = request.json
    if data['object'] == 'whatsapp_business_account':
        for entry in data['entry']:
            for change in entry['changes' ]]:
                se change['field'] == 'messages':
                    message = change['value']['messages'][0]
                    sender = message['from']
                    content = message['text']['body']
                    timestamp = message['timestamp']
                    
                    # Memorizza nel database
                    cursor.execute(
                        "INSERT INTO messages (sender, recipient, content, timestamp, status) "
                        "VALUES (%s, %s, %s, %s, %s)",
                        (sender, 'business_number', content, timestamp, 'received')
                    )
                    conn.commit()
                    
                    # Invia a Redis
                    redis_client.rpush('message_queue', json.dumps({
                        'sender': sender,
                        'content': content,
                        'timestamp': timestamp
                    }))
                    
                    # Emetti al frontend
                    socketio.emit('new_message', {
                        'sender': sender,
                        'content': content,
                        'timestamp': timestamp
                    })
    return '', 200

# API per recuperare i messaggi
@app.route('/api/messages', methods=['GET'])
def get_messages():
    cursor.execute("SELECT sender, content, timestamp FROM messages ORDER BY timestamp DESC")
    messages = cursor.fetchall()
    return jsonify([{'sender': m[0], 'content': m[1], 'timestamp': m[2]} for m in messages])

@socketio.on('connect')
def handle_connect():
    print('Client connesso')

if __name__ == '__main__':
    socketio.run(app, debug=True)

‍

Questo backend:

Riceve gli eventi webhook di WhatsApp.
Memorizza i messaggi in PostgreSQL.
Mette in coda gli eventi in Redis.
Invia aggiornamenti in tempo reale al frontend tramite Socket.IO.

‍

Fase 4: Creazione della dashboard frontend

Utilizza React per una dashboard dinamica e intuitiva. Installa le dipendenze:

‍

npx create-react-app whatsapp-dashboardcd whatsapp-dashboardnpm install socket.io-client chart.js react-chartjs-2 axios tailwindcssnpx tailwindcss init‍

‍

Configura Tailwind in tailwind.config.js e aggiungilo a src/index.css. Crea un componente Dashboard.js:

‍

import React, { useEffect, useState } from 'react';
import io from 'socket.io-client';
import { Line } from 'react-chartjs-2';
import axios from 'axios';
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);

const socket = io('http://localhost:5000');

const Dashboard = () => {
  const [messages, setMessages] = useState([]);
  const [chartData, setChartData] = useState({
    labels: [],
    datasets: [{ label: 'Messaggi all'ora', data: [], borderColor: 'rgb(75, 192, 192)', tension: 0.1 }]
  });

  useEffect(() => {
    // Recupera i messaggi iniziali
    axios.get('http://localhost:5000/api/messages').then(res => {
      setMessages(res.data);
      updateChart(res.data);
    });

    // Gestisci gli aggiornamenti in tempo reale
    socket.on('new_message', (message) => {
      setMessages((prev) => [...prev, message]);
      updateChart([...messages, message]);
    });

    return () => socket.off('new_message');
  }, [messages]);

  const updateChart = (data) => {
    const hourlyCounts = {};
    data.forEach(msg => {
      const hour = new Date(msg.timestamp).getHours();
      hourlyCounts[hour] = (hourlyCounts[hour] || 0) + 1;
    });

    setChartData({
      labels: Object.keys(hourlyCounts).map(h => `${h}:00`),
      datasets: [{ ...chartData.datasets[0], data: Object.values(hourlyCounts) }]
    });
  };

  return (
    <div className="p-6 bg-gray-100 min-h-screen">
      <h1 className="text-3xl font-bold text-gray-800">Dashboard di analisi di WhatsApph1>
      <div className="mt-6 bg-white p-4 rounded-lg shadow">
        <Line data={chartData} options={{ responsive: true, plugins: { legend: { position: 'top' } } }} />
      div>
      <div className="mt-6">
        <h2 className="text-xl font-semibold text-gray-700">Messaggi recentih2>
        <ul className="mt-2 space-y-2">
          {messages.map((msg, idx) => (
            <li key={idx} className="p-2 bg-white rounded shadow">
              {msg.sender}: {msg.content} ({new Date(msg.timestamp).toLocaleString()})
            li>
          ))}
        ul>
      div>
    div>
  );
};

export default Dashboard;

‍

Questa interfaccia visualizza:

Un grafico lineare dei messaggi all'ora.
Un feed in tempo reale dei messaggi recenti.
Un design reattivo con Tailwind CSS.

‍

Passaggio 5: aggiunta di analisi avanzate

Migliora la dashboard con analisi personalizzate:

Monitoraggio dei lead: monitora i numeri di telefono univoci e le loro fonti (ad esempio, annunci, referral):

‍

@app.route('/api/leads', methods=['GET'])
def get_leads():
    cursor.execute("SELECT phone, source, created_at FROM leads")
    leads = cursor.fetchall()
    return jsonify([{'phone': l[0], 'source': l[1], 'created_at': l[2]} for l in leads])

‍

Mappe di calore dei messaggi: visualizza i modelli di messaggistica per giorno e ora. Modifica i dati del grafico per creare una mappa di calore 2D utilizzando Chart.js.
Analisi del sentiment: analizza il tono del messaggio con TextBlob, notando i suoi limiti per i messaggi WhatsApp multilingue:

‍

from textblob import TextBlob

def analyze_sentiment(content):
    blob = TextBlob(content)
    return blob.sentiment.polarity

# Nel webhook
sentiment = analyze_sentiment(message['text']['body'])
cursor.execute("UPDATE messages SET sentiment = %s WHERE id = %s", (sentiment, message_id))

‍

Per un supporto multilingue, si consiglia di utilizzare i trasformatori di Hugging Face.

‍

Fase 6: Distribuzione e scalabilità

Distribuisci la dashboard su una piattaforma cloud:

Containerize: usa Docker per una distribuzione coerente:

‍

FROM python:3.9WORKDIR /appCOPY requirements.txt .RUN pip install -r requirements.txtCOPY . .CMD ["python", "app.py"]

‍

Scalabilità: utilizza AWS Elastic Load Balancer per distribuire il traffico webhook e il ridimensionamento automatico per carichi elevati.
Monitor: configura AWS CloudWatch per le metriche delle prestazioni e il monitoraggio degli errori.

‍

Fase 7: Buone pratiche

Sicurezza: utilizzare HTTPS per le chiamate API, memorizzare i token nelle variabili di ambiente e implementare OAuth per le integrazioni CRM.
Limitazione della frequenza: rispetta i limiti dell'API di WhatsApp (1.000 messaggi/secondo) con un middleware di limitazione della frequenza.
Memorizzazione nella cache: utilizza Redis per memorizzare nella cache le query frequenti, riducendo il carico del database.
Gestione degli errori: registra gli errori in un servizio come Sentry per il debug.

‍

Conclusione

Questa guida fornisce un modello per creare una dashboard WhatsApp personalizzata con analisi in tempo reale. Integrando il monitoraggio dei lead, le mappe di calore e l'analisi del sentiment, le aziende possono ottenere informazioni più approfondite sulle interazioni con i clienti. Sperimenta funzionalità aggiuntive, come risposte automatiche o integrazioni CRM, per migliorare ulteriormente le funzionalità della tua dashboard.

‍

Leggi altre notizie