---
title: "React Native SDK'da onboarding verilerini işleme"
description: "Adapty SDK ile React Native uygulamanızdaki onboarding verilerini kaydedin ve kullanın."
---

Kullanıcılarınız bir quiz sorusunu yanıtladığında veya bir giriş alanına veri girdiğinde `onStateUpdatedAction` metodu çağrılır. Alan türünü kodunuzda kaydedebilir veya işleyebilirsiniz.

Örneğin:

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

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

Aksiyon formatını [buradan](https://react-native.adapty.io/types/onboardingstateupdatedaction) inceleyebilirsiniz.

<Details>
<summary>Kaydedilen veri örnekleri (format uygulamanıza göre farklılık gösterebilir)</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>

## Kullanım senaryoları \{#use-cases\}

### Kullanıcı profillerini verilerle zenginleştirme \{#enrich-user-profiles-with-data\}

Girilen verileri kullanıcı profiliyle hemen ilişkilendirmek ve aynı bilgiyi tekrar sormaktan kaçınmak istiyorsanız, aksiyonu işlerken [kullanıcı profilini](react-native-setting-user-attributes) girilen verilerle güncellemeniz gerekir.

Örneğin, kullanıcılardan `name` ID'li metin alanına adlarını girmelerini istiyorsunuz ve bu alanın değerini kullanıcının adı olarak kaydetmek istiyorsunuz. Ayrıca `email` alanına e-posta adreslerini girmeleri için de bir alan ekliyorsunuz. Uygulama kodunuzda bu şöyle görünebilir:

```javascript showLineNumbers
// Full-screen presentation
const unsubscribe = view.registerEventHandlers({
  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
          });
        }
      }
    },
  }}
/>
```

### Yanıtlara göre paywallları özelleştirme \{#customize-paywalls-based-on-answers\}

Onboardinglardaki quizleri kullanarak, onboarding tamamlandıktan sonra gösterdiğiniz paywallları da özelleştirebilirsiniz.

Örneğin, kullanıcılara sporla ilgili deneyimlerini sorabilir ve farklı kullanıcı gruplarına farklı CTA'lar ve ürünler gösterebilirsiniz.

1. Onboarding oluşturucuda bir [quiz ekleyin](onboarding-quizzes) ve seçeneklerine anlamlı ID'ler atayın.

2. Quiz yanıtlarını ID'lerine göre işleyin ve kullanıcılar için [özel özellikler ayarlayın](react-native-setting-user-attributes).

```javascript showLineNumbers
// Full-screen presentation
const unsubscribe = view.registerEventHandlers({
  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
          });
        }
      }
    },
  }}
/>
```

3. Her özel özellik değeri için [segment oluşturun](segments).
4. Bir [placement](placements) oluşturun ve oluşturduğunuz her segment için [kitle](audience) ekleyin.
5. Uygulama kodunuzda placement için bir [paywall gösterin](react-native-paywalls). Onboardinginizde paywall açan bir buton varsa, paywall kodunu [bu butonun aksiyonuna yanıt olarak](react-native-handling-onboarding-events#opening-a-paywall) uygulayın.