# Fiche synthèse — Duplication de Landing Pages

## Besoin initial

Permettre aux équipes marketing et opérationnelles de dupliquer et décliner en masse une landing page de référence pour générer automatiquement des dizaines ou des centaines de variantes personnalisées par magasin, point de vente, zone géographique ou cible de clientèle, sans manipulation manuelle répétitive dans l'éditeur visuel. Le besoin vise à automatiser la personnalisation des textes, des liens, des destinations de boutons d'appel à l'action, des formulaires de contact et des modules de guidage géographique Drive to Store, tout en préservant l'intégrité du graphisme et la conformité des pages destinées aux campagnes de marketing direct par SMS et RCS.

## Ancienne méthode manuelle

Auparavant, la création de déclinaisons locales imposait de dupliquer chaque page de manière unitaire dans l'interface d'administration, puis d'ouvrir individuellement chaque copie dans l'éditeur visuel GrapesJS afin de modifier manuellement les informations locales, les coordonnées du point de vente, les textes et les liens de redirection. Pour une campagne déployée sur cinquante magasins, l'opérateur devait répéter cinquante fois la même suite d'actions de clonage, de saisie et d'enregistrement, ce qui représentait plusieurs heures de travail fastidieux et augmentait fortement le risque d'erreurs humaines, de coquilles ou d'oublis de mise à jour sur les données locales.

## Créateur

L'historique Git identifie des contributions techniques de Seth-Sady. Cet historique permet de retracer des interventions dans le code, mais ne remplace pas une validation RH, contractuelle ou de propriété intellectuelle sur la qualité de créateur ou de titulaire des travaux.

## Technologie choisie

L'outil est intégré à l'application Wellpack Admin, développée en PHP avec le framework Laravel 12 sous PHP 8.4. L'analyse et l'adaptation des pages s'appuient sur le modèle arborescent au format JSON de l'éditeur GrapesJS 0.22.13. La génération, le formatage et l'analyse des feuilles de calcul multi-onglets reposent sur la bibliothèque Laravel Excel adossée à PhpSpreadsheet. L'interface utilisateur de duplication associe des vues Blade, du JavaScript natif, les composants d'onglets de Bootstrap 5.3.2 et des feuilles de style Sass. La validation logicielle s'appuie sur une suite de cinquante tests automatisés sous PHPUnit 11, et la qualité du code PHP est contrôlée par Laravel Pint.

## Pourquoi ce choix de techno

Laravel fournit un cadre sécurisé pour orchestrer les flux de données, la validation stricte des formulaires, le clonage de modèles de données en base relationnelle et la gestion des droits d'accès. L'interaction directe avec l'arborescence JSON de GrapesJS permet d'ajuster programmatiquement la structure interne des pages sans déformer leur rendu visuel.

La bibliothèque Laravel Excel et PhpSpreadsheet permettent de concevoir dynamiquement des classeurs adaptés aux composants détectés dans la page source, offrant ainsi un support de saisie tabulaire universel, facile à partager et modifiable hors-ligne par les équipes marketing.

Blade, JavaScript et Bootstrap permettent de proposer un parcours utilisateur ergonomique en trois étapes comprenant le téléchargement du modèle, le téléversement avec prévisualisation compartimentée par onglets, puis le lancement de la génération en masse. Les tests PHPUnit garantissent l'absence de régression, la robustesse du traitement face aux caractères spéciaux ou aux données partielles, et la parfaite conformité des pages créées.

## Difficultés rencontrées

L'analyse porte sur les travaux de développement réalisés sur la branche dédiée entre le 13 et le 22 avril 2026, représentant 15 jours de réalisations séquencées, 50 tests automatisés dédiés et plusieurs dizaines de commits et corrections ciblées. Quatre sujets techniques majeurs sont retenus comme difficultés élevées, présentant une incertitude technique réelle, une démarche itérative documentée et des connaissances transférables à d'autres projets de manipulation de documents structurés. La nouveauté et la créativité ne sont pas retenues comme démontrées, faute d'un comparatif formel ou d'un état de l'art documenté dans le dépôt.

La première difficulté concernait la détection et l'extraction automatique de l'ensemble des éléments éditables au sein de l'arborescence JSON hiérarchique et hétérogène de GrapesJS. Contrairement à un simple remplacement de texte brut, les composants de l'éditeur peuvent être déclarés sous des attributs HTML spécifiques ou sous des types natifs sans attributs explicites, et contiennent des données personnalisables à des niveaux de profondeur variables, notamment dans des nœuds textuels enfants ou des attributs de configuration imbriqués. Il fallait parcourir récursivement des structures complexes sans risquer de boucle infinie, normaliser les différents types de composants et générer un modèle de tableur contenant uniquement les onglets et colonnes pertinents pour la page modèle analysée.

