adstage
Mobile SDKDeep Link

React Native

คู่มือการเชื่อมต่อ In-App Event ของ AdStage (React Native)

สารบัญ

  1. ภาพรวม
  2. การติดตั้ง
  3. การเริ่มต้นใช้งาน SDK
  4. การส่งอีเวนต์
  5. แค็ตตาล็อกอีเวนต์มาตรฐาน
  6. อีเวนต์แบบกำหนดเอง
  7. การตั้งค่าแอตทริบิวต์ของผู้ใช้
  8. การแก้ไขปัญหา

ภาพรวม

AdStage In-App Event SDK สำหรับ React Native มีฟีเจอร์ดังต่อไปนี้:

  • อีเวนต์มาตรฐาน: อีเวนต์ที่กำหนดไว้ล่วงหน้า 49 รายการ (การซื้อ, การสมัครสมาชิก, การเลื่อนระดับ ฯลฯ)
  • อีเวนต์ที่ปลอดภัยด้านชนิดข้อมูล: การส่งอีเวนต์ที่ปลอดภัยด้านชนิดข้อมูลบนพื้นฐานของ TypeScript
  • อีเวนต์แบบกำหนดเอง: กำหนดชื่ออีเวนต์และพารามิเตอร์ได้อย่างอิสระ
  • แอตทริบิวต์ของผู้ใช้: การระบุตัวตนและการจัดการแอตทริบิวต์ของผู้ใช้
  • ข้ามแพลตฟอร์ม: API เดียวกันสำหรับ Android/iOS

การติดตั้ง

การติดตั้งผ่าน npm / yarn

# npm
npm install @adstage/react-native-sdk
 
# yarn
yarn add @adstage/react-native-sdk

การติดตั้งดีเพนเดนซีของ iOS

cd ios && pod install

การตั้งค่าเพิ่มเติมตามแพลตฟอร์ม

สำหรับการตั้งค่าโดยละเอียดตามแพลตฟอร์ม โปรดดู คู่มือ Deep Link


การเริ่มต้นใช้งาน SDK

import { AdStage } from '@adstage/react-native-sdk';
 
// 앱 시작 시 초기화
const initializeAdStage = async () => {
  try {
    await AdStage.initialize({
      apiKey: 'your-api-key-here',
      serverUrl: 'https://api.adstage.app', // 선택사항 (기본값: https://api.adstage.app)
    });
    
    console.log('✅ AdStage SDK 초기화 완료');
  } catch (error) {
    console.error('❌ AdStage 초기화 실패:', error);
  }
};

การส่งอีเวนต์

การส่งอีเวนต์พื้นฐาน

import { AdStage } from '@adstage/react-native-sdk';
 
// 커스텀 이벤트 전송
const result = await AdStage.event.track('button_click', {
  button_id: 'purchase_btn',
  screen_name: 'product_detail',
});
 
if (result.success) {
  console.log('✅ 이벤트 전송 성공');
} else {
  console.error('❌ 이벤트 전송 실패:', result.error);
}

โครงสร้าง TrackEventResult

interface TrackEventResult {
  success: boolean;
  eventId?: string;
  error?: string;
}

แค็ตตาล็อกอีเวนต์มาตรฐาน

AdStage SDK มีอีเวนต์มาตรฐาน 49 รายการ คุณสามารถส่งอีเวนต์ผ่านเมธอดที่ปลอดภัยด้านชนิดข้อมูลได้

👤 วงจรชีวิตของผู้ใช้

// 1. 앱 최초 실행
await AdStage.event.trackFirstOpen();
 
// 2. 회원가입 시작
await AdStage.event.trackSignUpStart();
 
// 3. 회원가입 완료 ⭐
//    method 인자에는 가입 방법(email, google, apple, kakao, naver 등)을 전달
await AdStage.event.trackSignUp('email');
 
// 4. 로그인 ⭐
//    method 인자에는 로그인 방법(email, google, apple, kakao, naver 등)을 전달
await AdStage.event.trackLogin('kakao');
 
// 5. 로그아웃
await AdStage.event.trackLogout();

