diff --git a/astro.config.mjs b/astro.config.mjs index 545af0eee..b589f5001 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -208,6 +208,11 @@ export default defineConfig({ description: 'Microsoft Application Insights analytics plugin', paths: ['docs/plugins/appinsights/**'], }, + { + label: 'Plugin Contentsquare', + description: 'Contentsquare mobile analytics and session replay plugin', + paths: ['docs/plugins/contentsquare/**'], + }, { label: 'Plugin AppsFlyer', description: 'AppsFlyer mobile attribution, analytics, and deep linking plugin', @@ -866,6 +871,16 @@ export default defineConfig({ ], collapsed: true, }, + { + label: 'Contentsquare', + items: [ + { label: 'Overview', link: '/docs/plugins/contentsquare/' }, + { label: 'Getting started', link: '/docs/plugins/contentsquare/getting-started' }, + { label: 'iOS setup', link: '/docs/plugins/contentsquare/ios' }, + { label: 'Android notes', link: '/docs/plugins/contentsquare/android' }, + ], + collapsed: true, + }, { label: 'AppsFlyer', items: [ diff --git a/public/icons/plugins/contentsquare.svg b/public/icons/plugins/contentsquare.svg new file mode 100644 index 000000000..fdcefe8e8 --- /dev/null +++ b/public/icons/plugins/contentsquare.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/config/plugins.ts b/src/config/plugins.ts index b618409d7..010f70190 100644 --- a/src/config/plugins.ts +++ b/src/config/plugins.ts @@ -284,6 +284,14 @@ export const actions = [ title: 'AppInsights', icon: 'ChartBar', }, + { + name: '@capgo/capacitor-contentsquare', + author: 'github.com/Cap-go', + description: 'Track mobile consent, screenviews, transactions, dynamic variables, and session replay with Contentsquare', + href: 'https://github.com/Cap-go/capacitor-contentsquare/', + title: 'Contentsquare', + icon: 'ChartBar', + }, { name: '@capgo/capacitor-app-attest', author: 'github.com/Cap-go', diff --git a/src/content/docs/docs/plugins/contentsquare/android.mdx b/src/content/docs/docs/plugins/contentsquare/android.mdx new file mode 100644 index 000000000..d4f7987a4 --- /dev/null +++ b/src/content/docs/docs/plugins/contentsquare/android.mdx @@ -0,0 +1,41 @@ +--- +title: Android Notes +description: Android-specific validation and behavior notes for the Contentsquare Capacitor 8 plugin. +sidebar: + order: 4 +--- + +Android does not require extra host-app setup for the plugin itself. Once installed and synced, the plugin registers the main Capacitor `WebView`, injects the Contentsquare event bridge, and exposes the documented JavaScript APIs. + +## What the plugin does on Android + +- Registers the Capacitor `WebView` with the native Contentsquare SDK. +- Exposes `optIn`, `optOut`, `sendScreenName`, `sendTransaction`, and dynamic variable APIs. +- Injects replay-related commands such as URL exclusion, PII masking, and captured element selectors. + +## Validation tips + +### Check native logs + +Filter Android Studio `Logcat` with: + +```text +CSLIB +``` + +You should see the native Contentsquare SDK startup message and the WebView bridge registration during app launch. + +### Track a first session + +```ts +await ContentsquarePlugin.optIn(); +await ContentsquarePlugin.sendScreenName('Home'); +``` + +Without at least one screenview, the session is not kept by Contentsquare. + +## Dynamic variable constraints + +- Keys are limited by Contentsquare to 512 characters. +- Values must be either a string or a non-negative integer. +- If you want a value on every session, send it again when the app returns to foreground. diff --git a/src/content/docs/docs/plugins/contentsquare/getting-started.mdx b/src/content/docs/docs/plugins/contentsquare/getting-started.mdx new file mode 100644 index 000000000..d5c65d171 --- /dev/null +++ b/src/content/docs/docs/plugins/contentsquare/getting-started.mdx @@ -0,0 +1,72 @@ +--- +title: Getting Started +description: Install and use Contentsquare in a Capacitor 8 app with consent gating, screenviews, transactions, and dynamic variables. +sidebar: + order: 2 +--- + +## Install (Bun) + +```bash +bun add @capgo/capacitor-contentsquare +bunx cap sync +``` + +## Gate tracking on consent + +Users are opted out by default. Only call `optIn()` after your consent flow allows tracking, and keep `optOut()` in the same privacy layer so UI components do not accidentally emit events. + +## Send a first screenview + +Contentsquare discards sessions that have no screenview. Send a screen name as soon as a meaningful screen is visible (for example after your first route transition settles). + +```ts +import { ContentsquarePlugin, CurrencyCode } from '@capgo/capacitor-contentsquare'; + +await ContentsquarePlugin.optIn(); + +await ContentsquarePlugin.sendScreenName('Home'); + +// Track a purchase only once the app has a confirmed outcome (receipt / server confirmation). +await ContentsquarePlugin.sendTransaction({ + transactionValue: 29.99, + transactionCurrency: CurrencyCode.EUR, + transactionId: 'order-123', +}); + +await ContentsquarePlugin.sendDynamicVar({ + dynVarKey: 'store', + dynVarValue: 'rome', +}); +``` + +## Screen naming tips + +- Use stable names (avoid user-specific strings). +- Keep the same naming conventions across iOS and Android navigation stacks. +- When reopening the app, resend key context (screen name and relevant dynamic vars). + +## Session replay helpers (optional) + +```ts +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' }, + ], +}); +``` + +## Platform setup + +- For iOS in-app features, complete the extra deeplink wiring in the [iOS setup](/docs/plugins/contentsquare/ios/) page. +- Android requires no extra manifest wiring for the plugin itself; see [Android notes](/docs/plugins/contentsquare/android/) for logging and validation tips. + +## Notes + +- This plugin is a Capacitor 8 community port of the official Contentsquare Capacitor package. +- The JavaScript API matches the current Contentsquare Capacitor docs, while the packaging and native build setup target Capacitor 8. diff --git a/src/content/docs/docs/plugins/contentsquare/index.mdx b/src/content/docs/docs/plugins/contentsquare/index.mdx new file mode 100644 index 000000000..12d3ca5ac --- /dev/null +++ b/src/content/docs/docs/plugins/contentsquare/index.mdx @@ -0,0 +1,41 @@ +--- +title: "@capgo/capacitor-contentsquare" +description: Contentsquare analytics and session replay integration for Capacitor 8 apps. +sidebar: + order: 1 + label: "Introduction" +hero: + tagline: Add Contentsquare consent gating, screen analytics, transactions, dynamic variables, and replay controls to your Capacitor app. + image: + file: ~public/icons/plugins/contentsquare.svg + actions: + - text: Get started + link: /docs/plugins/contentsquare/getting-started/ + icon: right-arrow + variant: primary + - text: Github + link: https://github.com/Cap-go/capacitor-contentsquare/ + icon: external + variant: minimal +--- + +This plugin wraps the Contentsquare mobile SDKs and exposes the same JavaScript API shape as the upstream Capacitor package, packaged for Capgo's Capacitor 8 toolchain. + +## What you can do + +- Gate tracking with `optIn()` and `optOut()` from your consent layer. +- Send screenviews with `sendScreenName()` (required for sessions to be kept). +- Track purchases with `sendTransaction()`. +- Enrich sessions with `sendDynamicVar()`. +- Configure replay masking and capture via the replay helper methods. + +## Versions + +- iOS SDK: 4.45.4 +- Android SDK: 4.43.3 + +## Next steps + +- Follow [Getting Started](/docs/plugins/contentsquare/getting-started/) for install plus your first events. +- If you use Contentsquare in-app tooling on iOS, complete [iOS setup](/docs/plugins/contentsquare/ios/). +- For Android validation tips, see [Android notes](/docs/plugins/contentsquare/android/). diff --git a/src/content/docs/docs/plugins/contentsquare/ios.mdx b/src/content/docs/docs/plugins/contentsquare/ios.mdx new file mode 100644 index 000000000..33c27dcbb --- /dev/null +++ b/src/content/docs/docs/plugins/contentsquare/ios.mdx @@ -0,0 +1,71 @@ +--- +title: iOS Setup +description: Configure the required iOS deeplink hooks for Contentsquare in-app features in Capacitor apps. +sidebar: + order: 3 +--- + +Contentsquare tracking starts automatically once the plugin is installed, but iOS in-app features such as SDK logs, screenshot capture, and replay configuration still need the upstream URL handling setup. + +## 1. Add the URL scheme + +Add `cs-$(PRODUCT_BUNDLE_IDENTIFIER)` to your app URL schemes in Xcode or your host app's `Info.plist`. + +```xml +CFBundleURLTypes + + + CFBundleURLSchemes + + cs-$(PRODUCT_BUNDLE_IDENTIFIER) + + + +``` + +## 2. Forward Contentsquare deeplinks + +Wherever your Capacitor host app handles incoming URLs, forward them to the native SDK: + +### AppDelegate + +```swift +import ContentsquareModule + +func application( + _ app: UIApplication, + open url: URL, + options: [UIApplication.OpenURLOptionsKey : Any] = [:] +) -> Bool { + Contentsquare.handle(url: url) + return true +} +``` + +### SceneDelegate + +```swift +import ContentsquareModule + +func scene(_ scene: UIScene, openURLContexts urlContexts: Set) { + if let url = urlContexts.first?.url { + Contentsquare.handle(url: url) + } +} +``` + +### SwiftUI + +```swift +import ContentsquareModule + +.onOpenURL { url in + Contentsquare.handle(url: url) +} +``` + +## 3. Validate the installation + +- Launch the app on a device or simulator. +- Filter Xcode or Console logs with `CSLIB`. +- Open the Contentsquare mobile tooling and trigger in-app features to confirm the deeplink is handled. diff --git a/src/content/docs/docs/plugins/index.mdx b/src/content/docs/docs/plugins/index.mdx index 2b090611e..c7c1c1955 100644 --- a/src/content/docs/docs/plugins/index.mdx +++ b/src/content/docs/docs/plugins/index.mdx @@ -268,6 +268,11 @@ The Updater plugin is the foundation of Capgo Cloud, enabling you to: description="Application insights and analytics using the Apptopia AppInsights SDK." href="/docs/plugins/appinsights/" /> +