Capacitor 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 ya da işleyebilirsiniz.

Örneğin:

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

Aksiyon formatını buradan inceleyebilirsiniz.

// 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 anında kullanıcı profiliyle ilişkilendirmek ve aynı bilgileri 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 de girmelerini istiyorsunuz. Uygulama kodunuzda bu şu şekilde görünebilir:

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

Yanıtlara göre paywallları özelleştirme

Onboardinglarda quiz kullanarak, kullanıcılara onboarding’i tamamladı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 ile ürünler gösterebilirsiniz.

1. Onboarding builder’da bir quiz ekleyin ve seçeneklere anlamlı ID’ler atayın.

2. Quiz yanıtlarını ID’lerine göre işleyin ve kullanıcılar için özel nitelikler belirleyin.

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. Her özel nitelik değeri için segment oluşturun.
4. Bir placement oluşturun ve oluşturduğunuz her segment için kitle ekleyin.
5. Uygulama kodunuzda placement için bir paywall gösterin. Onboardingde paywall açan bir buton varsa, paywall kodunu bu butonun aksiyonuna yanıt olarak uygulayın.