La deuxième difficulté concernait la gestion des composants métier complexes multi-propriétés, en particulier les formulaires de collecte et les modules de guidage géographique Drive to Store. Un formulaire comporte plusieurs paramètres distincts tels que l'adresse de redirection, l'objet de courriel et le corps du message, qui ne sont pas toujours préconfigurés dans la page de départ mais doivent pouvoir être renseignés pour chaque variante. De plus, le module Drive to Store fait appel à sept données de localisation qui doivent être enregistrées dans un fichier de données autonome sur le serveur avant d'injecter la référence du magasin dans le composant de chaque page fille.

La troisième difficulté concernait la fiabilité et l'intégrité du flux d'importation Excel, notamment l'optimisation de la mémoire vive et la prévention des erreurs d'incompatibilité entre le fichier téléversé et la page modèle. L'application devait protéger les lignes d'en-tête et d'exemples du tableur sans provoquer de dépassement de mémoire lors du traitement de fichiers volumineux, identifier de manière certaine que le fichier soumis correspond bien à la page source grâce à une signature d'identification, et consolider sans perte les données réparties sur plusieurs onglets thématiques.

La quatrième difficulté concernait la validation stricte des données et la restitution claire des erreurs aux utilisateurs. En cas de colonne absente dans le classeur ou de métadonnée d'identification obligatoire non renseignée comme le nom ou le titre de la page, le système devait interrompre le traitement avant toute création en base de données, tout en permettant l'héritage silencieux des paramètres de composants laissés vides, et restituer des messages d'erreur détaillant l'onglet concerné et le numéro exact de ligne Excel pour faciliter la correction immédiate par l'opérateur.

## Comment elles ont été franchies

Pour la détection et l'extraction des composants, un service d'analyse récursive dédié a été mis en œuvre avec un dictionnaire de correspondance des types natifs et une limite de profondeur sécurisée. Il parcourt l'arborescence, extrait les identifiants uniques, lit les propriétés directes ainsi que le contenu des nœuds de texte enfants, et filtre les composants graphiques invariables pour composer dynamiquement un modèle Excel épuré. En parallèle, un service de remplacement de variables prend en charge les balises textuelles dans l'ensemble des contenus et des attributs HTML.

Pour les composants multi-propriétés et le guidage géographique, le module d'extraction a été adapté pour gérer des listes de définitions avec inclusion systématique des colonnes requises même en l'absence de valeur initiale. Pour le Drive to Store, un service spécialisé génère automatiquement les fichiers de données des magasins sur le serveur à partir des coordonnées saisies dans la feuille Excel, puis met à jour la configuration du composant de la page dupliquée.

Pour la sécurité et la maîtrise de la mémoire du traitement Excel, la protection du classeur a été appliquée de manière globale sur les plages matricielles de cellules déverrouillées plutôt que par une itération cellule par cellule, évitant toute saturation de mémoire. Une colonne de signature invisible à la saisie mais lue à l'importation a été intégrée pour avertir l'utilisateur en cas d'incohérence avec la page modèle. La lecture multi-onglets a été fiabilisée par l'application d'un traitement d'en-têtes et une fusion des lignes basée sur l'identifiant du nom de page.

Pour la validation et la restitution des erreurs, un double contrôle a été mis en place dans le contrôleur applicatif : une vérification structurelle assurant la présence de toutes les colonnes requises avec indication de l'onglet associé, et un contrôle de complétude bloquant la création si une métadonnée indispensable est vide sur une ligne. Côté interface, les messages d'erreur sont restitués de manière explicite et la prévisualisation répartit les données dans des onglets interactifs pour offrir une vérification visuelle confortable avant génération définitive.

## Connaissances acquises

Le projet a permis d'établir une méthodologie éprouvée pour la manipulation programmatique et la duplication de documents web structurés en arborescences complexes. L'équipe a acquis une maîtrise pointue des modèles de données de l'éditeur GrapesJS, des techniques de parcours récursif avec préservation de la structure d'origine et des mécanismes d'application de modifications ciblées par identifiant de composant.

Dans le domaine du traitement de données tabulaires, des compétences approfondies ont été consolidées sur la création dynamique de classeurs multi-feuilles avec PhpSpreadsheet, la maîtrise de l'empreinte mémoire lors de l'application de règles matricielles, ainsi que sur l'analyse et la réconciliation de données provenant de multiples onglets.

Enfin, les travaux ont permis de structurer une démarche de validation logicielle rigoureuse combinant des règles de contrôle métier préventives, une suite de tests automatisés couvrant de nombreux cas limites (caractères spéciaux, encodages variés, champs optionnels, données partielles) et une interface utilisateur guidée et résiliente, directement capitalisable pour de futurs projets d'automatisation de masse.

