快速入门

安装

你可以使用我们的 AI 辅助设置来安装插件。使用以下命令将 Capgo skills 添加到你的 AI 工具中：

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

然后使用以下 prompt：

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

如果你更想手动设置，请运行以下命令安装插件，并按照下方各平台的说明操作：

1. 安装插件

   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. 同步原生平台

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

3. 检查上游产品配置

   • 请参考官方 Contentsquare Capacitor 指南 获取项目密钥、回放设置及 dashboard 配置。

快速入门

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

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

常见坑点

• 在 optIn 前请确保已获得用户同意。
• 配置 dashboard 密钥。
• 遵守回放隐私规则。

基础用法

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

屏幕命名技巧

• 使用稳定的名称，避免使用用户特定的值。
• 在 iOS 和 Android 的导航栈中保持一致的命名规范。
• 当 App 回到前台时，请重新发送屏幕名称及任何关键的动态变量。

Replay 隐私控制

使用内置的遮罩辅助工具，防止敏感内容进入 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' }],
});

平台设置

• 若需实现 iOS 应用内功能，请在以下文档中完成额外的 deeplink 配置： iOS 配置 页面中再次说明。
• Android 端无需为插件本身进行额外的 manifest 配置；请参阅 Android 注意事项 以获取日志记录和验证方面的技巧。

备注

• 此插件是官方 Contentsquare Capacitor 包的 Capacitor 8 社区移植版。
• JavaScript API 与当前的 Contentsquare Capacitor 文档保持一致，而打包和 Native Build 设置则针对 Capacitor 8。

从入门指南继续

如果你正在使用 快速入门 要规划原生插件工作，请将其与 使用 @capgo/capacitor-contentsquare 用于“使用 @capgo/capacitor-contentsquare”中的原生能力， Capgo 插件目录 查看 Capgo 插件目录中的产品工作流， Capgo 提供的 Capacitor 插件 查看由 Capgo 提供的 Capacitor 插件中的实现细节， 添加或更新插件 关于“添加或更新插件”中的实现细节，以及 Ionic Enterprise 插件替代方案 关于“Ionic Enterprise 插件替代方案”中的产品工作流。