---
title: "Procesar datos de onboardings en Capacitor SDK"
description: "Guarda y usa datos de onboardings en tu app de Capacitor con Adapty SDK."
---

Cuando tus usuarios responden a una pregunta de un cuestionario o introducen datos en un campo de texto, se invocará el método `onStateUpdatedAction`. Puedes guardar o procesar el tipo de campo en tu código.

Por ejemplo:

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

Consulta el formato de acción [aquí](https://capacitor.adapty.io/types/onboardingstateupdatedaction).

<Details>
<summary>Ejemplos de datos guardados (el formato puede variar según tu implementación)</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>

## Casos de uso \{#use-cases\}

### Enriquecer perfiles de usuario con datos \{#enrich-user-profiles-with-data\}

Si quieres vincular inmediatamente los datos introducidos con el perfil del usuario y evitar pedirle la misma información dos veces, necesitas [actualizar el perfil del usuario](capacitor-setting-user-attributes) con los datos introducidos al gestionar la acción.

Por ejemplo, si pides a los usuarios que introduzcan su nombre en el campo de texto con el ID `name` y quieres usar ese valor como nombre de pila del usuario, y además les pides su correo en el campo `email`, en el código de tu app quedaría así:

```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
        });
      }
    }
  },
});
```

### Personalizar paywalls según las respuestas \{#customize-paywalls-based-on-answers\}

Usando cuestionarios en los onboardings, también puedes personalizar los paywalls que muestras a los usuarios cuando completan el onboarding.

Por ejemplo, puedes preguntarles sobre su experiencia con el deporte y mostrar diferentes CTAs y productos a distintos grupos de usuarios.

1. [Añade un cuestionario](onboarding-quizzes) en el editor de onboardings y asigna IDs significativos a sus opciones.

2. Gestiona las respuestas del cuestionario según sus IDs y [establece atributos personalizados](capacitor-setting-user-attributes) para los usuarios.

```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. [Crea segmentos](segments) para cada valor de atributo personalizado.
4. Crea un [placement](placements) y añade [audiencias](audience) para cada segmento que hayas creado.
5. [Muestra un paywall](capacitor-paywalls) para el placement en el código de tu app. Si tu onboarding tiene un botón que abre un paywall, implementa el código del paywall como [respuesta a la acción de ese botón](capacitor-handling-onboarding-events#opening-a-paywall).