Aprende a usar Trophy para añadir una funcionalidad de rachas a tu aplicación web o móvil.
Esta guía describe el proceso completo para añadir una funcionalidad de rachas a tu aplicación web o móvil usando Trophy.A modo ilustrativo, utilizaremos el ejemplo de una plataforma de estudio que emplea una racha diaria para incentivar y recompensar a los usuarios por ver tarjetas de estudio.
En Trophy, las Métricas son los componentes fundamentales de la gamificación y modelan las diferentes interacciones que los usuarios realizan con tu producto.En esta guía, la interacción que nos interesa es flashcards-viewed, pero puedes crear una métrica que mejor represente la interacción desde la cual quieres generar rachas.En el panel de Trophy, dirígete a la página de métricas y crea una métrica.
Una vez que hayas creado tu métrica, dirígete a la página de rachas y selecciona la frecuencia de racha que deseas (diaria, semanal o mensual).Luego añade tu métrica a las condiciones de racha y establece el umbral que los usuarios deben cumplir (por ejemplo, al menos 1 para extender su racha en cada período).También puedes añadir múltiples métricas y elegir si los usuarios deben cumplir todas o solo una—consulta la documentación de condiciones de racha para más detalles.En Trophy puedes hacer seguimiento de las interacciones de los usuarios enviando Eventos desde tu código a las API de Trophy asociados a una métrica específica.Cuando se registran eventos para un usuario específico, Trophy verificará automáticamente si han cumplido las condiciones de su racha para el período actual y actualizará la racha del usuario en consecuencia.Esto es lo que hace que crear experiencias gamificadas con Trophy sea tan fácil: hace todo el trabajo por ti entre bastidores.
Para interactuar con Trophy desde tu código utilizarás el SDK de Trophy disponible en la mayoría de los principales lenguajes de programación.Instala el SDK de Trophy:
npm install @trophyso/node
A continuación, obtén tu clave API desde la página de integración de Trophy y agrégala como una variable de entorno solo del lado del servidor.
TROPHY_API_KEY='*******'
Asegúrate de no exponer tu clave API en código del lado del cliente.
Al incluir la zona horaria del usuario en el atributo tz, Trophy
hará seguimiento automático de las rachas según el reloj local del usuario y gestionará
casos límite complicados donde los usuarios cambian de zona horaria.
La respuesta a esta llamada API es el conjunto completo de cambios a cualquier funcionalidad que hayas creado con Trophy, incluyendo los datos más recientes sobre la racha del usuario.
Podemos usar la respuesta de la API de cambio de métrica para mostrar notificaciones emergentes (o ‘toasts’) cuando el usuario extiende su racha.Aquí hay un ejemplo de esto en acción:
Streak Extended Pop-up
// Sends event to Trophyconst response = await viewFlashcard();if (!response) { return;}// Show toast if user has extended their streakif (response.currentStreak?.extended) { toast({ title: "You're on a roll!", description: `Keep going to keep your ${response.currentStreak.length} day streak!`, });}
curl --request GET \ --url https://api.trophy.so/v1/users/{id}/streak \ --header 'X-API-KEY: <api-key>'
Esta API no solo devuelve datos sobre la racha actual del usuario como length y expires, sino que también puede devolver datos históricos de rachas que se pueden usar para mostrar cualquier tipo de interfaz de racha que desees a través del parámetro historyPeriods.
Trophy también admite congelación de rachas, lo que puede ayudar a evitar que los usuarios pierdan su racha si accidentalmente se pierden un periodo.Obtén más información sobre la congelación de rachas en la documentación dedicada de congelación de rachas.
