Traiter les données des onboardings dans le SDK Capacitor

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

Par exemple :

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

Voir le format d’action ici.

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

Cas d’utilisation

Enrichir les profils utilisateurs avec des données

Si vous souhaitez associer immédiatement les données saisies au profil utilisateur et éviter de leur demander deux fois les mêmes informations, vous devez mettre à jour le profil utilisateur avec ces données lors du traitement de l’action.

Par exemple, vous demandez aux utilisateurs de saisir leur nom dans le 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 adresse e-mail dans le champ email. Dans le code de votre application, cela peut ressembler à ceci :

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

Grâce aux quiz dans les onboardings, vous pouvez aussi personnaliser les paywalls affichés aux utilisateurs une fois l’onboarding terminé.

Par exemple, vous pouvez interroger les utilisateurs sur leur expérience sportive et leur présenter des CTA et des produits différents selon leur groupe.

1. Ajoutez un quiz dans le générateur d’onboarding et attribuez des identifiants significatifs à ses options.

2. Traitez les réponses au quiz en fonction de leurs identifiants et définissez des attributs personnalisés pour les utilisateurs.

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 pour chaque valeur d’attribut personnalisé.
4. Créez un placement et ajoutez des audiences pour chaque segment créé.
5. Affichez un paywall pour le placement dans le code de votre application. 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.