📱 การดูเนื้อหา

// 1. 홈 화면 조회
await AdStage.event.trackHomeView();
 
// 2. 상품 목록 조회 (인자는 상품 카테고리)
await AdStage.event.trackProductListView('여성의류');
 
// 3. 검색 결과 조회 (인자는 검색어)
await AdStage.event.trackSearchResultView('무선 이어폰');
 
// 4. 상품 상세 조회
await AdStage.event.trackProductDetailsView({
  itemId: 'PROD_123',
  itemName: 'Wireless Earbuds',
});
 
// 5. 페이지 조회 (웹뷰)
await AdStage.event.trackPageView({
  pageUrl: 'https://example.com/products',
  pageTitle: 'Products',
});
 
// 6. 화면 조회 (앱)
await AdStage.event.trackScreenView({
  screenName: 'product_detail',
  screenClass: 'ProductDetailScreen',
});
 
// 7. 콘텐츠 선택
await AdStage.event.trackSelectContent({
  contentType: 'banner',
  contentId: 'BANNER_001',
});

🛒 อีคอมเมิร์ซ (7 รายการ)

// 1. 장바구니 추가
await AdStage.event.trackAddToCart({
  items: [
    {
      itemId: 'PROD_123',
      itemName: 'Wireless Earbuds',
      price: 99000,
      quantity: 1,
    },
  ],
  value: 99000,
  currency: 'KRW',
});
 
// 2. 장바구니 제거
await AdStage.event.trackRemoveFromCart({
  items: [{ itemId: 'PROD_123', itemName: 'Wireless Earbuds' }],
  value: 99000,
  currency: 'KRW',
});
 
// 3. 위시리스트 추가
await AdStage.event.trackAddToWishlist({
  itemId: 'PROD_456',
  itemName: 'Smart Watch',
  value: 350000,
  currency: 'KRW',
});
 
// 4. 결제 정보 입력
await AdStage.event.trackAddPaymentInfo({
  paymentMethod: 'credit_card',
});
 
// 5. 결제 시작
await AdStage.event.trackBeginCheckout({
  items: [{ itemId: 'PROD_123', itemName: 'Wireless Earbuds' }],
  value: 99000,
  currency: 'KRW',
  coupon: 'SUMMER10',
});
 
// 6. 구매 완료 ⭐⭐⭐
await AdStage.event.trackPurchase({
  value: 129000,
  currency: 'KRW',
  transactionId: 'ORDER_20250105_001',
  tax: 12900,
  shipping: 3000,
  coupon: 'SUMMER2025',
  paymentMethod: 'credit_card',
  items: [
    {
      itemId: 'PROD_123',
      itemName: 'Wireless Earbuds',
      itemCategory: 'electronics',
      price: 126000,
      quantity: 1,
    },
  ],
});
 
// 7. 환불
await AdStage.event.trackRefund({
  transactionId: 'ORDER_20250105_001',
  value: 129000,
  currency: 'KRW',
});

🎮 เกม / ความคืบหน้า / ความสำเร็จ (8 รายการ)

// 1. 튜토리얼 시작
await AdStage.event.trackTutorialBegin({
  tutorial_id: 'intro',
});
 
// 2. 튜토리얼 완료
await AdStage.event.trackTutorialComplete({
  duration_seconds: 120,
});
 
// 3. 레벨업
await AdStage.event.trackLevelUp({
  level: 25,
  character: 'warrior',
});
 
// 4. 업적 달성
await AdStage.event.trackUnlockAchievement({
  achievementId: 'first_win',
  achievementName: '첫 승리',
});
 
// 5. 스테이지 클리어
await AdStage.event.trackStageClear({
  stageName: 'Dragon Lair',
  stageNumber: 10,
  score: 95000,
  duration: 180,
});
 
// 6. 게임 플레이
await AdStage.event.trackGamePlay({
  level: 10,
  levelName: "Dragon's Lair",
  character: 'mage',
  contentType: 'dungeon',
});
 
