@amplifyup/sdk 0.1.6 → 0.1.7

package/README.md

@@ -1,47 +1,60 @@
 # @amplifyup/sdk
 
-AmplifyUp Tracking SDK - CDP-agnostic event tracking library.
+Official JavaScript SDK for [AmplifyUp](https://amplifyup.ai) — event tracking, page layouts, personalization, and Composer preview on your site.
 
-## Overview
+## Install
 
-This SDK provides event tracking and personalization against AmplifyUp backends.
-Configure a `trackingId`, and optionally a `target` for which environment to use.
+```bash
+npm install @amplifyup/sdk
+```
 
-## Environment targets
+## Quick start
 
-**Default: production (live).** Hosting your site on `localhost` does not switch environments.
+### React / Next.js
 
-Opt into `local` only when developing inside the AmplifyUp monorepo:
+Wrap your app with the provider and pass your site **tracking ID** from the AmplifyUp dashboard:
 
-| Target | When | Layouts / config | Events + personalize |
-|--------|------|------------------|----------------------|
-| `production` (default) | Customer sites, staging, production | `https://amplifyup.ai` | `https://api.amplifyup.ai` |
-| `local` (explicit) | AmplifyUp monorepo dev | `NEXT_PUBLIC_ORCHESTRATOR_URL` | `https://api-dev.amplifyup.ai` |
+```tsx
+import { AmplifyUpProvider } from '@amplifyup/sdk/react';
 
-```bash
-# AmplifyUp monorepo only (apps/demo, apps/orchestrator locally)
-NEXT_PUBLIC_ORCHESTRATOR_URL=http://localhost:5001
-NEXT_PUBLIC_AMPLIFYUP_TARGET=local
+export default function RootLayout({ children }) {
+  return (
+    <AmplifyUpProvider config={{ trackingId: 'your-tracking-id' }}>
+      {children}
+    </AmplifyUpProvider>
+  );
+}
+```
+
+### Track events
+
+```typescript
+import { init, page, track, identify } from '@amplifyup/sdk';
+
+await init({ trackingId: 'your-tracking-id' });
+
+page('/home');
+
+track('Product Viewed', { productId: '123' });
 
-# Customer sites: omit NEXT_PUBLIC_AMPLIFYUP_TARGET — always live
+identify('user-123', { email: 'user@example.com' });
 ```
 
-Check active URLs in the browser: `AmplifyUp.getStatus()`
+## Composer and hybrid pages
 
-### Hybrid pages (native content + Composer)
+If a page has its own native content **and** can be edited in Composer, use `AmplifyPageContent`:
 
-For pages with native content that should only appear for real visitors:
+- **Visitors** see your AmplifyUp layout, or your native content when no layout is configured yet.
+- **Composer preview** shows only the layout canvas — native fallback content is hidden.
 
 ```tsx
-// app/insights/page.tsx (server)
 import { isPreviewRequest } from '@amplifyup/sdk';
 import { AmplifyPageContent } from '@amplifyup/sdk/react';
 
-export default async function InsightsPage({ searchParams }) {
+export default async function Page({ searchParams }) {
   const params = await searchParams;
 
   if (isPreviewRequest(params)) {
-    // Composer: no blog fetch, no native fallback HTML
     return (
       <Layout>
         <AmplifyPageContent renderComponent={renderAmplifyComponent} />
@@ -49,116 +62,25 @@ export default async function InsightsPage({ searchParams }) {
     );
   }
 
-  const posts = await getPosts();
   return (
     <Layout>
-      <PostsProvider value={posts}>
-        <AmplifyPageContent
-          fallback={<InsightsFallback />}
-          renderComponent={renderAmplifyComponent}
-        />
-      </PostsProvider>
+      <AmplifyPageContent
+        fallback={<YourNativePage />}
+        renderComponent={renderAmplifyComponent}
+      />
     </Layout>
   );
 }
 ```
 
-In Composer preview, `AmplifyPageContent` shows an empty layout canvas — never `fallback`.
-
-## Installation
-
-```bash
-npm install @amplifyup/sdk
-```
-
-## Usage
+## Debugging
 
-### Basic Setup
+In the browser console (on your site):
 
-```typescript
-import { init } from '@amplifyup/sdk';
-
-await init({
-  trackingId: 'your-tracking-id',
-  debug: true,
-});
-```
-
-### Track Events
-
-```typescript
-import { 
-  page, 
-  track, 
-  trackClick, 
-  trackFormSubmit,
-  trackContentView,
-  identify 
-} from '@amplifyup/sdk';
-
-// Track page view
-page('/home');
-
-// Track custom event
-track('Product Viewed', {
-  productId: '123',
-  productName: 'Widget',
-  price: 29.99
-});
-
-// Track button click
-trackClick('add-to-cart', 'Add to Cart', {
-  productId: '123'
-});
-
-// Track form submission
-trackFormSubmit('newsletter-signup', {
-  email: 'user@example.com'
-});
-
-// Track content view
-trackContentView('product-123', 'product', {
-  productName: 'Widget',
-  category: 'Electronics'
-});
-
-// Identify user
-identify('user-123', {
-  email: 'user@example.com',
-  name: 'John Doe'
-});
-```
-
-### Get Instance ID
-
-```typescript
-import { getInstanceId } from '@amplifyup/sdk';
-
-const instanceId = getInstanceId();
-```
-
-## Architecture
-
-The SDK sends events directly to AWS API Gateway:
-- Events are sent to `/v1/track` or `/v1/page` endpoints
-- All URLs are hardcoded in the SDK
-- No write keys or configuration needed
-- Personalization requests go to AWS Decision API Gateway
-
-## Development
-
-```bash
-# Build
-npm run build
-
-# Watch mode
-npm run dev
-
-# Lint
-npm run lint
+```js
+AmplifyUp.getStatus()
 ```
 
 ## License
 
 MIT
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amplifyup/sdk",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "AmplifyUp Tracking SDK - CDP-agnostic event tracking library",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",