スタートガイド

インストール

AIアシストによるセットアップでプラグインをインストールできます。以下のコマンドを使用して、お使いのAIツールに Capgo のスキルを追加してください：

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

次に、以下のプロンプトを使用します：

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 ガイドに従い、 プロジェクトキー、リプレイ設定、ダッシュボードのセットアップを行ってください。

クイックスタート

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

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

よくある落とし穴

• optIn の前に同意状況を確認してください。
• ダッシュボードキーを設定してください。
• リプレイのプライバシールールに従ってください。

基本的な使い方

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のナビゲーションスタック間で、命名規則を統一してください。
• アプリがフォアグラウンドに戻った際は、画面名と重要な動的変数を再送信してください。

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のアプリ内機能では、追加のディープリンク設定を次の iOSの設定 ページで完了してください。
• Androidでは、プラグイン自体に追加のマニフェスト設定は不要です。次を参照: Androidの注意点 （ロギングとバリデーションのヒント）。

備考

• このプラグインは、公式のContentsquare Capacitor パッケージの Capacitor 8 コミュニティ移植版です。
• JavaScriptの API は最新のContentsquare Capacitor ドキュメントに準拠していますが、パッケージングと Native Build のセットアップは Capacitor 8 を対象としています。

Getting Startedの続きを進める

使用している場合 スタートガイド ネイティブプラグインの作業を計画するには、次と連携してください： @capgo/capacitor-contentsquare の使い方 @capgo/capacitor-contentsquare の使用時のネイティブ機能については、 Capgo プラグインディレクトリ Capgo プラグインディレクトリのプロダクトワークフローについては、 Capgo による Capacitor プラグイン Capgo による Capacitor プラグインの実装詳細については、 プラグインの追加または更新 プラグインの追加または更新における実装詳細については、および Ionic Enterprise プラグインの代替案 Ionic Enterprise プラグインの代替案におけるプロダクトワークフローについては。