Créer un onboarding en plusieurs étapes avec Engage

Rien de tel qu'un accueil chaleureux pour poser les bases d'une longue relation avec ses nouveaux abonnés, et ainsi travailler un aspect crucial : la rétention.

Proposer un onboarding en plusieurs étapes, juste après la confirmation de paiement d'un(e) nouvel(le) abonné(e), s'avère être un outil très efficace pour guider vos lecteurs en douceur.

Cet article a pour but de proposer un exemple d'onboarding en 3 étapes, et une manière (parmi d'autres) d'utiliser le SDK Engage pour y parvenir.

Exemple d'onboarding à étapes

Le cas d'usage présenté ici est pensé pour se déclencher juste après la confirmation à l'abonnement, sur une page dédiée. Voici les différentes étapes.

Etape 1 : Choisir parmi une sélection de newsletters

La première étape consiste dans notre exemple à proposer plusieurs blocs, chacun déclenchant l'inscription du nouvel abonné à une newsletter en particulier. Un bouton permet ensuite de passer à l'étape suivante.

💡 Tirez partie de la flexibilité de l'événement click pour réaliser l'inscription effective de vos abonnés à l'une ou l'autre des newsletters.

Exemple The Telegraph

Mise en place sur le dashboard :

Utiliser la condition d'affichage de l'élément "Selon un filtre personnalisé" avec une valeur unique, par exemple Etape1
Pour les différents boutons sous forme d'image, utiliser un composant "cliquable" contenant un composant image.
Sélectionner l'action du composant cliquable "déclencher un événement"
Définir un nom d'événement Javascript qui devra être ciblé dans l'intégration technique pour effectuer votre logique d'inscription
Utiliser un composant bouton avec action "déclencher un événement" pour passer à l'étape suivante
Définir un nom d'événement, par exemple Etape1-completed

Etape 2 : Télécharger l'app mobile

Dans le cas d'un nouvel abonné navigant sur ordinateur, on souhaite proposer un QR code, que le lecteur va scanner sur son écran pour télécharger l'app mobile du titre média.

Pour passer à l'étape suivante, on reprend le fonctionnement de l'étape précédente avec un bouton permettant de déclencher cette interaction.

Exemple The Economist

Mise en place sur le dashboard :

Utiliser la condition d'affichage de l'élément "Selon un filtre personnalisé" avec comme valeur le nom envoyé sur le bouton de l'étape précédente, par exemple Etape1-completed
Utiliser un composant bouton avec action "déclencher un événement" pour passer à l'étape suivante
Définir un nom d'événement, par exemple Etape2-completed

Etape 3 : Compléter ses informations personnelles

A ce stade, on souhaite proposer une meilleure personnalisation de l'expérience abonné et clore l'onboarding.

On met alors en place un formulaire contenant l'ensemble des champs nécessaires et on utilise l'événement formsubmit pour traiter les informations envoyées.

Mise en place sur le dashboard :

Définir le slug de l'élément, par exemple "onboarding-etape-3"
Utiliser la condition d'affichage de l'élément "Selon un filtre personnalisé" avec comme valeur le nom envoyé sur le bouton de l'étape précédente, par exemple Etape2-completed
Utiliser un composant bouton avec action "Soumettre le formulaire"

Mise en place technique avec le SDK Engage

L'exemple d'intégration présenté ici se base sur la logique suivante :

A chaque chargement de page, un élément Engage différent est chargé, correspondant à l'étape 1, 2 ou 3 du parcours d'onboarding.
L'utilisateur est attribué à la bonne étape correspondant à son parcours, grâce à l'utilisation du Local Storage du navigateur.
L'élément adéquat est chargé à travers l'utilisation des filtres personnalisés, passés sous .autoCreate({ filters: });

💡Bien que cet exemple représente une méthode fonctionnelle d'intégration, elle pourrait ne pas vous convenir. N'hésitez pas à en tester d'autres ou à vous rapprocher de notre équipe support pour validation.

Engage.init("<your-app-id>")   
   // name = nom de l'évènement JavaScript relié au bouton (setup sur le 
   // dashboard)
   // Exemple : le bouton de l'étape 1 enverra 'Etape1-completed'
   .on("click", ({ name }) => {    
     // Pour l'exemple, on utilise le localStorage pour stocker 
     // l'information de l'état de l'onboarding.
     localStorage.setItem("etapeOnboarding", name);
     // On recharge la page pour charger l'élément de l'étape suivante.
     window.location.reload();   
})
   .on("formSubmit", ({ element }) => {
     // Pour gérer le formulaire de l'étape 3, on se sert du slug      
     // de l'élément pour mettre à jour l'état de l'onboarding.     
     if (element.slug === 'onboarding-etape-3') {       
       localStorage.setItem("etapeOnboarding", 'Etape3-completed');       
       // On recharge la page pour charger l'élément de l'étape suivante  
       (si applicable. Sinon, vous pouvez appliquer une redirection vers 
       la page souhaitée)       
       window.location.reload();     
     }   
   })   
   .autoCreate({     
     // On récupère la dernière étape complétée/passée et      
     // on l'applique en tant que filtre.           
     // NB : || "Etape1" permet d'afficher la première      
     // étape en se basant sur un filtre si l'onboarding n'a pas commencé.     
     filters: localStorage.getItem("etapeOnboarding") || "Etape1",   
   });

Pour toute question ou si besoin d'aide, n'hésitez pas à nous écrire via le chat en direct ou par email 😊