시작하기

설치

AI-Assisted Setup으로 플러그인을 설치할 수 있습니다. 다음 명령어로 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 인앱 기능을 사용하려면 다음에서 추가 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 Plugin Directory의 제품 워크플로우에 맞춰, Capgo의 Capacitor 플러그인 Capgo의 Capacitor 플러그인 구현 상세 내용에 대해서는, 플러그인 추가 또는 업데이트 플러그인 추가 또는 업데이트 구현 상세 내용에 대해서는, Ionic Enterprise 플러그인 대안 Ionic Enterprise 플러그인 대안의 제품 워크플로우에 대해서는.