@elevateab/sdk 1.4.1 → 1.4.3

package/README.md

@@ -9,7 +9,6 @@ npm install @elevateab/sdk
 ```
 
 **Peer Dependencies:**
-
 - `react` >= 18.0.0 or >= 19.0.0
 - `@shopify/hydrogen` >= 2023.10.0 (Hydrogen only)
 - `next` >= 13.0.0 (Next.js only)
@@ -23,23 +22,17 @@ Hydrogen uses automatic analytics tracking via Shopify's `useAnalytics()` hook.
 ```tsx
 // app/root.tsx
 import { ElevateProvider, ElevateAnalytics } from "@elevateab/sdk";
-import { Analytics, useNonce } from "@shopify/hydrogen";
+import { Analytics } from "@shopify/hydrogen";
 
 export default function Root() {
   const data = useLoaderData<typeof loader>();
-  const nonce = useNonce(); // Only needed if your store uses strict CSP
 
   return (
-    <Analytics.Provider
-      cart={data.cart}
-      shop={data.shop}
-      consent={data.consent}
-    >
+    <Analytics.Provider cart={data.cart} shop={data.shop} consent={data.consent}>
       <ElevateProvider
         storeId="mystore.myshopify.com"
         storefrontAccessToken={env.PUBLIC_STOREFRONT_API_TOKEN}
         preventFlickering={true}
-        nonce={nonce}
       >
         <ElevateAnalytics />
         <Outlet />
@@ -49,52 +42,10 @@ export default function Root() {
 }
 ```
 
-That's it! Analytics events are tracked automatically when users view pages, products, add to cart, etc.
+That's it. Analytics events are tracked automatically when users view pages, products, add to cart, etc.
 
 The `preventFlickering={true}` prop prevents content flash while tests load.
 
-### Content Security Policy Configuration
-
-This step is optional. Only add CSP directives if your store enforces a strict CSP
-and you see console errors about blocked scripts.
-
-**For Hydrogen stores:** Add Elevate CDN domains to your CSP in `app/entry.server.tsx`:
-
-```tsx
-// app/entry.server.tsx
-export default async function handleRequest(
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  reactRouterContext: EntryContext,
-  context: HydrogenRouterContextProvider,
-) {
-  const {nonce, header, NonceProvider} = createContentSecurityPolicy({...});
-
-  // Add Elevate domains to CSP
-  let elevateCSP = header
-    .replace(
-      /script-src-elem\s+([^;]+)/,
-      `script-src-elem $1 https://d19dz5bxptjmv5.cloudfront.net`
-    )
-    .replace(
-      /connect-src\s+([^;]+)/,
-      `connect-src $1 https://d19dz5bxptjmv5.cloudfront.net https://d339co84ntxcme.cloudfront.net https://configs.elevateab.com`
-    );
-
-  responseHeaders.set('Content-Security-Policy', elevateCSP);
-  // ... rest of your code
-}
-```
-
-**For other frameworks (Next.js, Gatsby, etc.):**
-
-Add the following CSP header:
-
-```
-Content-Security-Policy: script-src 'self' https://d19dz5bxptjmv5.cloudfront.net; script-src-elem 'self' https://d19dz5bxptjmv5.cloudfront.net; connect-src 'self' https://d19dz5bxptjmv5.cloudfront.net https://d339co84ntxcme.cloudfront.net https://configs.elevateab.com
-```
-
 ---
 
 ## Next.js Setup
@@ -125,7 +76,6 @@ export default function RootLayout({ children }) {
 ```
 
 The `ElevateNextProvider` automatically:
-
 - Tracks page views on route changes
 - Initializes analytics globally
 - Prevents content flicker (when `preventFlickering={true}`)
@@ -159,12 +109,12 @@ import { trackAddToCart } from "@elevateab/sdk";
 async function handleAddToCart() {
   // Shopify GIDs are automatically converted to numeric IDs
   await trackAddToCart({
-    productId: product.id, // "gid://shopify/Product/123" works
-    variantId: variant.id, // "gid://shopify/ProductVariant/456" works
+    productId: product.id,           // "gid://shopify/Product/123" works
+    variantId: variant.id,           // "gid://shopify/ProductVariant/456" works
     productPrice: 99.99,
     productQuantity: 1,
     currency: "USD",
-    cartId: cart.id, // For cart attribute tagging
+    cartId: cart.id,                 // For cart attribute tagging
   });
 }
 ```
@@ -200,21 +150,6 @@ await trackCartView({
 
 // Search
 await trackSearchSubmitted({ searchQuery: "blue shirt" });
-
-// Checkout started
-await trackCheckoutStarted({
-  cartTotalPrice: 199.99,
-  currency: "USD",
-  cartItems: [...],
-});
-
-// Checkout completed (order placed)
-await trackCheckoutCompleted({
-  orderId: "order_123",
-  cartTotalPrice: 199.99,
-  currency: "USD",
-  cartItems: [...],
-});
 ```
 
 ---
@@ -234,7 +169,7 @@ function PricingSection() {
   if (variant?.isControl) {
     return <Price amount={99.99} />;
   }
-
+  
   return <Price amount={79.99} />;
 }
 ```
@@ -244,13 +179,13 @@ function PricingSection() {
 ```tsx
 const { variant } = useExperiment("test-id");
 
-variant?.isControl; // true if control group
-variant?.isA; // true if variant A
-variant?.isB; // true if variant B
-variant?.isC; // true if variant C
-variant?.isD; // true if variant D
-variant?.id; // variant ID
-variant?.name; // variant name
+variant?.isControl  // true if control group
+variant?.isA        // true if variant A
+variant?.isB        // true if variant B
+variant?.isC        // true if variant C
+variant?.isD        // true if variant D
+variant?.id         // variant ID
+variant?.name       // variant name
 ```
 
 ### Multiple Variants
@@ -278,7 +213,6 @@ https://yourstore.com/?eabUserPreview=true&abtid=<test-id>&eab_tests=<short-id>_
 ```
 
 Example:
-
 ```
 https://yourstore.com/products/shirt?eabUserPreview=true&abtid=abc123&eab_tests=c123_12345
 ```
@@ -299,16 +233,13 @@ if (isPreviewMode()) {
 
 Orders are attributed to A/B tests via cart attributes. This happens automatically when you provide `storefrontAccessToken` and `cartId`.
 
-For Hydrogen, pass `storefrontAccessToken` and `nonce` to the provider:
+For Hydrogen, pass `storefrontAccessToken` to the provider:
 
 ```tsx
-const nonce = useNonce();
-
 <ElevateProvider
   storeId="mystore.myshopify.com"
   storefrontAccessToken={env.PUBLIC_STOREFRONT_API_TOKEN}
-  nonce={nonce}
-/>;
+/>
 ```
 
 For Next.js, pass `cartId` to `trackAddToCart`:
@@ -334,7 +265,7 @@ The Storefront Access Token is safe to use client-side - it's a public token des
 import { extractShopifyId, isShopifyGid } from "@elevateab/sdk";
 
 extractShopifyId("gid://shopify/Product/123456"); // "123456"
-isShopifyGid("gid://shopify/Product/123"); // true
+isShopifyGid("gid://shopify/Product/123");        // true
 ```
 
 Note: Tracking functions automatically extract IDs, so you rarely need these directly.
@@ -347,25 +278,25 @@ Note: Tracking functions automatically extract IDs, so you rarely need these dir
 
 ```tsx
 interface ElevateProviderProps {
-  storeId: string; // Required: your-store.myshopify.com
-  storefrontAccessToken?: string; // For cart attribute tagging
-  preventFlickering?: boolean; // Prevent content flash during test load (recommended)
-  nonce?: string; // Only needed if you have strict CSP headers
+  storeId: string;                    // Required: your-store.myshopify.com
+  storefrontAccessToken?: string;     // For cart attribute tagging
+  preventFlickering?: boolean;        // Enable anti-flicker (default: false)
+  flickerTimeout?: number;            // Max wait time in ms (default: 3000)
   children: React.ReactNode;
 }
 ```
 
 ### Analytics Events Summary
 
-| Event              | Hydrogen  | Next.js                    |
-| ------------------ | --------- | -------------------------- |
-| Page view          | Automatic | Automatic                  |
-| Product view       | Automatic | `ProductViewTracker`       |
-| Add to cart        | Automatic | `trackAddToCart()`         |
-| Remove from cart   | Automatic | `trackRemoveFromCart()`    |
-| Cart view          | Automatic | `trackCartView()`          |
-| Search             | Automatic | `trackSearchSubmitted()`   |
-| Checkout started   | Automatic | `trackCheckoutStarted()`   |
+| Event | Hydrogen | Next.js |
+|-------|----------|---------|
+| Page view | Automatic | Automatic |
+| Product view | Automatic | `ProductViewTracker` |
+| Add to cart | Automatic | `trackAddToCart()` |
+| Remove from cart | Automatic | `trackRemoveFromCart()` |
+| Cart view | Automatic | `trackCartView()` |
+| Search | Automatic | `trackSearchSubmitted()` |
+| Checkout started | Automatic | `trackCheckoutStarted()` |
 | Checkout completed | Automatic | `trackCheckoutCompleted()` |
 
 ---