# LeadFactory (Directus)

# 2. Interface

## Pages principales

Le projet est structuré autour de **quatre pages principales** :

- **Contenu**  
    Page centrale de gestion des scénarios et des campagnes.
- **Utilisateurs** *(non-modifiable)*  
    Gestion des comptes et des droits (lecture seule).
- **Bibliothèque**  
    Médiathèque centralisée (images, vidéos).
- **Tableaux de bord**  
    Accès aux dashboards d’analyse et de reporting.

## Collections principales : 

LeadFactory repose sur **quatre collections clés** :

- **Scénario**
- **Formulaires** *(non-modifiable)*
- **Type de scénario** *(non-modifiable)*
- **Véhicules** *(non-modifiable)*

[![Capture d’écran 2025-12-22 à 15.14.18.png](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/scaled-1680-/capture-decran-2025-12-22-a-15-14-18.png)](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/capture-decran-2025-12-22-a-15-14-18.png)

## Détails de la collection Scénario

L'interface de Directus permet de naviguer, filtrer, rechercher facilement des informations en fonction de différents critères. Il est même possible d'ajouter des colonnes afin d'obtenir plus d'informations.

[![Capture d’écran 2025-12-22 à 15.48.08.png](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/scaled-1680-/capture-decran-2025-12-22-a-15-48-08.png)](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/capture-decran-2025-12-22-a-15-48-08.png)

