Ejemplos de Uso

Esta página muestra ejemplos prácticos de cómo utilizar los diferentes componentes del SDK. Cada ejemplo está diseñado para ser claro y fácil de implementar.

1. Feedback Widget

Configuración Básica

import { Feedback } from './path-to/feedback';

const feedback = new Feedback({
  tracker: yourTrackerInstance,
  position: 'bottom-right',  // Posición del botón
  themeColor: '#4f46e5',     // Color principal
  buttonText: 'Enviar Feedback',
  autoOpen: false            // No abrir automáticamente
});

// Mostrar el formulario manualmente
feedback.open();

Captura de Pantalla

// Configuración con captura de pantalla
const feedbackWithScreenshot = new Feedback({
  tracker: yourTrackerInstance,
  screenshot: {
    enabled: true,
    allowEdit: true,
    quality: 0.8
  },
  onSubmit: (data) => {
    console.log('Feedback recibido:', data);
    // Aquí puedes enviar los datos a tu backend
  }
});

2. Seguimiento de Sesiones

Inicialización Básica

import { SessionTracker } from '@your-sdk/core';

const session = new SessionTracker({
  appId: 'tu-app-id',
  sessionTimeout: 30, // minutos de inactividad
  recordClicks: true,
  recordScroll: true
});

// Iniciar seguimiento
session.start();

// Agregar etiquetas personalizadas
session.addTag('userRole', 'premium');

Manejo de Errores

// Manejo de errores con contexto
try {
  // Código que podría fallar
} catch (error) {
  session.addErrorTag({
    message: error.message,
    stack: error.stack,
    component: 'CheckoutForm',
    action: 'processPayment',
    orderId: currentOrderId
  });
}

3. Encuesta NPS (Net Promoter Score)

Configuración Básica

import { NPS } from './path-to/nps';

const nps = new NPS({
  tracker: yourTrackerInstance,
  question: '¿Qué tan probable es que recomiendes nuestro servicio?',
  themeColor: '#2563eb',
  position: 'bottom-center',
  autoShow: true,
  delay: 5000,  // Mostrar después de 5 segundos
  onRate: (score) => {
    console.log(`Puntuación recibida: ${score}`);
    // Lógica adicional basada en la puntuación
  }
});

Personalización Avanzada

const npsAdvanced = new NPS({
  // ...configuración básica...
  
  // Preguntas de seguimiento basadas en la puntuación
  followUpQuestions: {
    promoters: '¿Qué es lo que más te gusta de nuestro servicio?',
    passives: '¿Cómo podríamos mejorar?',
    detractors: '¿Qué podríamos hacer para mejorar tu experiencia?'
  },
  
  // Personalización de colores
  colors: {
    primary: '#4f46e5',
    text: '#1f2937',
    background: '#ffffff',
    buttonText: '#ffffff'
  }
});

4. Anuncios y Notificaciones

Notificación Simple

import { Announcement } from './path-to/announcement';

const announcement = new Announcement({
  tracker: yourTrackerInstance,
  title: '¡Nueva función disponible!',
  message: 'Prueba nuestra nueva función de búsqueda mejorada',
  type: 'info',
  duration: 10000,  // Se ocultará después de 10 segundos
  dismissible: true
});

Notificación con Acción

const announcementAction = new Announcement({
  title: '¡Oferta especial!',
  message: '50% de descuento en tu próxima compra',
  type: 'success',
  linkUrl: '/ofertas',
  linkText: 'Ver oferta',
  onClose: () => {
    console.log('El usuario cerró la notificación');
  },
  onClick: () => {
    console.log('El usuario hizo clic en la notificación');  
  }
});

5. Manejo de Errores

Configuración Global

// En tu archivo de configuración principal
window.onerror = function(message, source, lineno, colno, error) {
  if (session) {
    session.addErrorTag({
      message: message.toString(),
      stack: error?.stack || '',
      source: source,
      line: lineno,
      column: colno,
      url: window.location.href
    });
  }
  return false; // Permite que otros manejadores de errores se ejecuten
};

Error Personalizado

function logError(error, context = {}) {
  if (session) {
    session.addErrorTag({
      message: error.message,
      stack: error.stack,
      ...context,
      timestamp: new Date().toISOString(),
      userAgent: navigator.userAgent
    });
  }
  
  // Opcional: Enviar a un servicio de monitoreo
  if (window.Sentry) {
    Sentry.captureException(error, { extra: context });
  }
}

6. Integración con Frameworks

React

import { useEffect, useRef } from 'react';

export function FeedbackButton() {
  const feedbackRef = useRef(null);

  useEffect(() => {
    import('./path-to/feedback').then(module => {
      feedbackRef.current = new module.Feedback({
        tracker: yourTrackerInstance,
        // configuración...
      });
    });

    return () => {
      if (feedbackRef.current) {
        feedbackRef.current.destroy();
      }
    };
  }, []);

  return (
    <button onClick={() => feedbackRef.current?.open()}>
      Enviar Feedback
    </button>
  );
}

Vue 3

<template>
  <button @click="openFeedback">Enviar Feedback</button>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

let feedback = ref(null);

onMounted(async () => {
  const module = await import('./path-to/feedback');
  feedback.value = new module.Feedback({
    tracker: yourTrackerInstance,
    // configuración...
  });
});

onUnmounted(() => {
  if (feedback.value) {
    feedback.value.destroy();
  }
});

const openFeedback = () => {
  if (feedback.value) {
    feedback.value.open();
  }
};
</script>

7. Ejemplo de Seguimiento de Eventos

// Inicialización del tracker
const tracker = new SystemTracker({
  appId: 'tu-app-id',
  environment: process.env.NODE_ENV,
  version: '1.0.0'
});

// Ejemplo de evento personalizado
function trackButtonClick(buttonId) {
  tracker.trackEvent({
    category: 'UI Interaction',
    action: 'button_click',
    label: buttonId,
    value: 1
  });
}

// Ejemplo de seguimiento de página
function trackPageView(pageName) {
  tracker.trackPageView({
    url: window.location.pathname,
    title: document.title,
    pageName: pageName
  });
}

8. Manejo de Tiempo de Sesión

// Configurar tiempo de inactividad (30 minutos)
const session = new SessionTracker({
  sessionTimeout: 30,
  onSessionTimeout: () => {
    console.log('La sesión ha expirado');
    // Mostrar mensaje al usuario
    new Announcement({
      title: 'Sesión expirada',
      message: 'Tu sesión ha expirado por inactividad',
      type: 'warning',
      duration: 0,
      dismissible: false
    });
  },
  onSessionRenew: () => {
    console.log('Sesión renovada');
  }
});

Conclusión

Estos ejemplos cubren los casos de uso más comunes para cada componente del SDK. Puedes personalizar aún más cada instancia según las necesidades específicas de tu aplicación. Para más detalles, consulta la documentación de cada componente.