Erste Schritte

Installation

Du kannst unser KI-gestütztes Setup nutzen, um das Plugin zu installieren. Füge die Capgo Skills mit dem folgenden Befehl deinem KI-Tool hinzu:

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

Nutze dann diesen Prompt:

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

Wenn du ein manuelles Setup bevorzugst, installiere das Plugin mit den folgenden Befehlen und befolge die plattformspezifischen Anweisungen unten:

1. Plugin installieren

   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. Native Plattformen synchronisieren

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

3. Überprüfe die Konfiguration des Upstream-Produkts

   • Folge der offiziellen Contentsquare Capacitor Anleitung für Project Keys, Replay-Einstellungen und Dashboard-Setup.

Quickstart

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

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

Häufige Stolperfallen

• Vor optIn Einwilligung einholen.
• Konfiguriere die Dashboard-Keys.
• Beachte die Replay-Datenschutzregeln.

Basic usage

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

Tipps zum Screen-Naming

• Verwende stabile Namen statt benutzerspezifischer Werte.
• Verwenden Sie über iOS- und Android-Navigationsstacks hinweg dieselben Benennungskonventionen.
• Wenn die App in den Vordergrund zurückkehrt, sende den Screen-Namen und alle kritischen dynamischen Variablen erneut.

Replay-Datenschutzeinstellungen

Nutze die integrierten Masking-Helfer, um sensible Inhalte aus dem Session Replay fernzuhalten:

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

Plattform-Setup

• Für iOS-In-App-Features ist die zusätzliche Deeplink-Konfiguration auf der iOS-Setup Seite.
• Android benötigt keine zusätzliche Manifest-Konfiguration für das Plugin selbst; siehe Android-Hinweise für Tipps zu Logging und Validierung.

Notizen

• Dieses Plugin ist ein Community-Port für Capacitor 8 des offiziellen Contentsquare-Capacitor-Pakets.
• Die JavaScript API entspricht der aktuellen Contentsquare Capacitor Dokumentation, während das Packaging und das __Native Build__ Setup auf Capacitor 8 ausgerichtet sind.

Weiter geht's nach Getting Started

Wenn du es nutzt Erste Schritte Um die Arbeit an nativen Plugins zu planen, verbinde sie mit Verwendung von @capgo/capacitor-contentsquare für die native Funktion in „Verwendung von @capgo/capacitor-contentsquare“, Capgo Plugin-Verzeichnis für den Produkt-Workflow im Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für das Implementierungsdetail in Capacitor Plugins von Capgo, Plugins hinzufügen oder aktualisieren für das Implementierungsdetail beim Hinzufügen oder Aktualisieren von Plugins, und Ionic Enterprise Plugin-Alternativen für den Produkt-Workflow bei den Ionic Enterprise Plugin-Alternativen.