// 7. 보너스 획득
await AdStage.event.trackAcquireBonus({
  contentType: 'reward',
  itemId: 'ITEM_123',
  itemName: 'Gold Chest',
  quantity: 1,
});
 
// 8. 게임 서버 선택
await AdStage.event.trackSelectGameServer({
  contentId: 'SERVER_01',
  contentType: 'pvp',
  itemName: 'Asia Server',
});

💎 สกุลเงินเสมือน (2 รายการ)

// 1. 가상화폐 획득
await AdStage.event.trackEarnVirtualCurrency({
  virtualCurrencyName: 'gold',
  value: 1000,
});
 
// 2. 가상화폐 사용
await AdStage.event.trackSpendVirtualCurrency({
  virtualCurrencyName: 'gold',
  value: 500,
  itemName: 'Health Potion',
});

💬 การโต้ตอบ (5 รายการ)

// 1. 검색
await AdStage.event.trackSearch('gaming laptop');
 
// 2. 공유
await AdStage.event.trackShare({
  method: 'kakao',
  contentType: 'product',
  itemId: 'PROD_789',
});
 
// 3. 좋아요
await AdStage.event.trackLike({
  contentType: 'post',
  contentId: 'POST_123',
});
 
// 4. 앱 평가
await AdStage.event.trackRate({
  rating: 5,
  maxRating: 5,
});
 
// 5. 일정 등록
await AdStage.event.trackSchedule({
  event_name: 'meeting',
  date: '2025-01-15',
});

📢 โฆษณาในแอป (2 รายการ)

// 1. 광고 노출
await AdStage.event.trackAdImpression({
  adPlatform: 'admob',
  adSource: 'admob_banner',
  adFormat: 'banner',
  adUnitName: 'home_banner',
  value: 0.01,
  currency: 'USD',
});
 
// 2. 광고 클릭
await AdStage.event.trackAdClick({
  adPlatform: 'admob',
  adSource: 'admob_interstitial',
  adFormat: 'interstitial',
  adUnitName: 'game_over_ad',
});

📅 การสมัครสมาชิก / ทดลองใช้ (4 รายการ)

// 1. 무료 체험 시작
await AdStage.event.trackStartTrial({
  value: 9900,
  currency: 'KRW',
  trialDays: 14,
});
 
// 2. 구독 시작
await AdStage.event.trackSubscribe({
  subscriptionId: 'premium_monthly',
  value: 9900,
  currency: 'KRW',
  period: 'monthly',
});
 
// 3. 구독 해지
await AdStage.event.trackUnsubscribe('premium_monthly');
 
// 4. 푸시 알림 클릭
await AdStage.event.trackNotificationClick({
  notificationId: 'NOTIF_123',
  title: '할인 이벤트',
  body: '오늘만 50% 할인!',
});

💼 เฉพาะด้านการเงิน (4 รายการ)

// 1. 주식 매수
await AdStage.event.trackBuyStock({
  itemId: 'AAPL',
  itemName: 'Apple Inc.',
  quantity: 10,
  price: 185.5,
  value: 1855,
  currency: 'USD',
});
 
// 2. 주식 매도
await AdStage.event.trackSellStock({
  itemId: 'AAPL',
  itemName: 'Apple Inc.',
  quantity: 5,
  price: 190.0,
  value: 950,
  currency: 'USD',
});
 
// 3. 계좌 개설 완료
await AdStage.event.trackCompleteOpenAccount({
  contentType: 'savings',
  contentId: 'ACCOUNT_001',
  method: 'online',
});
 
// 4. 카드 신청
await AdStage.event.trackApplyCard({
  contentType: 'credit_card',
  itemName: 'Premium Card',
  itemId: 'CARD_001',
});

🔧 อื่น ๆ (1 รายการ)

// 패치 완료 (게임)
await AdStage.event.trackCompletePatch({
  contentId: 'PATCH_2.1.0',
  contentType: 'update',
});

อีเวนต์แบบกำหนดเอง

นอกเหนือจากอีเวนต์มาตรฐาน คุณสามารถกำหนดอีเวนต์ได้อย่างอิสระ

อีเวนต์แบบกำหนดเองพื้นฐาน

