cours-brevo/index.html

411 lines
24 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Cours -vPrendre en main Brevo</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="hero">
<div>
<p class="eyebrow">Arinfo · Niveau débutant à intermédiaire</p>
<h1>Prendre en main Brevo : contacts, campagnes, formulaires et automatisations</h1>
<p class="lead">Un cours step by step pour créer une première base de contacts propre, envoyer une campagne email simple et construire un scénario daccueil automatisé.</p>
<div class="actions no-print">
<button id="printBtn">Exporter en PDF / imprimer</button>
<button id="mdBtn" class="secondary">Exporter en Markdown</button>
<button id="resetBtn" class="ghost">Réinitialiser</button>
</div>
</div>
<aside class="course-card">
<strong>Durée estimée</strong><span>2h30 à 3h30</span>
<strong>Modalité</strong><span>Atelier guidé + exercices</span>
<strong>Pré-requis</strong><span>Compte Brevo, navigateur, fichier CSV de test</span>
</aside>
</header>
<main>
<nav class="progress no-print" aria-label="Progression du cours">
<span>Progression</span>
<progress id="progress" value="0" max="100"></progress>
<strong id="progressLabel">0%</strong>
</nav>
<section class="module" id="positionnement">
<h2>0. Quiz de positionnement</h2>
<p>Objectif : identifier le niveau de départ avant de lancer le cours.</p>
<div class="quiz" data-quiz="positioning"></div>
<button class="check no-print" data-check="positioning">Corriger le quiz de positionnement</button>
<p class="result" id="positioningResult"></p>
</section>
<section class="module">
<h2>1. Objectifs pédagogiques</h2>
<ul class="checklist">
<li><label><input type="checkbox" class="task"> Comprendre le rôle de Brevo dans une stratégie marketing.</label></li>
<li><label><input type="checkbox" class="task"> Créer et organiser une liste de contacts.</label></li>
<li><label><input type="checkbox" class="task"> Concevoir une campagne email simple et professionnelle.</label></li>
<li><label><input type="checkbox" class="task"> Mettre en place un formulaire dinscription.</label></li>
<li><label><input type="checkbox" class="task"> Construire une automatisation daccueil.</label></li>
<li><label><input type="checkbox" class="task"> Lire les indicateurs de performance de base.</label></li>
</ul>
<div class="note"><strong>Point de vigilance RGPD :</strong> nimportez jamais de contacts sans preuve de consentement. Une base sale détruit la délivrabilité et limage de marque.</div>
</section>
<section class="module">
<h2>2. Comprendre Brevo en 10 minutes</h2>
<p>Brevo sert à gérer des contacts, envoyer des campagnes marketing, créer des formulaires, automatiser des actions et suivre les performances. Les emails transactionnels sont différents : ils sont déclenchés par une action utilisateur, par exemple une création de compte, une confirmation de commande ou une réinitialisation de mot de passe.</p>
<div class="grid">
<article><h3>Contacts</h3><p>Base de données : emails, attributs, listes, segments.</p></article>
<article><h3>Campagnes</h3><p>Emails marketing envoyés à une audience ciblée.</p></article>
<article><h3>Formulaires</h3><p>Collecte propre de contacts avec consentement.</p></article>
<article><h3>Automatisations</h3><p>Scénarios déclenchés par des événements ou comportements.</p></article>
</div>
<div class="exercise" id="exercise2">
<h3>Exercice 2 : Classifier les types d'emails (Drag and Drop)</h3>
<p>Glisse et dépose les exemples d'emails dans leur catégorie correspondante, ou clique sur les cartes pour les déplacer :</p>
<!-- Cartes à classer -->
<div class="drag-cards-container" id="ex2_cards">
<div class="drag-card" draggable="true" id="ex2_card_newsletter" data-item="newsletter">Newsletter mensuelle</div>
<div class="drag-card" draggable="true" id="ex2_card_bienvenue" data-item="bienvenue">Email de bienvenue</div>
<div class="drag-card" draggable="true" id="ex2_card_commande" data-item="commande">Confirmation de commande</div>
<div class="drag-card" draggable="true" id="ex2_card_panier" data-item="panier">Relance panier abandonné</div>
</div>
<!-- Colonnes cibles -->
<div class="drop-zones-container">
<div class="drop-zone" data-category="campagne">
<h4>Campagnes (Marketing)</h4>
<div class="drop-zone-content" id="ex2_zone_campagne"></div>
</div>
<div class="drop-zone" data-category="automatisation">
<h4>Automatisations</h4>
<div class="drop-zone-content" id="ex2_zone_automatisation"></div>
</div>
<div class="drop-zone" data-category="transactionnel">
<h4>Transactionnel</h4>
<div class="drop-zone-content" id="ex2_zone_transactionnel"></div>
</div>
</div>
<div class="exercise-actions no-print">
<button type="button" class="btn-check" onclick="checkExercise2()">Corriger l'exercice 2</button>
<button type="button" class="btn-reset secondary" onclick="resetExercise2()">Réinitialiser</button>
</div>
<div class="exercise-feedback" id="exercise2Feedback"></div>
</div>
</section>
<section class="module">
<h2>3. Step by step - Créer une base de contacts propre</h2>
<ol class="steps">
<li><strong>Préparer le fichier CSV.</strong> Colonnes minimales : email, prénom, source, consentement, date dinscription.</li>
<li><strong>Créer une liste.</strong> Exemple : “Prospects - Atelier IA”.</li>
<li><strong>Importer les contacts.</strong> Mapper chaque colonne avec le bon attribut Brevo.</li>
<li><strong>Contrôler la qualité.</strong> Supprimer doublons, emails génériques douteux et contacts sans consentement.</li>
<li><strong>Segmenter.</strong> Exemple : source = formulaire LinkedIn, intérêt = formation IA.</li>
</ol>
<div class="exercise" id="exercise3">
<h3>Exercice 3 : Nettoyer et valider une liste de contacts avant import</h3>
<p>Voici 5 contacts extraits d'un fichier CSV d'inscription. Décide pour chaque contact s'il est conforme aux règles RGPD et de délivrabilité de Brevo en choisissant <strong>"Importer"</strong> ou <strong>"Rejeter"</strong> :</p>
<div class="table-container">
<table class="cleaning-table">
<thead>
<tr>
<th>Email</th>
<th>Source</th>
<th>Consentement</th>
<th>Action</th>
</tr>
</thead>
<tbody id="ex3_tbody">
<tr data-row="1">
<td class="cell-email">jean.dupont@gmail.com</td>
<td>Formulaire Newsletter</td>
<td><span class="badge badge-success">Oui (Double Opt-In)</span></td>
<td class="cell-action">
<label class="radio-label"><input type="radio" name="ex3_row1" value="import"> Importer</label>
<label class="radio-label"><input type="radio" name="ex3_row1" value="reject"> Rejeter</label>
</td>
</tr>
<tr data-row="2">
<td class="cell-email">contact@entreprise.com</td>
<td>Achat de base de données B2B</td>
<td><span class="badge badge-error">Non</span></td>
<td class="cell-action">
<label class="radio-label"><input type="radio" name="ex3_row2" value="import"> Importer</label>
<label class="radio-label"><input type="radio" name="ex3_row2" value="reject"> Rejeter</label>
</td>
</tr>
<tr data-row="3">
<td class="cell-email">support@societe.fr</td>
<td>Formulaire de contact général</td>
<td><span class="badge badge-success">Oui</span></td>
<td class="cell-action">
<label class="radio-label"><input type="radio" name="ex3_row3" value="import"> Importer</label>
<label class="radio-label"><input type="radio" name="ex3_row3" value="reject"> Rejeter</label>
</td>
</tr>
<tr data-row="4">
<td class="cell-email">pierre.durand@gmail</td>
<td>Formulaire Newsletter</td>
<td><span class="badge badge-success">Oui</span></td>
<td class="cell-action">
<label class="radio-label"><input type="radio" name="ex3_row4" value="import"> Importer</label>
<label class="radio-label"><input type="radio" name="ex3_row4" value="reject"> Rejeter</label>
</td>
</tr>
<tr data-row="5">
<td class="cell-email">sophie.martin@outlook.fr</td>
<td>Téléchargement Livre Blanc</td>
<td><span class="badge badge-success">Oui</span></td>
<td class="cell-action">
<label class="radio-label"><input type="radio" name="ex3_row5" value="import"> Importer</label>
<label class="radio-label"><input type="radio" name="ex3_row5" value="reject"> Rejeter</label>
</td>
</tr>
</tbody>
</table>
</div>
<div class="exercise-actions no-print">
<button type="button" class="btn-check" onclick="checkExercise3()">Corriger l'exercice 3</button>
<button type="button" class="btn-reset secondary" onclick="resetExercise3()">Réinitialiser</button>
</div>
<div class="exercise-feedback" id="exercise3Feedback"></div>
</div>
</section>
<section class="module">
<h2>4. Step by step - Créer une campagne email</h2>
<ol class="steps">
<li><strong>Définir lobjectif.</strong> Exemple : inscription à un webinaire, téléchargement dun guide, prise de rendez-vous.</li>
<li><strong>Choisir laudience.</strong> Liste complète ou segment précis.</li>
<li><strong>Rédiger lobjet.</strong> Court, concret, sans promesse floue.</li>
<li><strong>Construire lemail.</strong> Une accroche, une valeur, une preuve, un appel à laction.</li>
<li><strong>Tester.</strong> Envoyer un test, vérifier mobile, liens, fautes, expéditeur.</li>
<li><strong>Programmer.</strong> Choisir une date cohérente avec laudience.</li>
</ol>
<div class="template-box">
<h3>Structure recommandée</h3>
<p><strong>Objet :</strong> [Bénéfice clair] en [temps court]</p>
<p><strong>Corps :</strong> problème → solution → bénéfice → preuve → bouton unique.</p>
<p><strong>CTA :</strong> “Réserver ma place”, “Télécharger le guide”, “Demander une démo”.</p>
</div>
<div class="exercise" id="exercise4">
<h3>Exercice 4 : Rédiger un objet d'email percutant</h3>
<p>Rédige un objet d'email pour promouvoir une formation <strong>"Découvrir lIA générative en entreprise"</strong>. Évite les termes spam, soigne la longueur et cherche à capter l'intérêt.</p>
<input type="text" id="ex4_input" placeholder="Ex: [Prénom], gagnez 2 heures par jour grâce à l'IA" />
<div class="exercise-actions no-print">
<button type="button" class="btn-check" onclick="checkExercise4()">Analyser l'objet</button>
<button type="button" class="btn-reset secondary" onclick="resetExercise4()">Réinitialiser</button>
</div>
<div class="exercise-feedback" id="exercise4Feedback"></div>
<details class="correction-accordion no-print">
<summary>💡 Voir des exemples d'objets recommandés</summary>
<div class="accordion-content">
<ul>
<li><strong>Approche Curiosité / Directe :</strong> <code>L'IA générative dans votre entreprise : par où commencer ?</code> (Clair, va droit au but).</li>
<li><strong>Approche Bénéfice / Urgence :</strong> <code>{{ contact.PRENOM }}, gagnez 2h par jour grâce à l'IA</code> (Personnalisé, quantifie le gain de temps).</li>
<li><strong>Approche Chiffre / Preuve :</strong> <code>3 cas d'usage réels de l'IA dans votre secteur</code> (Donne envie de découvrir les exemples concrets).</li>
</ul>
</div>
</details>
</div>
</section>
<section class="module">
<h2>5. Step by step - Créer un formulaire dinscription</h2>
<ol class="steps">
<li><strong>Définir la promesse.</strong> Pourquoi la personne laisserait-elle son email ?</li>
<li><strong>Limiter les champs.</strong> Email + prénom suffisent souvent au départ.</li>
<li><strong>Ajouter le consentement.</strong> Formulation claire, non ambiguë.</li>
<li><strong>Associer à une liste.</strong> Exemple : “Inscrits newsletter”.</li>
<li><strong>Tester linscription.</strong> Vérifier lajout dans la liste et le message de confirmation.</li>
</ol>
<div class="exercise" id="exercise5">
<h3>Exercice 5 : Rédiger la clause de consentement RGPD</h3>
<p>Écris la phrase de consentement (opt-in) qui accompagnera la case à cocher de ton formulaire d'inscription. Elle doit indiquer ce que l'abonné recevra et comment il peut se désabonner.</p>
<textarea id="ex5_textarea" placeholder="J'accepte de recevoir..." rows="3"></textarea>
<div class="exercise-actions no-print">
<button type="button" class="btn-check" onclick="checkExercise5()">Valider la clause RGPD</button>
<button type="button" class="btn-reset secondary" onclick="resetExercise5()">Réinitialiser</button>
</div>
<div class="exercise-feedback" id="exercise5Feedback"></div>
<details class="correction-accordion no-print">
<summary>💡 Voir la clause de consentement type (conforme RGPD)</summary>
<div class="accordion-content">
<p class="model-text"><em>"En renseignant votre adresse email, vous acceptez de recevoir nos actualités et offres promotionnelles par courrier électronique. Vous pouvez vous désabonner à tout moment à l'aide des liens de désinscription intégrés dans nos emails."</em></p>
<p><strong>Pourquoi cette clause est conforme :</strong></p>
<ul>
<li><strong>Précision :</strong> Elle définit la nature des envois (actualités, offres).</li>
<li><strong>Libre arbitre :</strong> Elle rappelle que le désabonnement est possible à tout moment et facilement.</li>
<li><strong>Actif :</strong> Elle doit être associée à une case à cocher non pré-cochée.</li>
</ul>
</div>
</details>
</div>
</section>
<section class="module">
<h2>6. Step by step - Créer une automatisation daccueil</h2>
<p>Brevo permet de créer des automatisations marketing simples, comme des messages de bienvenue, de lonboarding, des relances panier abandonné, des anniversaires, du lead scoring ou de la gestion de listes.</p>
<ol class="steps">
<li><strong>Déclencheur.</strong> Contact ajouté à la liste “Inscrits newsletter”.</li>
<li><strong>Délai.</strong> Attendre 5 minutes pour éviter leffet robot immédiat.</li>
<li><strong>Email 1.</strong> Bienvenue + rappel de la promesse.</li>
<li><strong>Délai.</strong> Attendre 2 jours.</li>
<li><strong>Email 2.</strong> Ressource utile ou cas pratique.</li>
<li><strong>Condition.</strong> Si clic sur le lien : tag “intéressé”. Sinon : relance légère.</li>
</ol>
<div class="scenario">
<span>Entrée liste</span><b></b><span>Attente</span><b></b><span>Email 1</span><b></b><span>Attente</span><b></b><span>Condition clic</span>
</div>
<div class="exercise" id="exercise6">
<h3>Exercice 6 : Ordonner les étapes d'un scénario d'automatisation</h3>
<p>Organise ces 5 actions pour construire un scénario d'onboarding cohérent et efficace en cliquant sur les flèches pour déplacer les étapes vers le haut ou le bas :</p>
<ul class="sortable-list" id="ex6_list">
<li class="sortable-item" data-step="attente1">
<div class="item-content">
<span class="step-badge text-delay">Délai</span> Attendre 5 minutes avant d'envoyer
</div>
<div class="item-actions no-print">
<button type="button" class="btn-move-up" onclick="moveStepUp(this)"></button>
<button type="button" class="btn-move-down" onclick="moveStepDown(this)"></button>
</div>
</li>
<li class="sortable-item" data-step="email2">
<div class="item-content">
<span class="step-badge text-action">Action</span> Envoyer l'Email 2 (Ressource pratique & conseils)
</div>
<div class="item-actions no-print">
<button type="button" class="btn-move-up" onclick="moveStepUp(this)"></button>
<button type="button" class="btn-move-down" onclick="moveStepDown(this)"></button>
</div>
</li>
<li class="sortable-item" data-step="declencheur">
<div class="item-content">
<span class="step-badge text-trigger">Déclencheur</span> Le contact s'inscrit au formulaire "Newsletter"
</div>
<div class="item-actions no-print">
<button type="button" class="btn-move-up" onclick="moveStepUp(this)"></button>
<button type="button" class="btn-move-down" onclick="moveStepDown(this)"></button>
</div>
</li>
<li class="sortable-item" data-step="attente2">
<div class="item-content">
<span class="step-badge text-delay">Délai</span> Attendre 2 jours
</div>
<div class="item-actions no-print">
<button type="button" class="btn-move-up" onclick="moveStepUp(this)"></button>
<button type="button" class="btn-move-down" onclick="moveStepDown(this)"></button>
</div>
</li>
<li class="sortable-item" data-step="email1">
<div class="item-content">
<span class="step-badge text-action">Action</span> Envoyer l'Email 1 de bienvenue (Rappel de la promesse)
</div>
<div class="item-actions no-print">
<button type="button" class="btn-move-up" onclick="moveStepUp(this)"></button>
<button type="button" class="btn-move-down" onclick="moveStepDown(this)"></button>
</div>
</li>
</ul>
<div class="exercise-actions no-print">
<button type="button" class="btn-check" onclick="checkExercise6()">Valider le scénario</button>
<button type="button" class="btn-reset secondary" onclick="resetExercise6()">Réinitialiser</button>
</div>
<div class="exercise-feedback" id="exercise6Feedback"></div>
</div>
</section>
<section class="module">
<h2>7. Lire les résultats sans se noyer</h2>
<table>
<thead><tr><th>Indicateur</th><th>Ce quil dit</th><th>Action si mauvais résultat</th></tr></thead>
<tbody>
<tr><td>Taux douverture</td><td>Attractivité de lobjet et confiance envers lexpéditeur.</td><td>Tester un objet plus clair, segmenter mieux.</td></tr>
<tr><td>Taux de clic</td><td>Intérêt pour le contenu et le CTA.</td><td>Réduire le contenu, rendre le bouton plus visible.</td></tr>
<tr><td>Désinscriptions</td><td>Écart entre promesse et contenu reçu.</td><td>Revoir fréquence, ciblage et valeur de lemail.</td></tr>
<tr><td>Rebonds</td><td>Qualité technique de la base email.</td><td>Nettoyer la base, supprimer emails invalides.</td></tr>
</tbody>
</table>
</section>
<section class="module">
<h2>8. Atelier final</h2>
<p><strong>Mission :</strong> préparer une mini-stratégie Brevo pour promouvoir une formation courte.</p>
<ol>
<li>Créer une liste cible.</li>
<li>Définir un formulaire dinscription.</li>
<li>Rédiger un objet de campagne.</li>
<li>Créer un scénario daccueil en 3 emails.</li>
<li>Définir 3 indicateurs de suivi.</li>
</ol>
<textarea id="ex8_textarea" class="large" placeholder="Ton plan daction Brevo..."></textarea>
<details class="correction-accordion no-print">
<summary>💡 Afficher un exemple de plan d'action type pour s'auto-évaluer</summary>
<div class="accordion-content">
<h4>Exemple de plan d'action recommandé :</h4>
<ol>
<li><strong>Créer une liste cible :</strong> Liste <code>"Prospects - Formation Courte"</code>.</li>
<li><strong>Formulaire d'inscription :</strong> Intégré sur le site, demandant <em>Prénom</em> et <em>Email</em>, avec une clause de consentement claire (opt-in actif).</li>
<li><strong>Objet de campagne :</strong> <code>"{{ contact.PRENOM }}, maîtrisez [Sujet] en 3 jours"</code>.</li>
<li><strong>Scénario d'accueil en 3 emails :</strong>
<ul>
<li><strong>Déclencheur :</strong> Inscription au formulaire.</li>
<li><strong>Email 1 (immédiat) :</strong> Contenu promis + liens utiles.</li>
<li><strong>Email 2 (J+1) :</strong> Étude de cas ou témoignage client pour asseoir la crédibilité.</li>
<li><strong>Email 3 (J+3) :</strong> Offre commerciale avec appel à l'action direct (réserver un appel).</li>
</ul>
</li>
<li><strong>3 indicateurs de suivi :</strong> Taux d'ouverture (qualité de l'objet), Taux de clic (intérêt pour l'offre/CTA), et Taux de désinscription (pertinence globale).</li>
</ol>
</div>
</details>
</section>
<section class="module" id="quiz-final">
<h2>9. Quiz final</h2>
<div class="quiz" data-quiz="final"></div>
<button class="check no-print" data-check="final">Corriger le quiz final</button>
<p class="result" id="finalResult"></p>
</section>
<section class="module end-course no-print" id="completion-section">
<h2>Félicitations ! Vous avez complété le cours 🎉</h2>
<p>Vous êtes arrivé au bout de ce cours interactif Brevo. Vous pouvez exporter l'ensemble du cours incluant vos réponses, vos notes et vos corrections au format PDF pour le conserver ou le partager.</p>
<div class="actions">
<button type="button" id="finalPrintBtn" class="btn-check">Télécharger mon cours complété (PDF)</button>
</div>
</section>
<section class="module sources">
<h2>Sources utilisées pour la conception du cours</h2>
<ul>
<li>Documentation Brevo : automatisations, templates, emails transactionnels, SMTP, migration vers le nouvel éditeur dautomatisation.</li>
<li>Le cours évite volontairement les captures décran figées : linterface Brevo évolue, les libellés peuvent changer.</li>
</ul>
</section>
</main>
<footer>
<p>Cours interactif Brevo - version imprimable et exportable Markdown.</p>
</footer>
<script src="script.js"></script>
</body>
</html>