React Native SDK'da onboarding verilerini işleme

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:

// 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 inceleyebilirsiniz.

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

Kullanım senaryoları

Kullanıcı profillerini verilerle zenginleştirme

Girilen verileri kullanıcı profiliyle hemen ilişkilendirmek ve aynı bilgiyi tekrar sormaktan kaçınmak istiyorsanız, aksiyonu işlerken kullanıcı profilini 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:

// 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

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 ve seçeneklerine anlamlı ID’ler atayın.
experience.webp
  1. Quiz yanıtlarını ID’lerine göre işleyin ve kullanıcılar için özel özellikler ayarlayın.
// 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
          });
        }
      }
    },
  }}
/>
  1. Her özel özellik değeri için segment oluşturun.
  2. Bir placement oluşturun ve oluşturduğunuz her segment için kitle ekleyin.
  3. Uygulama kodunuzda placement için bir paywall gösterin. Onboardinginizde paywall açan bir buton varsa, paywall kodunu bu butonun aksiyonuna yanıt olarak uygulayın.