## Nom

Duplication de Landing Pages (GrapesJS).

## Description finale de l'outil

L'outil permet aux équipes marketing et opérationnelles de créer en une seule opération plusieurs dizaines ou centaines de déclinaisons d'une landing page de référence à partir d'un fichier Excel. Il analyse automatiquement les blocs de la page modèle pour concevoir un modèle de tableur sur mesure, intégrant les métadonnées globales, les balises de personnalisation textuelle et les composants interactifs détectés, tels que les boutons, les liens, les formulaires et les coordonnées de points de vente pour le guidage géographique Drive to Store.

L'utilisateur télécharge ce classeur pré-rempli avec les données d'origine, renseigne les variantes souhaitées pour chaque magasin ou segment, puis téléverse le fichier sur une interface dédiée. L'outil valide la conformité du document, affiche une prévisualisation compartimentée par onglets des modifications à effectuer, puis exécute la création automatique des nouvelles pages et de leurs pages filles associées, en reproduisant fidèlement le graphisme et en injectant les données spécifiques à chaque variante.

## Possibilités d'évolutions et limites par rapport à l'objectif initial

La duplication massive par flux Excel est totalement opérationnelle et prend en charge la personnalisation des métadonnées, des textes, des boutons, des liens, des formulaires et des données de guidage Drive to Store, tout en gérant l'arborescence des pages parent-enfant.

Certaines limites sont actuellement présentes dans le périmètre fonctionnel. Les composants d'images et de vidéos sont volontairement exclus de la détection Excel afin de préserver la lisibilité du tableur, les éléments visuels restant généralement identiques entre les déclinaisons d'une même campagne. De même, les localisateurs de magasins complexes intégrant une cartographie globale nécessitent un fichier de données préexistant sur le serveur et ne sont pas modifiables cellule par cellule dans l'Excel. Le volume maximal recommandé par lot d'importation est fixé à cinq cents lignes afin de préserver les performances et la réactivité du serveur.

Les perspectives d'évolution documentées prévoient l'intégration d'un moteur d'intelligence artificielle pour adapter automatiquement le contenu rédactionnel d'une page dupliquée à un nouveau marché ou secteur cible. Ce module s'appuierait sur l'extraction ciblée des nœuds de texte dans l'arborescence GrapesJS, le cadrage des consignes de génération pour respecter strictement les longueurs de texte d'origine afin de préserver l'intégrité visuelle sans altérer le code HTML ou CSS, ainsi que sur une interface de paramétrage du ton et des mots-clés associée à un traitement asynchrone avec indicateur d'état et mécanismes de secours en cas de défaillance du fournisseur d'intelligence artificielle. Sont également envisagées la personnalisation des visuels principaux via des adresses renseignées dans le tableur et la mise en place d'un traitement en tâche de fond pour les volumes dépassant plusieurs centaines de pages.

## Temps économisé

Auparavant, la configuration manuelle et le contrôle d'une déclinaison locale dans l'éditeur visuel nécessitaient entre cinq et dix minutes par page, soit environ quatre à huit heures de travail ininterrompu pour une campagne déployée sur cinquante points de vente. Grâce à l'outil de duplication automatisée par fichier Excel, la préparation des données et la génération en masse s'effectuent en une quinzaine de minutes pour l'ensemble du lot, ce qui représente un gain estimé à plusieurs heures par campagne multi-magasins. Le gain réel effectif reste à mesurer auprès de l'équipe marketing lors des prochaines campagnes en conditions réelles, afin de chronométrer précisément le temps global de préparation des fichiers et de validation des pages générées.

## Outil ou lien vers l'outil ou le code

Application : Wellpack Admin. Dépôt de code observé : C:\Users\seth.ndinga-ndinga\Documents\Projet\admin. Les principaux fichiers de la fonctionnalité sont situés dans app/Services/GjsComponentExtractor.php, app/Services/GjsComponentPatcher.php, app/Services/GjsVariableReplacer.php, app/Services/DriveStoreService.php, app/Exports/LandingWebsiteDuplicationTemplateExport.php, app/Http/Controllers/LandingWebsiteController.php, resources/views/pages/landing_website/duplicate_page.blade.php et resources/js/views/landing_website_duplicate.js. L'adresse d'accès de l'outil en environnement déployé doit être complétée par l'équipe.

## Version

L'outil s'intègre dans l'application Wellpack Admin utilisant Laravel 12, PHP 8.4, GrapesJS 0.22.13, Laravel Excel 3.1 et Bootstrap 5.3.2. Aucun numéro de version distinct ni journal de version formel n'est attribué spécifiquement au sous-module de duplication dans le code source.