ภาพรวมและการติดตั้ง Web SDK

คู่มือนี้อธิบายวิธีการติดตั้งและเริ่มต้นใช้งาน AdStage Web SDK สำหรับการแสดงโฆษณา การติดตามเหตุการณ์ และการใช้งานเฉพาะรูปแบบ ให้อ่านหน้าอื่นๆ ในส่วนนี้

🚀 การติดตั้ง

Package Managers

เลือก package manager และติดตั้ง:

pnpm add @adstage/web-sdk

การแก้ปัญหาการติดตั้ง

หากคุณพบปัญหาความขัดแย้งของ peer dependency:

# แก้ไขด่วน
npm install @adstage/web-sdk --legacy-peer-deps
 
# หรือเพิ่มใส่ไฟล์ .npmrc
echo "legacy-peer-deps=true" >> .npmrc

CDN (Prototype / หน้าเว็บแบบคงที่)

ใช้ UMD bundle เมื่อคุณไม่มีขั้นตอนการ build:

<script src="https://unpkg.com/@adstage/web-sdk/dist/index.umd.js"></script>

หลังจากโหลดแล้ว จะมี global object AdStage พร้อมใช้งาน

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

คุณต้องเรียก AdStage.init() หนึ่งครั้งก่อนที่จะสร้าง ad slot หรือติดตามเหตุการณ์ใดๆ

รูปแบบ init()

<script>
  AdStage.init({
    apiKey: 'your-api-key',
    debug: true // เปิดใช้เฉพาะในการพัฒนา
  });
</script>

รูปแบบ Provider

การใช้ AdStageProvider ช่วยหลีกเลี่ยงการเรียก init() ด้วยตนเองในหลายจุดเข้าใช้งาน

import { AdStageProvider } from '@adstage/web-sdk';
 
export function App() {
  return (
    <AdStageProvider
      config={{
        apiKey: 'your-api-key',
        debug: process.env.NODE_ENV === 'development'
      }}
    >
      <div>{/* App components */}</div>
    </AdStageProvider>
  );
}

🔧 ตัวเลือกการกำหนดค่า

ตัวอย่างพร้อมการป้องกัน Environment

AdStage.init({
  apiKey: process.env.AD_STAGE_KEY,
  debug: process.env.NODE_ENV === 'development'
});

✅ รายการตรวจสอบการตรวจสอบ

🧪 ขั้นตอนถัดไป

• แสดงโฆษณาแรกของคุณ: ดูหน้า Banner / Text / Video
• สำรวจรูปแบบ lifecycle: หน้า Common Features
• ติดตามเหตุการณ์ (หากรองรับในเวอร์ชันหลังๆ)

ไปยังหน้าเฉพาะประเภทโฆษณาเพื่อเริ่มแสดงโฆษณา