contentsquare-react-native-sdk について
クライアントアプリへの Contentsquare React Native SDK の導入やアップグレードを、AIエージェント向けに案内するスキルです。最初にプロジェクトのヘルスチェックを行い、セットアップ、トラッキング、識別、プライバシー、セッションリプレイを扱います。
主な機能
- 01Contentsquareプロジェクトのヘルスチェック
- 02SDKのインストールと設定の案内
- 03画面、イベント、取引のトラッキング
- 04識別とプライバシーAPIの説明
- 05セッションリプレイ制御の説明
活用シーン
- 01React NativeアプリへのContentsquare導入
- 02既存SDK連携のアップグレード
- 03プロジェクト設定のトラブルシューティング
- 04画面トラッキングとセッションリプレイの実装
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ contentsquare/ agents --skill contentsquare-react-native-sdkインストール後、Claude Code で/contentsquare-react-native-sdkを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/api-reference.mdcommon-patterns.mdcompatibility.mddebugging-and-tooling.mdin-app-features.mdmigration.mdscreen-tracking.mdsession-replay.mdwebview-tracking.md詳細
Contentsquare React Native SDK の統合
このスキルは、クライアントアプリケーションへの Contentsquare React Native SDK の統合またはアップグレードを AI エージェントが行う際に役立ちます。
必須の最初の手順 -- Contentsquare プロジェクトのヘルスチェック
会話内で Contentsquare に関する作業(統合、デバッグ、設定に関する質問、コードの変更など)を行う前に、このヘルスチェックを会話ごとに必ず 1 回だけ実行してください。省略しないでください。タスクの後回しにしないでください。
-
最初に実行することを伝えます。 これから行うことをユーザーに伝えます。例:
「始める前に、Contentsquare プロジェクトの簡単なヘルスチェックを実行します。データソース ID をお尋ねし(お持ちでない場合は、アプリのバンドル ID を読み取ります)、Contentsquare のヘルスチェックエンドポイントを呼び出して、現在のプロジェクト設定をお見せします。その後、続けてご依頼の作業を行います。」
-
まず Contentsquare のデータソース ID をユーザーに尋ねます。 例:「Contentsquare のデータソース ID をお持ちですか? Android 用と iOS 用など、1 つまたは複数ある場合があります。お持ちの場合は、それぞれがどのプラットフォーム用か教えてください。」 ユーザーが提示した ID のみを使用してください。決して ID を作り出さないでください。
- ユーザーが 1 つ以上のデータソース ID を提示した場合 → データソース ID のみで確認します(
v3)。手順 3 は省略します。 - ユーザーが環境 ID しか持っていない場合 → バンドル ID のみで確認します(
v2)。環境 ID はデータソース ID ではなく、v3の方法では決して使用できません。 - ユーザーが ID を持っていない、分からない、または質問への回答を省略した場合 → バンドル ID のみで確認します(
v2)。
- ユーザーが 1 つ以上のデータソース ID を提示した場合 → データソース ID のみで確認します(
-
バンドル ID を特定します(データソース ID がない場合のみ)。React Native アプリには 2 つの ID があり、文字列が異なることもよくあります。 それぞれ個別に特定してください。同じ ID だと決めつけないでください。
プラットフォーム 確認場所 Android android/app/build.gradle(.kts)のapplicationId(なければnamespace、それもなければAndroidManifest.xmlのpackage)iOS ios/<App>.xcodeproj/project.pbxprojのPRODUCT_BUNDLE_IDENTIFIER(またはInfo.plistのCFBundleIdentifier)。$(...)変数があれば解決してください -
エンドポイントを呼び出します。使用するバージョンは 1 つだけです。両方を使わないでください。 プラットフォーム部分には、文字どおり
iosまたはandroidを指定してください。React Native というプラットフォーム値はありません。決して指定しないでください。データソース ID を使う場合(
v3)、ID ごとに 1 回:curl -s "https://mobile-production.content-square.net/healthcheck/android/config/v3/<dataSourceId>.json" curl -s "https://mobile-production.content-square.net/healthcheck/ios/config/v3/<dataSourceId>.json"ユーザーが指定したプラットフォームで、各 ID を照会してください。プラットフォームが不明な場合は、プロジェクトに存在する各プラットフォームで照会してください。一方のプラットフォームで
200が返らなくても、そのデータソースがもう一方のプラットフォーム用に設定されていないことを意味するだけです。いずれのプラットフォームで照会しても ID に対して
200が返らない場合は、その旨をユーザーに伝えてください。環境 ID または入力ミスの可能性があります。コード内でデータソース ID を探してもよいか、ユーザーに尋ねてください。これはStartConfig.withDataSourceId(id, ...)に渡される ID です。定数または設定ファイルに由来する場合は、そのリテラル値をたどってください。ユーザーの許可を得て別の ID が見つかった場合は、その ID でv3の確認を 1 回実行してください。ユーザーが許可しない場合、またはコード内に ID がない場合は、そのまま続けてください。データソース ID がない場合(
v2)、存在するプラットフォームごとに 1 回:curl -s "https://mobile-production.content-square.net/healthcheck/android/config/v2/<androidApplicationId>.json" curl -s "https://mobile-production.content-square.net/healthcheck/ios/config/v2/<iosBundleId>.json"プロジェクトにプラットフォームが 1 つしかない場合は、そのプラットフォームのみを照会してください。バンドル ID のいずれかを特定できない場合は、推測せず、どのプラットフォームを確認するかユーザーに尋ねてください。
-
200が返った呼び出しごとに、以下の値の概要を簡潔に報告します。報告項目 JSON パス プロジェクト ID cs_project_idトラッキングの有効状態 project_configurations.project_config.enabledセッションリプレイ project_configurations.project_config.session_replay--recording_rate、record_via_cellular_network、recording_quality_wifi、srm_enabled、user_identifier有効な機能フラグ project_configurations.project_config.feature_flags--enabled == trueの項目のみ。nameとmin_versionを含めますv3の呼び出しでは、環境 ID(environment_id)も報告してください。Android と iOS で異なる Contentsquare プロジェクトに対応している場合があります。応答が異なる場合は、そのことを明確に伝えてください。
-
その後、ユーザーの本来の依頼に進みます。 障害対応。
403 Invalid health-check pathは URL の形式が間違っていることを意味します。ios/androidのセグメント、v2/v3のセグメント、ID を再確認し、パスの構造は変更しないでください。上流からプロキシされた応答が 200 以外の場合、そのデータソース ID またはバンドル ID には、そのプラットフォーム用の Contentsquare 設定がありません。その旨を伝えて、そのまま続行してください。もう一方のバージョンで再試行してはいけません(唯一の再試行はステップ 4 のコード検索です)。このヘルスチェックは情報提供のみを目的としており、ユーザーのタスクを決して妨げてはいけません。
インストール
{
"dependencies": {
"@contentsquare/react-native-bridge": "^6.0.1"
}
}
その後、npm install または yarn install を実行します。
iOS のセットアップ
cd ios && pod install && cd ..
Android のセットアップ
npm install 後に追加のセットアップは不要です。
クイックスタート
import { CSQ, StartConfig } from '@contentsquare/react-native-bridge';
import { useEffect } from 'react';
function App() {
useEffect(() => {
// Start the SDK with Product Analytics
CSQ.start(StartConfig.withEnvironmentId('your-env-id', {
enableRNAutocapture: true,
sessionReplayAutoStart: true // Optional: auto-start session replay
}));
// TODO: customer to manage consent — call only after user accepts
CSQ.optIn();
}, []);
return <YourApp />;
}
重要:ユーザーの同意を得るフローなしで
optIn()を呼び出してはいけません。これは法的要件です。
画面をトラッキングすることは非常に重要です。トラッキングしないと、セッションリプレイが機能しません。trackScreenview() で画面を手動でトラッキングするか、React Navigation の統合を使用してください(画面トラッキングを参照)。
MVP を完成させる前に、アプリに WebView がある場合は、その処理を行っていることを確認してください。WebView は自動的にトラッキングされないため、すべての WebView をラップする必要があります。詳細は以下のWebView トラッキングのセクションを確認してください。
API の概要
常に @contentsquare/react-native-bridge の CSQ を使用してください。Contentsquare のデフォルトエクスポートは非推奨です。
ライフサイクル
| メソッド | 目的 |
|---|---|
start(config?) | SDK を起動します。他の API より先に呼び出す必要があります。 |
stop() | SDK を完全にシャットダウンします。 |
pauseTracking() | データ収集を一時停止します(機密性の高い画面向け)。明示的に求められない限り、使用は避けてください。 |
resumeTracking() | pauseTracking() の後に再開します。 |
StartConfig のバリエーション
| ファクトリー | 用途 | オンボーディングの優先順位 |
|---|---|---|
StartConfig.withDataSourceId(id, options?) | データソース ID を使用する CSQ | 新規クライアントに最初に推奨 — まずこれについて尋ねます |
StartConfig.withEnvironmentId(id, options?) | 環境 ID を使用する Product Analytics | データソース ID がない場合の第 2 候補 |
StartConfig.dxa() | Digital Experience Analytics のみ(デフォルト) | フォールバックのみ — どちらの ID もない場合、または DXA のみが明示的に求められた場合 |
withDataSourceId と withEnvironmentId は、同じ AnalyticsOptions オブジェクトを受け取ります(以下の AnalyticsOptions セクションを参照)。StartConfig.dxa() は引数を受け取りません。AnalyticsOptions パラメーターはありません。
推奨するオンボーディングフロー:
- ユーザーに 「Contentsquare のデータソース ID をお持ちですか?」 と尋ねます(ヘルスチェック中にすでに回答済みの場合は、この質問を省略します)。「はい」の場合は、
StartConfig.withDataSourceId(id, ...)を使用します。 - ない場合は、「環境 ID をお持ちですか?」 と尋ねます。「はい」の場合は、
StartConfig.withEnvironmentId(id, ...)を使用します。 - どちらもない場合(またはユーザーが DXA のみを明示的に希望する場合)に限り、
StartConfig.dxa()にフォールバックします。
ID を捏造してはいけません。確認せずに DXA をデフォルトとして選択してはいけません。
プライバシー
| メソッド | 目的 |
|---|---|
optIn() | デバイスをトラッキング対象にします。直ちに開始します。 |
optOut() | オプトアウトを永続化します。optIn() を呼び出すか、アプリを再インストールするまで停止します。 |
ID
| メソッド | コンテキスト | 目的 |
|---|---|---|
identify(userIdentifier) | Product Analytics | ユーザー ID を設定します。ID が異なると新しいセッションが開始されます。 |
resetIdentity() | Product Analytics | ID をクリアします。新しいセッションが開始されます。 |
sendUserIdentifier(userIdentifier) | DXA | ハッシュ化したユーザー ID を送信します。最大 100 文字です。 |
画面トラッキング
| メソッド | 目的 |
|---|---|
trackScreenview(screenName, customVars?) | オプションのカスタム変数を指定して、画面表示をトラッキングします。 |
CustomVar の構造:{ index: number, key: string, value: string } — index(1~20)、key(最大 50 文字)、value(最大 255 文字)。
React Navigation の例については、画面トラッキングの統合を参照してください。
トランザクション
import { CSQ, Currency } from '@contentsquare/react-native-bridge';
CSQ.trackTransaction({
price: 29.99,
currency: Currency.USD,
id: 'order_123'
});
Currency は ISO 4217 の列挙型です(例:Currency.USD、Currency.EUR)。
カスタムイベントとプロパティ
| メソッド | 目的 |
|---|---|
trackEvent(eventName, properties?) | 任意のプロパティを付けて、名前付きイベントを追跡します。 |
addDynamicVar(key, value, onError?) | セッションレベルの動的変数を追加します(DXA のみ)。 |
addUserProperties(properties) | ユーザーレベルのプロパティを設定します(PA のみ)。 |
addEventProperties(properties) | 今後のすべてのイベントにプロパティを設定します(PA のみ)。 |
removeEventProperty(name) | イベントプロパティを 1 つ削除します。 |
clearEventProperties() | すべてのイベントプロパティを削除します。 |
プロパティ値には string、number、boolean、bigint を指定する必要があります。それ以外の型は、何も通知されずに無視されます。
動的変数(DXA のみ):
key:文字列(最大 50 文字)value:文字列(最大 255 文字)または符号なし整数(0 ~ 2^32-1)onError:検証エラー時に呼び出される任意のコールバック
セッションリプレイ
| メソッド | 目的 |
|---|---|
startSessionReplay() | オンデマンドでセッションリプレイを開始します。sessionReplayAutoStart: false を start() に渡した場合に使用します。1 回限りであり、再起動用の API ではありません。 |
stopSessionReplay() | SDK を停止せずに、オンデマンドでセッションリプレイを停止します。終了操作であり、同じ SDK のライフタイム中に SR を再開することはできません。 |
オンデマンドのセッションリプレイ — SDK の起動時に自動開始を無効にし、手動で制御します。
CSQ.start(StartConfig.dxa());
// Note: sessionReplayAutoStart defaults to false, no need to pass options
// later, when you want SR to start (e.g., entering a checkout flow):
CSQ.startSessionReplay();
// and to stop it (final -- no restart afterwards):
CSQ.stopSessionReplay();
startSessionReplay/stopSessionReplayは、開始と停止のみを行い、一時停止/再開はできません。stopSessionReplay()の呼び出し後、次の SDK のライフタイムまで SR はオフのままです。
セッションメタデータ(リプレイリンクの取得)
リプレイ URL を含むセッション情報にアクセスします。onMetadataChange は登録解除関数を返します。リスナーを削除するには(例:コンポーネントのアンマウント時)、この関数を呼び出してください。
import { useEffect } from 'react';
useEffect(() => {
const unsubscribe = CSQ.onMetadataChange((metadata) => {
console.log('Session Replay URL:', metadata.sessionReplayUrl);
console.log('Session ID:', metadata.sessionID);
console.log('User ID:', metadata.userID);
});
return unsubscribe; // Cleanup on unmount
}, []);
Metadata のフィールド:projectID、environmentID、userID、identity、sessionID、sessionReplayUrl(文字列または null)。
デバッグ
| API | 目的 |
|---|---|
setLogLevel(LogLevel) | ログレベル(info、verbose など)を設定します。 |
setLogChannel(LogChannel) | ログの出力先チャンネルを設定します。 |
logToConsole() | コンソールへのログ出力を有効にします。 |
AnalyticsOptions(withDataSourceId と withEnvironmentId で共有)
StartConfig.dxa() は AnalyticsOptions を受け付けません。以下のオプションは withDataSourceId と withEnvironmentId にのみ適用されます。
すべてのフィールドは nullable です(undefined = ネイティブのデフォルト動作)。
| フィールド | 型 | 目的 |
|---|---|---|
enableRNAutocapture | boolean? | React Native の操作の自動キャプチャを有効にします(PA) |
sessionReplayAutoStart | boolean? | true の場合、SDK の起動時に SR が開始します。デフォルト:false |
uploadInterval | number? | アップロード間隔(ミリ秒、デフォルト:15000) |
baseUrl | string? | カスタム API エンドポイント(例:EU データレジデンシー向け) |
disablePageviewAutocapture | boolean? | 画面の自動追跡を無効にします |
disableInteractionAutocapture | boolean? | タッチの自動追跡を無効にします(iOS のみ) |
disableInteractionTextCapture | boolean? | 操作中のテキストキャプチャを無効にします(iOS のみ) |
disableInteractionAccessibilityLabelCapture | boolean? | アクセシビリティラベルのキャプチャを無効にします(iOS のみ) |
disablePageviewTitleAutocapture | boolean? | ページタイトルのキャプチャを無効にします(iOS のみ) |
enablePushNotificationAutocapture | boolean? | プッシュ通知イベントをキャプチャします |
enablePushNotificationTitleAutocapture | boolean? | プッシュ通知のタイトルをキャプチャします |
enablePushNotificationBodyAutocapture | boolean? | プッシュ通知の本文をキャプチャします |
セッションリプレイのマスキング
グローバルマスキング(setDefaultMasking)
import { CSQ } from '@contentsquare/react-native-bridge';
// Mask everything by default
CSQ.setDefaultMasking(true);
// Unmask everything (use with caution - privacy risk)
CSQ.setDefaultMasking(false);
重要:
setDefaultMaskingが受け取るのはブール値であり、設定オブジェクトではありません。グローバルマスキングを一括で適用するかどうかを指定します。setDefaultMaskingはCSQ.start(...)の後に呼び出す必要があります。start()の前に呼び出しても効果はありません。
コンポーネントごとのマスキング設定
import { CSQMask } from '@contentsquare/react-native-bridge';
<CSQMask isSessionReplayMasked={true}>
<Text>Sensitive content</Text>
</CSQMask>
注:isSessionReplayMasked は、Session Replay の画面上のマスキングを制御します。Product Analytics のイベントデータも制御するには、allow* プロパティを使用してください。
allow* プロパティによるきめ細かな制御(Product Analytics)
<CSQMask
isSessionReplayMasked={true} // Masks visual content in Session Replay
allowText={false} // Prevents text in PA events
allowInteraction={false} // Prevents interaction tracking in PA events
>
<TextInput placeholder="Password" />
</CSQMask>
重要:Session Replay の画面上のマスキングに影響するのは、isSessionReplayMasked のみです。allow* プロパティは、Product Analytics のイベントデータの収集を制御します。
CSQMask のプロパティ
| プロパティ | 型 | デフォルト | 目的 | 機能 |
|---|---|---|---|---|
isSessionReplayMasked | boolean? | true | 画面上のコンテンツをマスキングするかどうか | Session Replay |
ignoreTextOnly | boolean? | false | テキストのみを無視します(allow* と競合します) | Product Analytics |
allowInnerHierarchy | boolean? | false | イベントで内部のビュー階層を許可します | Product Analytics |
allowProps | boolean? | false | イベントでビューのプロパティを許可します | Product Analytics |
allowText | boolean? | false | イベントでテキストコンテンツを許可します | Product Analytics |
allowInteraction | boolean? | false | イベントでインタラクションの追跡を許可します | Product Analytics |
allowAccessibilityLabel | boolean? | false | イベントでアクセシビリティラベルを許可します | Product Analytics |
重要:Session Replay の画面上のマスキングに影響するのは、
isSessionReplayMaskedのみです。allow*プロパティは、Product Analytics のイベントデータの収集を制御します。ignoreTextOnlyがtrueの場合、すべてのallow*プロパティは無視されます。
高階コンポーネントによるマスキング
import { withCSQMask } from '@contentsquare/react-native-bridge';
const MaskedComponent = withCSQMask(SensitiveComponent, {
isSessionReplayMasked: true, // SR visual masking
allowText: false // Optional: PA event data masking
});
画面追跡の統合
手動での追跡
import { CSQ } from '@contentsquare/react-native-bridge';
import { useEffect } from 'react';
function ProductScreen() {
useEffect(() => {
CSQ.trackScreenview('ProductDetails', [
{ index: 1, key: 'product_id', value: '12345' }
]);
}, []);
return <ProductView />;
}
React Navigation との統合
React Navigation のナビゲーション状態リスナーを使用して、画面ビューを自動的に追跡します。
import { NavigationContainer } from '@react-navigation/native';
import { CSQ } from '@contentsquare/react-native-bridge';
function App() {
const navigationRef = useRef();
const routeNameRef = useRef();
return (
<NavigationContainer
ref={navigationRef}
onReady={() => {
routeNameRef.current = navigationRef.current?.getCurrentRoute()?.name;
}}
onStateChange={() => {
const previousRouteName = routeNameRef.current;
const currentRouteName = navigationRef.current?.getCurrentRoute()?.name;
if (previousRouteName !== currentRouteName) {
CSQ.trackScreenview(currentRouteName);
}
routeNameRef.current = currentRouteName;
}}
>
<YourNavigator />
</NavigationContainer>
);
}
その他の例については、references/screen-tracking.md を参照してください。
WebView の追跡
WebView は自動的には追跡されません。CSQWebView でラップすると、ネイティブコンテンツとウェブコンテンツ間のセッション連携が有効になります。ウェブページには、WebView モードの Contentsquare Web Tracking Tag を含める必要があります。
import { CSQWebView } from '@contentsquare/react-native-bridge';
import { WebView } from 'react-native-webview';
<CSQWebView>
<WebView source={{ uri: 'https://example.com' }} />
</CSQWebView>
従来のラッパー(非推奨。CSQWebView を使用してください):
import { CSWebView } from '@contentsquare/react-native-bridge';
<CSWebView>
<WebView source={{ uri: 'https://example.com' }} />
</CSWebView>
重要なルール
- 最初に環境 ID を確認する:統合する前に、ユーザーに Contentsquare の環境 ID(またはデータソース ID。ヘルスチェックで確認した回答を再利用してください)を尋ねてください。DXA のみのモードだと決めつけず、ID を作り上げず、この手順を省略しないでください。
- WebView を検索する:統合時に、既存の WebView の使用箇所(
react-native-webview、WebViewコンポーネント)をコードベース内で検索してください。WebView は自動的には追跡されないため、すべての WebView をCSQWebViewでラップする必要があります。 - ほかの CSQ メソッドを呼び出す前に、適切な設定を指定して
start(config)を呼び出してください optIn()を呼び出す前に、必ず同意フローを実装してください。自動的にオプトインしてはいけませんoptOut()は、optIn()が呼び出されるか、アプリが再インストールされるまで永続しますidentify()は Product Analytics 専用です。sendUserIdentifier()は DXA 専用です- プロパティ値には
string、number、boolean、bigintを指定する必要があります。それ以外の型(配列、オブジェクト)は、無視されるか、予期しない動作を引き起こす可能性があります CustomVarの制約:キーは最大 50 文字、文字列値は最大 255 文字、数値は 0 から 2^32-1userIdentifierは最大 100 文字です- React Native >= 0.71.0 が必要です(bridge v6.2.0+ は 0.71.0 以降のすべてのバージョンをサポートします)
- Android と iOS のみ対応しています(ウェブ、Expo Go、デスクトップには対応していません)
- 画面名、イベント名、プロパティ値に個人を特定できる情報(メールアドレス、パスワード、本名)を含めてはいけません
- 環境 ID をハードコードしてはいけません。設定または環境変数を使用してください
- Expo、ハイブリッドアプリ、既知の制限事項については、Compatibility Guide を確認してください
オートキャプチャ(Product Analytics)
オートキャプチャを有効にすると、手動で計測処理を追加せずに、ユーザーのインタラクションと画面遷移を自動的に追跡できます。
前提条件
babel.config.js にBabel プラグインをインストールします:
module.exports = {
presets: ['module:@react-native/babel-preset'],
plugins: ['@contentsquare/react-native-bridge/babel'],
};
Babel プラグインは、イベントにコンポーネント名を含めるために @babel/plugin-transform-react-display-name を必要とします。通常、これは React Native のデフォルトプリセットによって提供されます。
モノレポの設定:プロジェクトがモノレポ構成(Yarn Workspaces、pnpm、Lerna、Nx、Turborepo など)を使用している場合は、React Native のコードを含むパッケージ内のファイルも含め、プロジェクト内の関連するすべての babel.config.js ファイルにプラグインを追加してください。
自動キャプチャを有効にする
import { CSQ, StartConfig } from '@contentsquare/react-native-bridge';
CSQ.start(StartConfig.withEnvironmentId('your-env-id', {
enableRNAutocapture: true // Enable autocapture
}));
ナビゲーションライブラリの互換性
React Native Bridge の自動キャプチャ機能は、以下のナビゲーションライブラリと互換性があります:
- React Navigation:5.0 以降
- React Native Navigation:7.0 以降
自動キャプチャの対象
自動キャプチャでは、以下が自動的にトラッキングされます:
- タッチイベント(タップ、長押し、スワイプ)
- 変更イベント(テキスト入力、スイッチ、ピッカー、スライダー)
- 表示名付きのコンポーネント操作
- 画面遷移(有効な場合)
Experience Analytics との併用
Experience Analytics と Product Analytics の両方を使用する場合は、StartConfig.withDataSourceId を介して PA オプションを渡します:
CSQ.start(StartConfig.withDataSourceId('YOUR_DATA_SOURCE_ID', {
enableRNAutocapture: true,
disablePageviewAutocapture: true, // Let Experience Analytics handle screens
}));
ソースマップとクラッシュのシンボリケーション
本番環境で JavaScript のクラッシュスタックトレースを読みやすくするには、ソースマップのアップロードを設定します:
クイックセットアップ
-
Contentsquare CLI をインストールします:
yarn add @contentsquare/react-native-cli --dev -
API 認証情報とソースマップのパスを記載した
contentsquare-cli.jsonをプロジェクトのルートに作成します -
ビルドスクリプトを設定します:
- Android:
app/build.gradleにapply from: "../../node_modules/@contentsquare/react-native-cli/scripts/contentsquare.gradle"を追加します - iOS:Contentsquare CLI スクリプトを Xcode のビルドフェーズに追加します
- Android:
-
.gitignoreに追加します:contentsquare-cli.json contentsquare-sourcemap-info.json
セットアップ手順とトラブルシューティングの詳細については、デバッグとツールを参照してください。
プラットフォームのサポート
- Android:完全サポート
- iOS:完全サポート(iOS の互換性要件を確認してください)
- React Native:>= 0.71.0(バージョン 6.2.0 は 0.71.0 以降のすべての現行および将来のバージョンをサポートします)
- Expo:EAS(Expo Application Services)が必要です。互換性ガイドを参照してください
- サポート対象外:Web、Windows、macOS、Expo Go
重要:ハイブリッドアプリ(ネイティブアプリ内の React Native コンポーネント)は公式にはサポートされていません。ネイティブコードと React Native コードが混在するコードベースでは、ネイティブ画面にはネイティブ SDK を、React Native の画面には CSQ ブリッジを使用してください。
バージョンの詳細な対応表、Expo の設定、既知の制限事項については、互換性ガイドを参照してください。
リファレンスドキュメント
- API リファレンス - API ドキュメント一式
- 一般的なパターン - コード例とレシピ
- 画面トラッキング - React Navigation との連携パターン
- セッションリプレイ - 高度なマスキング方法
- デバッグとツール - 自動キャプチャの設定、ソースマップ、CLI ツール
- WebView トラッキング - WebView との連携とセッションの連結
- アプリ内機能 - デバッグツール、ログ、スクリーンショットのキャプチャ
- 互換性 - React Native のバージョン、Expo、既知の制限事項
- 移行ガイド - レガシー API の移行
- React Native SDK ドキュメント
- Android SDK ドキュメント
- iOS の互換性