, ,

Créer une interface Google Sheets pour compter les emails envoyés

Dans cet article, nous allons voir comment créer une interface utilisateur conviviale dans Google Sheets qui permet de compter le nombre d’emails envoyés à un destinataire sur une période donnée. Nous allons utiliser Google Apps Script pour intégrer cette fonctionnalité directement dans un menu personnalisé, avec une boîte de dialogue intuitive pour l’utilisateur.

Pourquoi ce développement ?

Google Sheets est un outil puissant pour analyser et organiser des données. En intégrant un script Apps Script, nous pouvons l’enrichir avec des fonctionnalités avancées.

Ce script permet de :

  • Analyser votre activité Gmail directement depuis Google Sheets.
  • Automatiser le comptage des emails envoyés à un destinataire spécifique.
  • Rendre l’outil accessible facilement via un menu personnalisé.

Étape 1 : Créer le script Apps Script

Tout d’abord, ouvrez un fichier Google Sheets et accédez à Extensions > Apps Script.

Copiez-collez le code suivant dans l’éditeur :

Code principal (Code.gs)

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/**
* Ajoute un menu personnalisé dans Google Sheets pour ouvrir l'interface utilisateur.
*/
function onOpen() {
const ui = SpreadsheetApp.getUi();
ui.createMenu('Outils Gmail') // Nom du menu
.addItem('Compter les emails envoyés', 'showEmailCountUI') // Élément du menu
.addToUi();
}
/**
* Affiche une boîte de dialogue pour saisir les paramètres et compter les emails envoyés.
*/
function showEmailCountUI() {
const html = HtmlService.createHtmlOutputFromFile('Index')
.setWidth(400)
.setHeight(350);
SpreadsheetApp.getUi().showModalDialog(html, 'Compter les emails envoyés');
}
/**
* Compte le nombre d'emails envoyés par Gmail à un destinataire sur une période donnée.
*
* @param {string} destinataire L'adresse email du destinataire.
* @param {string} dateDebut La date de début (ex : "2023/01/01").
* @param {string} dateFin La date de fin (ex : "2023/01/31").
* @return {number|string} Le nombre d'emails envoyés, ou un message d'erreur.
*/
function compterEmailsEnvoyes(destinataire, dateDebut, dateFin) {
try {
const query = `from:me to:${destinataire} after:${dateDebut} before:${dateFin}`;
const threads = GmailApp.search(query);
let count = 0;
threads.forEach(thread => {
count += thread.getMessages().length;
});
return count;
} catch (erreur) {
return `Erreur lors du comptage des emails : ${erreur.message}`;
}
}
/** * Ajoute un menu personnalisé dans Google Sheets pour ouvrir l'interface utilisateur. */ function onOpen() { const ui = SpreadsheetApp.getUi(); ui.createMenu('Outils Gmail') // Nom du menu .addItem('Compter les emails envoyés', 'showEmailCountUI') // Élément du menu .addToUi(); } /** * Affiche une boîte de dialogue pour saisir les paramètres et compter les emails envoyés. */ function showEmailCountUI() { const html = HtmlService.createHtmlOutputFromFile('Index') .setWidth(400) .setHeight(350); SpreadsheetApp.getUi().showModalDialog(html, 'Compter les emails envoyés'); } /** * Compte le nombre d'emails envoyés par Gmail à un destinataire sur une période donnée. * * @param {string} destinataire L'adresse email du destinataire. * @param {string} dateDebut La date de début (ex : "2023/01/01"). * @param {string} dateFin La date de fin (ex : "2023/01/31"). * @return {number|string} Le nombre d'emails envoyés, ou un message d'erreur. */ function compterEmailsEnvoyes(destinataire, dateDebut, dateFin) { try { const query = `from:me to:${destinataire} after:${dateDebut} before:${dateFin}`; const threads = GmailApp.search(query); let count = 0; threads.forEach(thread => { count += thread.getMessages().length; }); return count; } catch (erreur) { return `Erreur lors du comptage des emails : ${erreur.message}`; } }
/**
 * Ajoute un menu personnalisé dans Google Sheets pour ouvrir l'interface utilisateur.
 */
function onOpen() {
  const ui = SpreadsheetApp.getUi();
  ui.createMenu('Outils Gmail') // Nom du menu
    .addItem('Compter les emails envoyés', 'showEmailCountUI') // Élément du menu
    .addToUi();
}

/**
 * Affiche une boîte de dialogue pour saisir les paramètres et compter les emails envoyés.
 */
function showEmailCountUI() {
  const html = HtmlService.createHtmlOutputFromFile('Index')
    .setWidth(400)
    .setHeight(350);
  SpreadsheetApp.getUi().showModalDialog(html, 'Compter les emails envoyés');
}

/**
 * Compte le nombre d'emails envoyés par Gmail à un destinataire sur une période donnée.
 *
 * @param {string} destinataire L'adresse email du destinataire.
 * @param {string} dateDebut La date de début (ex : "2023/01/01").
 * @param {string} dateFin La date de fin (ex : "2023/01/31").
 * @return {number|string} Le nombre d'emails envoyés, ou un message d'erreur.
 */
function compterEmailsEnvoyes(destinataire, dateDebut, dateFin) {
  try {
    const query = `from:me to:${destinataire} after:${dateDebut} before:${dateFin}`;
    const threads = GmailApp.search(query);
    let count = 0;
    threads.forEach(thread => {
      count += thread.getMessages().length;
    });
    return count;
  } catch (erreur) {
    return `Erreur lors du comptage des emails : ${erreur.message}`;
  }
}

Explication du script :

  • Ajoute un menu Outils Gmail dans Google Sheets (onOpen).
  • Ouvre une interface HTML pour saisir les paramètres (showEmailCountUI).
  • Effectue une requête Gmail pour compter les emails envoyés (compterEmailsEnvoyes).

Étape 2 : Ajouter l’interface utilisateur (HTML)

Dans l’éditeur Apps Script, créez un nouveau fichier HTML nommé Index.html et collez le code suivant :

Interface utilisateur (Index.html)

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
/* Styles inspirés de Google Sheets */
body {
font-family: "Google Sans", Arial, sans-serif;
padding: 20px;
background-color: #f8f9fa;
color: #202124;
}
h2 {
font-size: 18px;
font-weight: 500;
margin-bottom: 15px;
}
label {
font-weight: 500;
font-size: 14px;
display: block;
margin: 10px 0 5px;
}
input {
width: 100%;
padding: 10px;
border: 1px solid #dadce0;
border-radius: 4px;
font-size: 14px;
background-color: #fff;
color: #202124;
}
input:focus {
border-color: #1a73e8;
outline: none;
box-shadow: 0 1px 3px rgba(26, 115, 232, 0.3);
}
button {
background-color: #1a73e8;
color: white;
font-size: 14px;
font-weight: 500;
padding: 10px;
border: none;
border-radius: 4px;
width: 100%;
cursor: pointer;
margin-top: 15px;
}
button:hover {
background-color: #1765cc;
}
#result {
margin-top: 15px;
font-size: 14px;
font-weight: 500;
color: #202124;
}
</style>
</head>
<body>
<h2>Compter les emails envoyés</h2>
<form id="emailForm" onsubmit="handleSubmit(event)">
<label for="destinataire">Destinataire :</label>
<input type="email" id="destinataire" name="destinataire" placeholder="exemple@domaine.com" required>
<label for="dateDebut">Date de début (AAAA/MM/JJ) :</label>
<input type="text" id="dateDebut" name="dateDebut" placeholder="2023/01/01" required>
<label for="dateFin">Date de fin (AAAA/MM/JJ) :</label>
<input type="text" id="dateFin" name="dateFin" placeholder="2023/01/31" required>
<button type="submit">Compter</button>
</form>
<div id="result"></div>
<script>
function handleSubmit(e) {
e.preventDefault();
document.getElementById('result').innerText = "Traitement en cours...";
const destinataire = document.getElementById('destinataire').value;
const dateDebut = document.getElementById('dateDebut').value;
const dateFin = document.getElementById('dateFin').value;
google.script.run
.withSuccessHandler(function(count) {
document.getElementById('result').innerText = "Nombre d'emails envoyés : " + count;
})
.withFailureHandler(function(error) {
document.getElementById('result').innerText = "Erreur : " + error;
})
.compterEmailsEnvoyes(destinataire, dateDebut, dateFin);
}
</script>
</body>
</html>
<!DOCTYPE html> <html> <head> <base target="_top"> <style> /* Styles inspirés de Google Sheets */ body { font-family: "Google Sans", Arial, sans-serif; padding: 20px; background-color: #f8f9fa; color: #202124; } h2 { font-size: 18px; font-weight: 500; margin-bottom: 15px; } label { font-weight: 500; font-size: 14px; display: block; margin: 10px 0 5px; } input { width: 100%; padding: 10px; border: 1px solid #dadce0; border-radius: 4px; font-size: 14px; background-color: #fff; color: #202124; } input:focus { border-color: #1a73e8; outline: none; box-shadow: 0 1px 3px rgba(26, 115, 232, 0.3); } button { background-color: #1a73e8; color: white; font-size: 14px; font-weight: 500; padding: 10px; border: none; border-radius: 4px; width: 100%; cursor: pointer; margin-top: 15px; } button:hover { background-color: #1765cc; } #result { margin-top: 15px; font-size: 14px; font-weight: 500; color: #202124; } </style> </head> <body> <h2>Compter les emails envoyés</h2> <form id="emailForm" onsubmit="handleSubmit(event)"> <label for="destinataire">Destinataire :</label> <input type="email" id="destinataire" name="destinataire" placeholder="exemple@domaine.com" required> <label for="dateDebut">Date de début (AAAA/MM/JJ) :</label> <input type="text" id="dateDebut" name="dateDebut" placeholder="2023/01/01" required> <label for="dateFin">Date de fin (AAAA/MM/JJ) :</label> <input type="text" id="dateFin" name="dateFin" placeholder="2023/01/31" required> <button type="submit">Compter</button> </form> <div id="result"></div> <script> function handleSubmit(e) { e.preventDefault(); document.getElementById('result').innerText = "Traitement en cours..."; const destinataire = document.getElementById('destinataire').value; const dateDebut = document.getElementById('dateDebut').value; const dateFin = document.getElementById('dateFin').value; google.script.run .withSuccessHandler(function(count) { document.getElementById('result').innerText = "Nombre d'emails envoyés : " + count; }) .withFailureHandler(function(error) { document.getElementById('result').innerText = "Erreur : " + error; }) .compterEmailsEnvoyes(destinataire, dateDebut, dateFin); } </script> </body> </html>
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      /* Styles inspirés de Google Sheets */
      body {
        font-family: "Google Sans", Arial, sans-serif;
        padding: 20px;
        background-color: #f8f9fa;
        color: #202124;
      }
      
      h2 {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 15px;
      }
      
      label {
        font-weight: 500;
        font-size: 14px;
        display: block;
        margin: 10px 0 5px;
      }

      input {
        width: 100%;
        padding: 10px;
        border: 1px solid #dadce0;
        border-radius: 4px;
        font-size: 14px;
        background-color: #fff;
        color: #202124;
      }

      input:focus {
        border-color: #1a73e8;
        outline: none;
        box-shadow: 0 1px 3px rgba(26, 115, 232, 0.3);
      }

      button {
        background-color: #1a73e8;
        color: white;
        font-size: 14px;
        font-weight: 500;
        padding: 10px;
        border: none;
        border-radius: 4px;
        width: 100%;
        cursor: pointer;
        margin-top: 15px;
      }

      button:hover {
        background-color: #1765cc;
      }

      #result {
        margin-top: 15px;
        font-size: 14px;
        font-weight: 500;
        color: #202124;
      }
    </style>
  </head>
  <body>
    <h2>Compter les emails envoyés</h2>
    <form id="emailForm" onsubmit="handleSubmit(event)">
      <label for="destinataire">Destinataire :</label>
      <input type="email" id="destinataire" name="destinataire" placeholder="exemple@domaine.com" required>
      
      <label for="dateDebut">Date de début (AAAA/MM/JJ) :</label>
      <input type="text" id="dateDebut" name="dateDebut" placeholder="2023/01/01" required>
      
      <label for="dateFin">Date de fin (AAAA/MM/JJ) :</label>
      <input type="text" id="dateFin" name="dateFin" placeholder="2023/01/31" required>
      
      <button type="submit">Compter</button>
    </form>
    
    <div id="result"></div>
    
    <script>
      function handleSubmit(e) {
        e.preventDefault();
        document.getElementById('result').innerText = "Traitement en cours...";
        
        const destinataire = document.getElementById('destinataire').value;
        const dateDebut = document.getElementById('dateDebut').value;
        const dateFin = document.getElementById('dateFin').value;
        
        google.script.run
          .withSuccessHandler(function(count) {
            document.getElementById('result').innerText = "Nombre d'emails envoyés : " + count;
          })
          .withFailureHandler(function(error) {
            document.getElementById('result').innerText = "Erreur : " + error;
          })
          .compterEmailsEnvoyes(destinataire, dateDebut, dateFin);
      }
    </script>
  </body>
</html>

Étape 3 : Tester et utiliser le script

  1. Enregistrez votre script Apps Script.
  2. Rechargez votre feuille Google Sheets.
  3. Un nouveau menu “Outils Gmail” apparaît en haut.
  4. Cliquez sur “Compter les emails envoyés”, saisissez les informations et validez !

Vous obtiendrez immédiatement le nombre d’emails envoyés à ce destinataire sur la période choisie.

Conclusion

Avec ce développement, nous avons automatisé le comptage des emails envoyés directement depuis Google Sheets, avec :

  • Une interface utilisateur moderne et intuitive.
  • Une intégration fluide via un menu personnalisé.
  • Un script qui interagit avec Gmail pour récupérer des données précises.

Ce script peut être adapté et enrichi pour répondre à d’autres besoins, comme :

  • Compter les emails reçus,
  • Extraire les sujets des emails envoyés,
  • Générer un rapport exportable, etc.

Et vous, quelles fonctionnalités aimeriez-vous ajouter ? Partagez vos idées en commentaire ! 😊