Un jeu-concours rétropour faire découvrir une gamme d'ordinateurs portables

Notre client est un distributeur de solutions informatiques qui s'adresse aux entreprises et à leurs services informatiques. Dans le cadre d'une campagne marketing, il souhaitait mettre en avant une gamme d'ordinateurs portables dotés de fonctions d'intelligence artificielle, auprès d'un public précis : les professionnels de l'informatique, de l'innovation et des achats de matériel.

Ce public reçoit déjà beaucoup de brochures. Le client voulait une porte d'entrée capable de retenir l'attention quelques minutes, puis d'amener le visiteur vers le contenu produit.

L'objectif était double. Et l'équipe marketing avait besoin de savoir ce qui se passait dans le jeu.

1. D'abord

   Faire découvrir des produits de façon ludique

   Un argumentaire technique passe mal sans contexte. Le client voulait que chaque étape du jeu soit l'occasion d'apprendre quelque chose, en reliant un souvenir partagé de l'histoire de l'informatique à une fonction des nouveaux ordinateurs.

2. Ensuite

   Collecter des inscriptions dans un cadre réglementé

   Un jeu-concours avec tirage au sort impose des règles :

   • un règlement consultable
   • des conditions de participation claires
   • une liste limitée de données collectées
   • le consentement explicite de chaque participant
3. Enfin

   Savoir ce qui se passe dans le jeu

   L'équipe marketing voulait connaître :

   • combien de joueurs démarrent
   • jusqu'où ils vont
   • comment ils répondent aux questions
   • combien arrivent au bout du parcours

Nous avons conçu et développé l'ensemble du site de campagne, jusqu'à sa mise en ligne.

Les textes et les questions du quiz sont rangés dans des fichiers de données, modifiables sans toucher aux composants.

La page d'accueil explique la mission : attraper les icônes du plateau et répondre aux questions pour avancer d'une époque à l'autre.

1. 01

   Le plateau

   Le plateau s'ouvre dans une fenêtre au style de l'époque. Le serpent se dirige avec les flèches du clavier ; sur mobile, des boutons directionnels s'affichent sous le plateau, dont la taille s'adapte à l'écran. Le joueur dispose de trois vies.

   ↑←↓→Flèches du clavier

   Boutons directionnels sur mobile
2. 02

   La question

   Chaque icône attrapée met le jeu en pause et ouvre une question à choix multiple. Le joueur répond, découvre la bonne réponse et une explication qui relie l'époque évoquée à une fonction des nouveaux ordinateurs, puis reprend la partie. Le niveau suivant change l'habillage et les couleurs.

   Question à choix multipleJeu en pause

   ✓ Bonne réponse

   Explication

   Reprendre la partie

3. 03

   L'écran de fin

   Après la sixième question, un écran de félicitations affiche le score et le joueur bascule vers la page produits, qui présente la gamme et donne accès à l'inscription.

   Félicitations

   Score

   Vers la page produits →

4. 04

   L'inscription

   Le formulaire demande nom, prénom, fonction, entreprise, e-mail et téléphone professionnels. Les adresses de messageries personnelles courantes sont refusées, et l'envoi reste bloqué tant que tous les champs ne sont pas remplis et que le consentement n'est pas coché. Le règlement du jeu-concours, organisé en articles, reste accessible depuis le parcours.

   Inscription au tirage au sort

   • Nom
   • Prénom
   • Fonction
   • Entreprise
   • E-mail professionnel
   • Téléphone professionnel

   ✕ Messageries personnelles courantes refusées

   Consentement obligatoire

   Envoi bloqué tant que tout n'est pas rempli

Le suivi des conversions passe par un gestionnaire de balises. Le code pousse des événements nommés dans la couche de données ; l'équipe marketing configure ensuite ses balises et ses objectifs sans nouvelle livraison de code.

Un moteur de jeu 2D logé dans une interface React, un site statique léger, une image Docker et une chaîne de déploiement automatisé.

• React

  Porte l'interface et le parcours : page d'accueil, fenêtres du jeu, quiz, page produits, règlement. Le découpage en composants permet de réutiliser la même « fenêtre » rétro pour le plateau, les questions et l'écran de fin.

• TypeScript

  Type l'application et la scène de jeu. L'interface et le moteur échangent en permanence (pause, changement de niveau, direction) : le typage fiabilise ces échanges.

• Phaser

  Moteur de jeu 2D pour le navigateur, il gère la boucle de jeu, les sprites, les collisions et les sons.

• Vite

  Outil de développement et de build. Il produit un site statique léger et injecte au build l'identifiant de suivi propre à chaque environnement.

• Tailwind CSS

  Accélère la mise en page responsive des pages produits. Les habillages rétro restent dans une feuille de style par niveau.

Illustrations schématiques : le client, ses produits et la campagne restent anonymes.