Étude de cas · Produit web · Ottawa, Canada

Une plateforme d'acquisition bilingue pour un conseiller automobile

Conception et développement d'un site de conversion FR / EN relié à une base de données, à des notifications automatisées, à un espace d'administration protégé, à une analytique comportementale propriétaire et à un calendrier éditorial collaboratif.

Type de projet: Site de conversion + outils internes
Portée: Conception, développement, données, automatisation
Langues: Français et anglais
Environnement: React · TypeScript · SSR · PostgreSQL

Contexte

Le problème

Un conseiller aux ventes automobile d'Ottawa disposait uniquement de pages sociales. Le trafic généré par la publicité n'aboutissait sur aucune destination capable de recueillir une demande, de la conserver, d'avertir le conseiller et de mesurer ce qui se passait réellement entre le clic et le contact.

Aucun point de collecte fiable pour les demandes issues des annonces.
Audience mixte anglophone et francophone dans la région d'Ottawa.
Aucune visibilité sur l'endroit où les visiteurs abandonnent.
Aucun outil partagé pour préparer et valider les publications sociales.

Public visé

Les utilisateurs

L'acheteur potentiel

Arrive depuis une annonce sociale, souvent sur mobile, veut comprendre à qui il parle et demander une consultation en moins d'une minute, en anglais ou en français.

Le conseiller

Doit recevoir la demande immédiatement par courriel, avec les coordonnées et le véhicule d'intérêt, sans avoir à consulter un outil supplémentaire.

L'administrateur

Consulte, filtre et exporte les demandes, suit l'entonnoir de conversion et pilote le calendrier de publication.

Solution

Le parcours principal

1
Annonce
Le visiteur clique sur une publicité sociale et atterrit sur la page.
2
Confiance
Présentation du conseiller, processus en trois étapes, modèles et inventaire.
3
Demande
Formulaire court, validé, avec véhicule d'intérêt pré-rempli depuis une fiche.
4
Traitement
Enregistrement en base, puis notification e-mail au conseiller.
5
Confirmation
Page de remerciement dédiée qui sert de point de conversion unique.

Aperçus

Interfaces réelles du produit

Page d'accueil : section d'accroche bilingue avec appel à l'action principal — Landing page — accroche et appel à l'action

Grille de véhicules avec année, couleur, motorisation, prix et lien vers la fiche détaillée — Inventaire — grille de véhicules et fiches

Calendrier éditorial hebdomadaire avec statuts et actions rapides — Calendrier éditorial — semaine filtrable

Page de confirmation affichée après l'envoi d'une demande — Confirmation — point de conversion unique

Captures prises dans l'application. Les vues contenant des données de contact ne sont pas reproduites ici.

Acquisition

Réseaux sociaux, compte publicitaire et pixel

Le mandat ne s'est pas arrêté au site : la présence sociale professionnelle, le compte publicitaire et la chaîne de mesure ont été créés et reliés à la landing page, de sorte que chaque dollar investi en publicité aboutisse à une demande traçable.

Présence sociale

Comptes professionnels créés et structurés

Mise en place des pages professionnelles Facebook et Instagram de la marque, avec identité visuelle, présentation du conseiller et lien direct vers la landing page comme unique destination de conversion.

Compte publicitaire et pixel Meta installés

Configuration du compte professionnel publicitaire et intégration du pixel Meta sur l'ensemble du site, afin que chaque campagne dispose d'une destination mesurée plutôt que d'un simple lien de profil.

Conversion

Événement de conversion unique et fiable

La conversion est déclenchée par l'arrivée sur la page de remerciement, définie côté outil publicitaire. Le doublon initial, causé par un second événement déclenché dans le code, a été identifié et supprimé.

Mesure

Chaîne de mesure complète

Gestionnaire de balises, analytique web, console de recherche et pixel publicitaire installés et vérifiés, complétés par un traceur comportemental propriétaire écrit directement en base de données.

Contenu

Production sociale planifiée

Publications bilingues préparées, visuels attachés et validés dans le calendrier éditorial interne avant diffusion sur les comptes sociaux.

Boucle

Du clic social à la demande qualifiée

Annonce sociale → landing page → formulaire → enregistrement en base → notification au conseiller → page de confirmation comptée comme conversion. Chaque étape est observable dans le tableau de bord.

Tableau de bord interne : visites, tunnel de conversion, sections vues, profondeur de défilement, appareils et sources de trafic — Tableau de bord de mesure — tunnel, sections vues, appareils et sources

Capture d'un environnement de démonstration : les chiffres affichés proviennent de sessions de test et ne représentent pas les performances commerciales du client, qui restent confidentielles.

Périmètre vérifié

Fonctionnalités livrées

Acquisition

Landing page de conversion bilingue

Page unique structurée en sections (hero, confiance, processus 1-2-3, modèles, inventaire, à propos, formulaire, FAQ) avec bascule FR / EN, préférence mémorisée et barre d'action fixe sur mobile.

Capture

Formulaire de demande validé de bout en bout

Validation Zod côté serveur (nom, téléphone, courriel, intérêt, message, langue, source). La demande est d'abord enregistrée en base, puis la notification est envoyée : aucune demande n'est perdue si le service e-mail échoue.

Automatisation

Notification e-mail transactionnelle

Envoi via l'API Resend avec gabarit HTML échappé, adresse de réponse pointant vers le client, et journalisation du statut (email_sent, email_error) directement sur l'enregistrement du lead.

Catalogue

Inventaire véhicules avec fiches détaillées

Jeu de données de véhicules typé en TypeScript, grille d'images, fenêtre de détail au clic et redirection vers le formulaire avec le modèle pré-sélectionné.