1. Bouton de tri des scénarios : Lorsqu’il est activé (icône blanche), il permet de modifier l’ordre d’affichage des scénarios.
2. Boutons de gestion de la collection : Permettent de trier la liste et d’ajouter de nouveaux scénarios.
3. Bouton d’ajout de champ liés aux scénarios  
      
    ⚠️ Fonctions suivantes disponibles uniquement avec le plug-in Chrome directus-scenario-thumbnails-crome installé. ⚠️[plugin-chrome-directus-V2.zip](https://wiki.apps.innocean.app/attachments/26)
4. Redirection vers le scénario : Au click sur le short\_id, permet d’accéder directement au scénario après sa création.
5. Aperçu des slides du scénario : Un clic permet de les agrandir, de lire les vidéos si présentes et de naviguer entre elles.

# 3. Collection scénario

## Préambule 

La **collection Scénario** constitue le **cœur fonctionnel de LeadFactory**.  
C’est à partir de cette collection que sont définies, configurées et pilotées l’ensemble des **landing pages** générées par la plateforme.

Un scénario regroupe, au sein d’une même configuration, tous les éléments nécessaires à une campagne :  
contenus médias, structure visuelle, formulaire multi-étapes, véhicules associés, mentions légales et paramètres de tracking.

Chaque scénario publié correspond à **une landing page active**, automatiquement générée et prête à collecter des leads.  
Cette approche permet de **standardiser les parcours**, d’assurer la **cohérence des données collectées** et de faciliter la mise en ligne rapide de nouvelles campagnes, sans développement spécifique.

La collection Scénario offre ainsi un **point d’entrée unique** pour créer, maintenir et faire évoluer les campagnes LeadFactory, tout en garantissant un cadre robuste, scalable et orienté performance.

## 1. Paramètres généraux 

Ces paramètres permettent d’identifier le scénario, de contrôler sa mise en ligne et d’assurer le suivi marketing.

- **Statut :**  
    **Publié** : le scénario est accessible en ligne.  
    **Brouillon ou Archivé** : le scénario n’est pas disponible.
- **Nom :**  
    Nom interne servant uniquement à l’organisation.
- **Type :**  
    Catégorie liée à la collection Type de scénario.
- **Code campagne :**  
    Utilisé pour le tracking marketing.
- **Optin marketing :**  
    Active ou désactive l’affichage des optins. Activé par défaut.
- **Commentaire :** Notes internes non visibles sur la landing page.

[![Capture d’écran 2025-12-22 à 15.22.26.png](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/scaled-1680-/capture-decran-2025-12-22-a-15-22-26.png)](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/capture-decran-2025-12-22-a-15-22-26.png)

## 2. Paramètres des Slides 

Cette partie constitue la partie "Slide" à gauche de la landing page. Si aucun média n’est renseigné, la partie visuelle de la landing page ne sera pas affichée.

- **Titre :**  
    Optionnel, affiché en haut à gauche.
- **Sous-titre :**  
    Optionnel, affiché sous le titre. Masqué si un véhicule est associé.
- **Média :**  
    Image ou vidéo provenant de la médiathèque.
- **Règles médias :**  
    Images : Format WebP, 1500x1500px, poids max 700 Ko.  
    Vidéos : Format MP4, poids max 8 Mo.
- **Véhicule :** Associe un modèle pour afficher son prix sur la slide (valable uniquement en scenario B2C)

[![Capture d’écran 2025-12-22 à 15.25.54.png](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/scaled-1680-/capture-decran-2025-12-22-a-15-25-54.png)](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/capture-decran-2025-12-22-a-15-25-54.png)

## 3. Paramètres Formulaires

Ces paramètres définissent le formulaire affiché sur la landing page, son contenu et con comportement après soumission

- **Formulaire :**  
    Sélection du formulaire utilisé.
- **Titre du formulaire :**  
    Titre principal affiché.
- **Sous-titre du formulaire :**  
    Texte secondaire.
- **Véhicules :**  
    Liste des modèles disponibles dans le formulaire.
- **Questions post-formulaire :**  
    Affiche des questions supplémentaires après la soumission.
- **Texte du CTA :**  
    Texte du bouton final. Par défaut “Réserver un essai”
- **Message de confirmation :**  
    Message affiché après validation. Par défaut “Félicitations, votre demande d'essai a bien été prise en compte.”

[![Capture d’écran 2025-12-22 à 15.30.59.png](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/scaled-1680-/capture-decran-2025-12-22-a-15-30-59.png)](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/capture-decran-2025-12-22-a-15-30-59.png)

### 4. Paramètres Autres

- **Tracking :**  
    Il est possible d'ajouter un script de tracking spécifique pour ce scénario. Code HTML/JS uniquement.
- **Mentions légales :**  
    Texte personnalisé de mentions légales.

[![Capture d’écran 2025-12-22 à 15.34.23.png](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/scaled-1680-/capture-decran-2025-12-22-a-15-34-23.png)](https://wiki.apps.innocean.app/uploads/images/gallery/2025-12/capture-decran-2025-12-22-a-15-34-23.png)

# 4. Création de scénario

Tuto à venir

# 1. Présentation

### Principe de fonctionnement

Chaque **scénario** correspond à une campagne et permet de générer automatiquement **une landing page complète**, incluant :

- **Des contenus médias** : images et/ou vidéos
- **Les mentions légales** associées à la campagne
- **Un formulaire multi-étapes entièrement dynamique**, avec champs conditionnels et logique métier

Une fois le scénario configuré dans Directus, **LeadFactory se charge automatiquement** de :

- l’affichage des contenus sur la landing page,
- la gestion complète du formulaire (parcours, validation, étapes),
- l’envoi des leads vers le **webservice associé**,
- l’intégration de toutes les **informations de tracking** nécessaires (campagne, source, UTM, etc.).

### Rôle de Directus

Directus agit comme **back-office central et headless CMS** :

- Configuration des scénarios de landing pages
- Gestion des formulaires et de leur logique
- Administration des campagnes et du tracking
- Gestion des utilisateurs, rôles et permissions
- Extension via hooks et scripts personnalisés

Il permet à des équipes non techniques de créer et maintenir des campagnes complexes, tout en garantissant un cadre technique robuste et maîtrisé.

### Architecture (vue d’ensemble)

- **Directus** : back-end headless (API REST / GraphQL, logique métier, permissions)
- **Front-end** : landing pages dynamiques (Svelte / JS) consommant l’API
- **Stockage** : médias et assets externalisés (S3 compatible)
- **Data & reporting** : exploitation des leads dans des outils d’analyse (dashboards, CRM, BI)

### Valeur ajoutée

- **Gain de temps** sur la mise en place des campagnes
- **Modularité** : un même socle pour des dizaines de formulaires
- **Sécurité & gouvernance** via les rôles et permissions Directus
- **Pilotage data-driven** : données propres, structurées, historisées
- **Scalabilité** : ajout de nouvelles mécaniques sans refonte globale

### Accès à la plateforme

👉 **URL de connexion admin** :  
[https://leadfactory.apps.hyundai.media/admin/login](https://leadfactory.apps.hyundai.media/admin/login)

# Nouvelle page

test