---
title: "Traiter les données des onboardings dans le SDK Capacitor"
description: "Enregistrez et utilisez les données des onboardings dans votre app Capacitor avec le SDK Adapty."
---

:::warning
**Les onboardings sont dépréciés dans le SDK v4 et seront supprimés dans une prochaine version.** Ils ne reçoivent plus de correctifs ni d'améliorations. Utilisez plutôt les [flows](capacitor-get-pb-paywalls) : contrairement aux onboardings qui s'exécutent dans une WebView, les flows s'affichent nativement sur l'appareil — vous bénéficiez ainsi d'animations plus fluides, d'un rendu natif cohérent, de temps de chargement plus rapides et d'aucune dépendance au runtime WebView. Consultez [Récupérer les flows & paywalls](capacitor-get-pb-paywalls) et [Afficher les flows & paywalls](capacitor-present-paywalls) pour démarrer.
:::

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

Par exemple :

```typescript
view.setEventHandlers({
  onStateUpdated(action, meta) {
    // Process data
  },
});
```

Consultez le format des actions [ici](https://capacitor.adapty.io/types/onboardingstateupdatedaction).

<Details>
<summary>Exemples de données enregistrées (le format peut différer selon votre implémentation)</summary>

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

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

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

// Example of a saved date picker action
{
    "elementId": "birthday_picker",
    "meta": {
        "onboardingId": "onboarding_123",
        "screenClientId": "profile_screen",
        "screenIndex": 0,
        "screensTotal": 3
    },
"params": {
    "type": "datePicker",
    "value": {
        "day": 15,
        "month": 6,
        "year": 1990
        }
    }
}
```
</Details>

## Cas d'utilisation \{#use-cases\}

### Enrichir les profils utilisateurs avec des données \{#enrich-user-profiles-with-data\}

Si vous souhaitez associer immédiatement les données saisies au profil utilisateur et éviter de lui demander deux fois les mêmes informations, vous devez [mettre à jour le profil utilisateur](capacitor-setting-user-attributes) avec les données saisies lors du traitement de l'action.

Par exemple, vous demandez aux utilisateurs de saisir leur nom dans un 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 app, cela peut ressembler à ceci :

```typescript showLineNumbers
view.setEventHandlers({
  onStateUpdated(action, meta) {
    // Store user preferences or responses
    if (action.elementType === 'input') {
      const profileParams: any = {};
      
      // 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({ params: profileParams }).catch((error) => {
          // handle the error
        });
      }
    }
  },
});
```

### Personnaliser les paywalls en fonction des réponses \{#customize-paywalls-based-on-answers\}

En utilisant des quiz 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 expérience sportive et afficher des CTA et des produits différents selon les groupes d'utilisateurs.

1. [Ajoutez un quiz](onboarding-quizzes) dans le builder d'onboarding et attribuez des IDs significatifs à ses options.

2. Traitez les réponses au quiz en fonction de leurs IDs et [définissez des attributs personnalisés](capacitor-setting-user-attributes) pour les utilisateurs.

```typescript showLineNumbers
view.setEventHandlers({
  onStateUpdated(action, meta) {
    // Handle quiz responses and set custom attributes
    if (action.elementType === 'select') {
      const profileParams: any = {};
      
      // 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({ params: profileParams }).catch((error) => {
          // handle the error
        });
      }
    }
  },
});
```

3. [Créez des segments](segments) pour chaque valeur d'attribut personnalisé.
4. Créez un [placement](placements) et ajoutez des [audiences](audience) pour chaque segment créé.
5. [Affichez un paywall](capacitor-paywalls) pour le placement dans le code de votre app. 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](capacitor-handling-onboarding-events#opening-a-paywall).