// 커스텀 이벤트 전송
await AdStage.event.track('custom_event_name', {
  custom_param1: 'value1',
  custom_param2: 123,
  custom_param3: true,
});

ตัวอย่างใช้งานจริง: อีเวนต์ตามฟีเจอร์

// 쿠폰 적용
await AdStage.event.track('apply_coupon', {
  coupon_code: 'SUMMER25',
  discount_amount: 5000,
  discount_type: 'percentage',
});
 
// 친구 초대
await AdStage.event.track('invite_friend', {
  invite_method: 'kakao',
  invite_code: 'ABC123',
});
 
// 리뷰 작성
await AdStage.event.track('write_review', {
  product_id: 'PROD_123',
  rating: 5,
  has_photo: true,
});
 
// 고객센터 문의
await AdStage.event.track('contact_support', {
  inquiry_type: 'refund',
  channel: 'chat',
});

กฎการตั้งชื่ออีเวนต์

กฎตัวอย่างคำอธิบาย
ใช้ snake_casebutton_click ✅การผสมตัวพิมพ์เล็กและขีดล่าง
รูปแบบ คำกริยา_คำนามadd_to_cart ✅การตั้งชื่อโดยเน้นการกระทำ
ตั้งชื่อให้เฉพาะเจาะจงpurchase_complete ✅ความหมายของอีเวนต์ชัดเจน
หลีกเลี่ยง camelCasebuttonClick ❌รักษาความสอดคล้อง

การตั้งค่าแอตทริบิวต์ของผู้ใช้

การระบุตัวตนและการตั้งค่าแอตทริบิวต์ของผู้ใช้

แอตทริบิวต์ของผู้ใช้ที่ตั้งค่าไว้จะถูกรวมไว้โดยอัตโนมัติในทุกอีเวนต์ที่ส่งหลังจากนั้น

import { AdStage } from '@adstage/react-native-sdk';
 
// 사용자 속성 설정
await AdStage.setUserAttributes({
  gender: 'male',     // 'male' | 'female' | 'other'
  country: 'KR',      // 국가 코드
  city: 'Seoul',      // 도시
  age: '28',          // 나이 (문자열)
  language: 'ko-KR',  // 언어
});
 
// 설정된 사용자 속성 조회
const attributes = await AdStage.getUserAttributes();

อินเทอร์เฟซ UserAttributes

interface UserAttributes {
  gender?: string;    // male, female, other
  country?: string;   // 국가 코드: KR, US, JP 등
  city?: string;      // 도시
  age?: string;       // 나이
  language?: string;  // 언어: ko-KR, en-US 등
}

สถานการณ์การใช้งาน

// 로그인 후 사용자 정보 설정
const handleLoginSuccess = async (user: User) => {
  // 사용자 속성 설정
  await AdStage.setUserAttributes({
    country: user.country,
    city: user.city,
    language: user.language,
  });
  
  // 로그인 이벤트 전송 (method 인자는 로그인 방법)
  await AdStage.event.trackLogin('email');
};
 
// 로그아웃 시
const handleLogout = async () => {
  await AdStage.event.trackLogout();
  
  // 사용자 속성 초기화 (선택)
  await AdStage.clearUserAttributes();
};

โครงสร้างไอเทมอีคอมเมิร์ซ

อินเทอร์เฟซ EcommerceItem

interface EcommerceItem {
  itemId: string;           // 상품 ID (필수)
  itemName: string;         // 상품명 (필수)
  price?: number;           // 단가
  quantity?: number;        // 수량
  itemCategory?: string;    // 카테고리
  itemBrand?: string;       // 브랜드
}

ตัวอย่างการซื้อหลายไอเทม

await AdStage.event.trackPurchase({
  value: 250000,
  currency: 'KRW',
  transactionId: 'ORDER_001',
  items: [
    {
      itemId: 'SKU_001',
      itemName: 'Wireless Earbuds',
      itemCategory: 'Electronics',
      itemBrand: 'TechBrand',
      price: 150000,
      quantity: 1,
    },
    {
      itemId: 'SKU_002',
      itemName: 'Phone Case',
      itemCategory: 'Accessories',
      price: 50000,
      quantity: 2,
    },
  ],
  tax: 25000,
  shipping: 0,
  coupon: 'FREESHIP',
});

