Slatracker: KPIs Facebook Messenger

4.0

4/4/2025

Technologie

KPIs

Facebook Messenger

analyse de performance

webhook

graphiques

النص التوجيهي

Le projet est nomme 'Slatracker' avec pour but de collecter des KPIs ou Statistiques des pages Facebook Messenger connectees sur l application afin d avoir le taux des reponses, le delai de premiere reponses, le nombre de messages envoyes et recus, etc.
Une application qui collecte des KPIs (indicateurs clés de performance) pour les pages Facebook Messenger
Définition des KPIs à collecter :
Taux de réponse : Pourcentage de messages auxquels la page répond.
Délai de première réponse : Temps moyen avant la première réponse à un nouveau message.
Nombre de messages envoyés : Total des messages envoyés par la page.
Nombre de messages reçus : Total des messages reçus par les utilisateurs.
Intégrez une librairie comme Chart.js ou D3.js pour afficher les KPIs sous forme de graphiques (ex.barres pour les messages envoyés/reçus).
Configurez un webhook avec l'API Messenger pour recevoir les messages en temps réel. Cela permet à Slatracker de collecter les données dès qu'un message est envoyé ou reçu.
Calculez les KPIs en temps réel ou par lots (par exemple, toutes les heures ou quotidiennement) selon vos besoins.

Juste preciser que le Taux de réponse a calculer est le taux de reponse sur toutes les reponses en moins de 30 secondes, cad l agent ou les agents doivent repondre en moins de 30 secondes aux messages Messenger (prives) en moins de 30 secondes.
Assurez-vous que les horodatages de l'API Messenger sont fiables. Ils sont généralement en millisecondes, ce qui est parfait pour ce calcul.
intégrer la gestion des utilisateurs avec deux rôles (administrateur et agent), les permissions spécifiques,

Pour l ajout des pages Facebook Messenger, des utilisateurs, as-tu prevu la creation de nouveaux formulaires y afferents ds le code ? Si tu peux aller en detail avec l integration des pages faceebook en comment par la creation de l APP pour recuperer l ID et le token. Merci

Les administrateurs saisissent manuellement l’ID de la page et le Page Access Token obtenus via Meta for Developers.

la page d'accueil apres login doit avoir comme titre ' Tableau de board' et description ' Analyse des performances'. Comme menu tableau, Pages, utilisateurs et un bouton se deconnecter.
La ligne qui suit doit permettre de selectionner une date ou une plage de dates et choisir une page Facebooksur la liste deroualante pour affcihier les statistiques en bas, delai de premiere reponse, taux de reponse en moins de 30 secondes sur toutes les reponses, plus sous forme graphique les messages envoyes et recus sous forme graphique.
Maintenir cette barre de menu fixe quelque soit le changement de pages (Dashboard, Pages, Users, etc).
En cliquant sur le menu pages, on passe sur la page de gestion des pages Facebook, avec comme titre 'Gestion des pages Facebook' etdescritipn 'Cnnexion des pages facebook'. Plus bas, affichage des pages facebook connectes et ces pages seront ajoutes automatiquement sur la selection des pages Fcaebook dans la page Accueil. Un bouton 'Ajouter une page' ouvrira une formulaire pour remplir les informations necessaires a l intergration de la page.
Le menu utilisateurs afficher les informations completes des utilisateurs sauf le mot de passe, un bouton 'Ajour un utilisateur' qui ouvrira un formulairepour entrer les infomations necessaires a la creation de l utilisateur (Nom, email, mot de passe, role (Agent ou Administrateur)

النتيجة المولدة

import React, { useState, useEffect } from 'react';
import './App.css';

const App = () => {
  const [pages, setPages] = useState([]);
  const [users, setUsers] = useState([]);
  const [selectedPage, setSelectedPage] = useState('');
  const [selectedDateRange, setSelectedDateRange] = useState({ start: '', end: '' });
  const [kpis, setKpis] = useState({ responseRate: 0, firstResponseTime: 0, messagesSent: 0, messagesReceived: 0 });

  useEffect(() => {
    // Fetch initial data
    fetchPages();
    fetchUsers();
  }, []);

  const fetchPages = async () => {
    // Mock API call
    setPages([{ id: '1', name: 'Page 1' }, { id: '2', name: 'Page 2' }]);
  };

  const fetchUsers = async () => {
    // Mock API call
    setUsers([{ id: '1', name: 'User 1', email: '[email protected]', role: 'Admin' }, { id: '2', name: 'User 2', email: '[email protected]', role: 'Agent' }]);
  };

  const handlePageChange = (e) => {
    setSelectedPage(e.target.value);
  };

  const handleDateRangeChange = (e) => {
    setSelectedDateRange({ ...selectedDateRange, [e.target.name]: e.target.value });
  };

  const calculateKpis = () => {
    // Mock KPI calculation
    setKpis({ responseRate: 80, firstResponseTime: 25, messagesSent: 150, messagesReceived: 200 });
  };

  return (
    <div className="App">
      <header className="bg-blue-600 text-white p-4">
        <h1 className="text-2xl font-bold">Tableau de board</h1>
        <p className="text-sm">Analyse des performances</p>
      </header>
      <nav className="bg-gray-800 text-white p-2">
        <ul className="flex space-x-4">
          <li>Tableau</li>
          <li>Pages</li>
          <li>Utilisateurs</li>
          <li>Se déconnecter</li>
        </ul>
      </nav>
      <main className="p-4">
        <div className="flex space-x-4 mb-4">
          <input type="date" name="start" onChange={handleDateRangeChange} className="border p-2" />
          <input type="date" name="end" onChange={handleDateRangeChange} className="border p-2" />
          <select onChange={handlePageChange} className="border p-2">
            {pages.map(page => (
              <option key={page.id} value={page.id}>{page.name}</option>
            ))}
          </select>
          <button onClick={calculateKpis} className="bg-blue-500 text-white p-2">Calculer les KPIs</button>
        </div>
        <div className="grid grid-cols-2 gap-4">
          <div className="bg-white p-4 shadow">
            <h2 className="text-lg font-bold">Taux de réponse</h2>
            <p>{kpis.responseRate}%</p>
          </div>
          <div className="bg-white p-4 shadow">
            <h2 className="text-lg font-bold">Délai de première réponse</h2>
            <p>{kpis.firstResponseTime} secondes</p>
          </div>
          <div className="bg-white p-4 shadow">
            <h2 className="text-lg font-bold">Messages envoyés</h2>
            <p>{kpis.messagesSent}</p>
          </div>
          <div className="bg-white p-4 shadow">
            <h2 className="text-lg font-bold">Messages reçus</h2>
            <p>{kpis.messagesReceived}</p>
          </div>
        </div>
      </main>
    </div>
  );
};

export default App;

Open Sandbox

Slatracker: KPIs Facebook Messenger

النص التوجيهي

النتيجة المولدة

المزيد من التوصيات

Créer une app web détaillée

创建Web应用指南

应用展示计算机史

Histoire Informatique App

Application Eagle Eye pour cimenterie