Back-office

Espace d'administration protégé

Routes sous un garde d'authentification, contrôle de rôle serveur (fonction has_role, rôles stockés dans une table dédiée user_roles), consultation, filtrage et export CSV des demandes.

Mesure

Analytique comportementale maison

Sessions anonymes, sections réellement vues, profondeur de défilement, clics CTA, rage clicks, intention de sortie, abandon de formulaire champ par champ. Événements mis en file d'attente et envoyés par lots (sendBeacon à la fermeture).

Décision

Tableau de bord d'entonnoir

Vue protégée qui reconstitue le parcours Visites → Formulaire vu → Formulaire commencé → Envoi tenté → Demande envoyée, avec filtres 24 h / 7 / 30 / 90 jours, répartition par appareil et par source.

Contenu

Calendrier éditorial collaboratif

Vue hebdomadaire filtrable des publications sociales, statuts (brouillon, planifié, approuvé), actions rapides, visuels attachés, journal d'activité signé et mises à jour en temps réel.

Conformité

Pages de confirmation et de confidentialité

Page de remerciement dédiée servant de point de conversion unique pour la publicité, et politique de confidentialité bilingue couvrant collecte, usage, conservation et droits.

Technique

Architecture

Flux de données

Navigateur (React 19, SSR)
   │  formulaire → validation Zod
   ▼
Server function (TanStack Start)
   ├─► PostgreSQL : insertion du lead        (source de vérité)
   ├─► API e-mail : notification conseiller  (statut journalisé)
   └─► réponse → redirection /thank-you      (conversion)

Traceur comportemental
   └─► table analytics_events (insertion anonyme, lecture admin)
          └─► tableau de bord protégé /analytics

Modèle de données

leads — demandes entrantes et statut d'envoi de la notification
user_roles — rôles applicatifs, séparés des profils
analytics_events — événements comportementaux anonymes
editorial_posts — publications planifiées, statuts et visuels
editorial_activity — journal des actions de collaboration

Sécurité

Row Level Security activée sur les tables applicatives.
Insertion publique autorisée, lecture des leads réservée aux administrateurs.
Contrôle de rôle exécuté côté serveur avant toute lecture sensible.
Validation et échappement systématiques des entrées utilisateur.
Clés privées lues uniquement dans les gestionnaires serveur.

React 19TypeScriptTanStack Start (SSR)TanStack RouterTanStack QueryTailwind CSS v4PostgreSQL (Supabase)Row Level SecurityServer functionsZodResend (API e-mail)GTM / GA4 / Meta Pixel

Résolution de problèmes

Décisions marquantes

Enregistrer la demande avant d'envoyer le courriel

L'insertion en base précède l'appel au fournisseur d'e-mail. Une panne du service de messagerie n'entraîne plus de perte commerciale : l'échec est enregistré sur la ligne du lead et reste rattrapable.

Une seule source de vérité pour la conversion publicitaire

L'événement de conversion est déclenché par l'arrivée sur la page de remerciement plutôt que par un événement dupliqué dans le code, ce qui a supprimé le double comptage observé côté régie publicitaire.

Rôles dans une table séparée, jamais sur le profil

Les rôles vivent dans user_roles et sont vérifiés par une fonction SQL security definer appelée côté serveur, ce qui évite l'escalade de privilèges depuis le navigateur.

Analytique propriétaire en complément des outils tiers

Les outils publicitaires indiquent combien de personnes cliquent ; ils n'expliquent pas où les visiteurs décrochent. Un traceur maison écrit dans une table dédiée répond à la question « pourquoi peu de formulaires malgré le trafic ».

Anglais par défaut, français à un clic

La langue affichée par défaut a été alignée sur l'audience principale, tout en conservant une bascule persistante et un contenu français complet.

Aucune donnée non vérifiable en façade

Statistiques, témoignages et années d'expérience non prouvés ont été retirés du site à la demande du client. Le contenu public ne présente que des éléments vérifiables.

Impact attendu

Valeur commerciale

Une destination publicitaire réelle

Le budget publicitaire aboutit désormais sur une page conçue pour une seule action : demander une consultation.

Aucune demande perdue

La persistance précède la notification, et les échecs d'envoi restent visibles et rattrapables.

Délai de réponse réduit

Le conseiller reçoit chaque demande par courriel, avec réponse directe vers le client.

Décisions fondées sur des données

L'entonnoir et les abandons de formulaire indiquent où agir plutôt que de deviner.

Marché bilingue couvert

Une même page sert les publics anglophone et francophone d'Ottawa, sans site dupliqué.

Production de contenu structurée

Le calendrier éditorial partagé remplace les échanges dispersés par un flux de validation traçable.

Contribution

Mon rôle sur le projet

J'ai porté le projet de bout en bout, du cadrage au produit en ligne : définition du parcours de conversion, conception de l'interface et du système visuel, développement front-end et serveur, modélisation de la base de données et de ses règles d'accès, automatisation des notifications, intégration des outils de mesure, mise en place du back-office et de l'analytique, puis itérations à partir des retours du client et des données observées.

Conception produit & UX

Parcours de conversion, hiérarchie de l'information, mobile d'abord.

Design d'interface

Système de couleurs, typographie et composants cohérents sur toutes les pages.

Développement

React, TypeScript, rendu serveur, routage typé, fonctions serveur.

Données

Schéma relationnel, politiques d'accès, séparation des rôles.

Automatisation & intégration

Notifications transactionnelles, balises de mesure, événements de conversion.

Diagnostic

Correction d'un double comptage de conversion et d'une erreur d'hydratation côté client.