การแก้ไขปัญหา

อีเวนต์ไม่ถูกส่ง

  1. ตรวจสอบการเริ่มต้นใช้งาน SDK

    // initialize가 완료된 후 이벤트 전송
    await AdStage.initialize({ apiKey: 'your-api-key' });
    await AdStage.event.track('test_event');
  2. ตรวจสอบ API Key

    • ตรวจสอบว่าตั้งค่า API Key ที่ถูกต้องแล้ว
  3. ตรวจสอบการเชื่อมต่อเครือข่าย

    • อีเวนต์ถูกส่งผ่านเครือข่าย

การส่งอีเวนต์ล้มเหลวบน iOS

  1. ตรวจสอบ Info.plist

    • จำเป็นต้องมีคีย์ NSUserTrackingUsageDescription
  2. ตรวจสอบสถานะสิทธิ์ ATT

    // iOS 14.5+ ATT 권한 요청 후 이벤트 전송

การส่งอีเวนต์ล้มเหลวบน Android

  1. ตรวจสอบที่เก็บ Maven

    maven { url "https://maven.adstage.io/repository/public" }
    
  2. ตรวจสอบ minSdkVersion

    • จำเป็นต้องเป็น 24 ขึ้นไปเป็นอย่างน้อย

พารามิเตอร์ไม่ถูกส่งผ่าน

  • คีย์ของพารามิเตอร์ต้องใช้ snake_case
  • ค่า null/undefined จะถูกยกเว้นโดยอัตโนมัติ

เคล็ดลับการดีบัก

// 이벤트 결과 확인
const result = await AdStage.event.track('test_event', {
  debug: true,
});
 
console.log('Event result:', result);
// { success: true, eventId: '...' } 또는 { success: false, error: '에러 메시지' }

สารบัญ

คู่มือการเชื่อมต่อ In-App Event ของ AdStage (React Native)สารบัญภาพรวมการติดตั้งการติดตั้งผ่าน npm / yarnการติดตั้งดีเพนเดนซีของ iOSการตั้งค่าเพิ่มเติมตามแพลตฟอร์มการเริ่มต้นใช้งาน SDKการส่งอีเวนต์การส่งอีเวนต์พื้นฐานโครงสร้าง TrackEventResultแค็ตตาล็อกอีเวนต์มาตรฐาน👤 วงจรชีวิตของผู้ใช้📱 การดูเนื้อหา🛒 อีคอมเมิร์ซ (7 รายการ)🎮 เกม / ความคืบหน้า / ความสำเร็จ (8 รายการ)💎 สกุลเงินเสมือน (2 รายการ)💬 การโต้ตอบ (5 รายการ)📢 โฆษณาในแอป (2 รายการ)📅 การสมัครสมาชิก / ทดลองใช้ (4 รายการ)💼 เฉพาะด้านการเงิน (4 รายการ)🔧 อื่น ๆ (1 รายการ)อีเวนต์แบบกำหนดเองอีเวนต์แบบกำหนดเองพื้นฐานตัวอย่างใช้งานจริง: อีเวนต์ตามฟีเจอร์กฎการตั้งชื่ออีเวนต์การตั้งค่าแอตทริบิวต์ของผู้ใช้การระบุตัวตนและการตั้งค่าแอตทริบิวต์ของผู้ใช้อินเทอร์เฟซ UserAttributesสถานการณ์การใช้งานโครงสร้างไอเทมอีคอมเมิร์ซอินเทอร์เฟซ EcommerceItemตัวอย่างการซื้อหลายไอเทมการแก้ไขปัญหาอีเวนต์ไม่ถูกส่งการส่งอีเวนต์ล้มเหลวบน iOSการส่งอีเวนต์ล้มเหลวบน Androidพารามิเตอร์ไม่ถูกส่งผ่านเคล็ดลับการดีบัก