Traiter les données des onboardings dans le SDK React Native

Warning

Les onboardings sont dépréciés à partir du SDK Adapty v4. Créez des flows à la place : contrairement aux onboardings, qui s’exécutent dans une WebView, les flows s’affichent nativement sur l’appareil — animations plus fluides, aspect natif cohérent, temps de chargement réduits et aucune dépendance à l’environnement WebView.

Lorsque vos utilisateurs répondent à une question de quiz ou saisissent des données dans un champ de saisie, la méthode onStateUpdatedAction est appelée. Vous pouvez enregistrer ou traiter le type de champ dans votre code.

Par exemple :

// Full-screen presentation
const unsubscribe = view.setEventHandlers({
  onStateUpdated(action, meta) {
    // Process data 
  },
});

// Embedded widget
<AdaptyOnboardingView
  onboarding={onboarding}
  eventHandlers={{
    onStateUpdated(action, meta) {
      // Process data 
    },
  }}
/>

Consultez le format de l’action ici.

Exemples de données sauvegardées (le format peut différer selon votre implémentation)

// Example of a saved select action
{
    "elementId": "preference_selector",
    "elementType": "select",
    "value": {
        "id": "option_1",
        "value": "premium",
        "label": "Premium Plan"
    },
    "meta": {
        "onboardingId": "onboarding_123",
        "screenClientId": "preferences_screen",
        "screenIndex": 1,
        "totalScreens": 3
    }
}

// Example of a saved multi-select action
{
    "elementId": "interests_selector",
    "elementType": "multi_select",
    "value": [
        {
            "id": "interest_1",
            "value": "sports",
            "label": "Sports"
        },
        {
            "id": "interest_2",
            "value": "music",
            "label": "Music"
        }
    ],
    "meta": {
        "onboardingId": "onboarding_123",
        "screenClientId": "interests_screen",
        "screenIndex": 2,
        "totalScreens": 3
    }
}

// Example of a saved input action
{
    "elementId": "name_input",
    "elementType": "input",
    "value": {
        "type": "text",
        "value": "John Doe"
    },
    "meta": {
        "onboardingId": "onboarding_123",
        "screenClientId": "profile_screen",
        "screenIndex": 0,
        "totalScreens": 3
    }
}

// Example of a saved date picker action
{
    "elementId": "birthday_picker",
    "elementType": "date_picker",
    "value": {
        "day": 15,
        "month": 6,
        "year": 1990
    },
    "meta": {
        "onboardingId": "onboarding_123",
        "screenClientId": "profile_screen",
        "screenIndex": 0,
        "totalScreens": 3
    }
}

Cas d’usage

Enrichir les profils utilisateur avec des données

Si vous souhaitez lier immédiatement les données saisies au profil utilisateur et éviter de demander deux fois les mêmes informations, vous devez mettre à jour le profil utilisateur avec ces données lors du traitement de l’action.

Par exemple, vous demandez aux utilisateurs de saisir leur nom dans le champ texte avec l’ID name, et vous souhaitez définir la valeur de ce champ comme prénom de l’utilisateur. Vous leur demandez également de saisir leur e-mail dans le champ email. Dans le code de votre application, cela peut ressembler à ceci :

// Full-screen presentation
const unsubscribe = view.setEventHandlers({
  onStateUpdated(action, meta) {
    // Store user preferences or responses
    if (action.elementType === 'input') {
      const profileParams = {};
      
      // Map elementId to appropriate profile field
      switch (action.elementId) {
        case 'name':
          if (action.value.type === 'text') {
            profileParams.firstName = action.value.value;
          }
          break;
        case 'email':
          if (action.value.type === 'email') {
            profileParams.email = action.value.value;
          }
          break;
      }
      
      // Update profile if we have data to update
      if (Object.keys(profileParams).length > 0) {
        adapty.updateProfile(profileParams).catch(error => {
          // handle the error
        });
      }
    }
  },
});

// Embedded widget
<AdaptyOnboardingView
  onboarding={onboarding}
  eventHandlers={{
    onStateUpdated(action, meta) {
      // Store user preferences or responses
      if (action.elementType === 'input') {
        const profileParams = {};
        
        // Map elementId to appropriate profile field
        switch (action.elementId) {
          case 'name':
            if (action.value.type === 'text') {
              profileParams.firstName = action.value.value;
            }
            break;
          case 'email':
            if (action.value.type === 'email') {
              profileParams.email = action.value.value;
            }
            break;
        }
        
        // Update profile if we have data to update
        if (Object.keys(profileParams).length > 0) {
          adapty.updateProfile(profileParams).catch(error => {
            // handle the error
          });
        }
      }
    },
  }}
/>

Personnaliser les paywalls en fonction des réponses

Grâce aux quiz intégrés dans les onboardings, vous pouvez également personnaliser les paywalls affichés aux utilisateurs après qu’ils ont terminé l’onboarding.

Par exemple, vous pouvez interroger les utilisateurs sur leur pratique sportive et afficher des CTA et des produits différents selon les groupes d’utilisateurs.

Ajoutez un quiz dans le builder d’onboarding et attribuez des IDs significatifs à ses options.

Traitez les réponses au quiz en fonction de leurs IDs et définissez des attributs personnalisés pour les utilisateurs.

// Full-screen presentation
const unsubscribe = view.setEventHandlers({
  onStateUpdated(action, meta) {
    // Handle quiz responses and set custom attributes
    if (action.elementType === 'select') {
      const profileParams = {};
      
      // Map quiz responses to custom attributes
      switch (action.elementId) {
        case 'experience':
          // Set custom attribute 'experience' with the selected value (beginner, amateur, pro)
          profileParams.codableCustomAttributes = {
            experience: action.value.value
          };
          break;
      }
      
      // Update profile if we have data to update
      if (Object.keys(profileParams).length > 0) {
        adapty.updateProfile(profileParams).catch(error => {
          // handle the error
        });
      }
    }
  },
});

// Embedded widget
<AdaptyOnboardingView
  onboarding={onboarding}
  eventHandlers={{
    onStateUpdated(action, meta) {
      // Handle quiz responses and set custom attributes
      if (action.elementType === 'select') {
        const profileParams = {};
        
        // Map quiz responses to custom attributes
        switch (action.elementId) {
          case 'experience':
            // Set custom attribute 'experience' with the selected value (beginner, amateur, pro)
            profileParams.codableCustomAttributes = {
              experience: action.value.value
            };
            break;
        }
        
        // Update profile if we have data to update
        if (Object.keys(profileParams).length > 0) {
          adapty.updateProfile(profileParams).catch(error => {
            // handle the error
          });
        }
      }
    },
  }}
/>

Créez des segments pour chaque valeur d’attribut personnalisé.
Créez un placement et ajoutez des audiences pour chaque segment que vous avez créé.
Affichez un paywall pour le placement dans le code de votre application. Si votre onboarding comporte un bouton qui ouvre un paywall, implémentez le code du paywall en tant que réponse à l’action de ce bouton.