Primeros pasos

Instalación

Puedes usar nuestro setup asistido por IA para instalar el plugin. Añade las skills de Capgo a tu herramienta de IA con el siguiente comando:

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Luego usa el siguiente prompt:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-contentsquare` plugin in my project.

Si prefieres la configuración manual, instala el plugin ejecutando estos comandos y sigue las instrucciones de cada plataforma:

1. Instalar el plugin

   npm

   npm i @capgo/capacitor-contentsquare

   pnpm

   pnpm add @capgo/capacitor-contentsquare

   yarn

   yarn add @capgo/capacitor-contentsquare

   bun

   bun add @capgo/capacitor-contentsquare

2. Sincronizar plataformas nativas

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

3. Revisa la configuración del producto

   • Sigue la guía oficial de Contentsquare Capacitor para keys, settings de replay y el dashboard.

Inicio rápido

import { ContentsquarePlugin } from '@capgo/capacitor-contentsquare';

// Only call optIn() after the user has granted analytics consent.
if (userGrantedAnalyticsConsent) {
  await ContentsquarePlugin.optIn();
}

Errores comunes

• Respeta el consentimiento antes del optIn.
• Configura las keys del dashboard.
• Sigue las reglas de privacidad de replay.

Uso básico

import { ContentsquarePlugin, CurrencyCode } from '@capgo/capacitor-contentsquare';

const consentGranted = await requestAnalyticsConsent(); // your CMP / ATT flow
if (consentGranted) {
  await ContentsquarePlugin.optIn();
}

await ContentsquarePlugin.sendScreenName('Home');

await ContentsquarePlugin.sendTransaction({
  transactionValue: 29.99,
  transactionCurrency: CurrencyCode.EUR,
  transactionId: 'order-123',
});

await ContentsquarePlugin.sendDynamicVarWithStringValue({
  dynVarKey: 'store',
  dynVarValue: 'rome',
});

Consejos para nombrar pantallas

• Usa nombres estables en lugar de valores específicos del usuario.
• Mantén las mismas convenciones de nombres en los stacks de navegación de iOS y Android.
• Cuando la app vuelva al primer plano, reenvía el nombre de la pantalla y cualquier variable dinámica crítica.

Controles de privacidad de Replay

Usa los helpers de masking integrados para evitar que el contenido sensible aparezca en Session Replay:

await ContentsquarePlugin.excludeURLForReplay('/checkout/');

await ContentsquarePlugin.setCapturedElementsSelector('[data-cs-capture]');

await ContentsquarePlugin.setPIISelectors({
  PIISelectors: ['input[type="email"]', '.credit-card'],
  Attributes: [{ selector: 'input[name="email"]', attrName: 'value' }],
});

Configuración de la plataforma

• Para las funciones in-app en iOS, completa la configuración adicional de deeplinks en la iOS setup página.
• Android no requiere configuración adicional del manifest para el plugin; consulta las notas de Android para consejos de logging y validación.

Notas

• Este plugin es un port de la comunidad Capacitor 8 del paquete oficial de Contentsquare Capacitor.
• El API de JavaScript se mantiene alineado con la documentación actual de Contentsquare Capacitor, mientras que el empaquetado y la configuración de Native Build están orientados a Capacitor 8.

Continúa desde Getting Started

Si estás usando Primeros pasos para planificar el trabajo con plugins nativos, conéctalo con Uso de @capgo/capacitor-contentsquare para la capacidad nativa en Uso de @capgo/capacitor-contentsquare, Directorio de plugins de Capgo para el flujo de trabajo del producto en Capgo Plugin Directory, Plugins de Capacitor por Capgo para el detalle de implementación en los Plugins de Capacitor por Capgo, Añadir o actualizar plugins para el detalle de implementación en Agregar o actualizar plugins, y Alternativas a plugins de Ionic Enterprise para el flujo de trabajo del producto en Alternativas a plugins de Ionic Enterprise.