@@ -33,9 +33,8 @@ function App() {
3333 return (
3434 <>
3535 <Databuddy
36- clientId = " YOUR_SITE_ID"
37- trackScreenViews = { true }
38- trackAttributes = { true }
36+ clientId = " YOUR_CLIENT_ID"
37+ trackAttributes
3938 />
4039 <YourAppContent />
4140 </>
@@ -167,30 +166,28 @@ function ProductCard({ product }) {
167166
168167## Configuration Options
169168
170- ### Advanced Provider Setup
169+ ### Advanced Configuration
171170
172171``` tsx
173- import { DatabuddyProvider } from ' @databuddy/react' ;
172+ import { Databuddy } from ' @databuddy/sdk /react' ;
174173
175174function App() {
176175 return (
177- <DatabuddyProvider
178- siteId = " YOUR_SITE_ID"
179- config = { {
180- trackScreenViews: true ,
181- trackHashChanges: true ,
182- trackAttributes: true ,
183- trackOutgoingLinks: true ,
184- trackPerformance: true ,
185- trackWebVitals: true ,
186- enableBatching: true ,
187- batchSize: 10 ,
188- batchTimeout: 2000
189- }}
190- debug = { process .env .NODE_ENV === ' development' }
191- >
176+ <>
177+ <Databuddy
178+ clientId = { process .env .REACT_APP_DATABUDDY_CLIENT_ID ! }
179+ trackHashChanges
180+ trackAttributes
181+ trackOutgoingLinks
182+ trackPerformance
183+ trackWebVitals
184+ enableBatching
185+ batchSize = { 10 }
186+ batchTimeout = { 2000 }
187+ debug = { process .env .NODE_ENV === ' development' }
188+ />
192189 <YourAppContent />
193- </DatabuddyProvider >
190+ </>
194191 );
195192}
196193```
@@ -221,12 +218,10 @@ function CallToAction() {
221218Track form interactions and submissions:
222219
223220``` tsx
224- import { useDatabuddy } from ' @databuddy/react ' ;
221+ import { track } from ' @databuddy/sdk ' ;
225222
226223function ContactForm() {
227- const { track } = useDatabuddy ();
228-
229- const handleSubmit = (e ) => {
224+ const handleSubmit = (e : React .FormEvent ) => {
230225 e .preventDefault ();
231226 track (' form_submit' , {
232227 form_name: ' contact' ,
@@ -259,11 +254,10 @@ function ContactForm() {
259254### Purchase Events
260255
261256``` tsx
262- import { useDatabuddy } from ' @databuddy/react' ;
257+ import { useEffect } from ' react' ;
258+ import { track } from ' @databuddy/sdk' ;
263259
264260function CheckoutSuccess({ order }) {
265- const { track } = useDatabuddy ();
266-
267261 useEffect (() => {
268262 track (' purchase' , {
269263 transaction_id: order .id ,
@@ -277,7 +271,7 @@ function CheckoutSuccess({ order }) {
277271 price: item .price
278272 }))
279273 });
280- }, [order , track ]);
274+ }, [order ]);
281275
282276 return <div >Thank you for your purchase!</div >;
283277}
@@ -286,9 +280,9 @@ function CheckoutSuccess({ order }) {
286280### Cart Events
287281
288282``` tsx
289- function AddToCartButton({ product }) {
290- const { track } = useDatabuddy ();
283+ import { track } from ' @databuddy/sdk' ;
291284
285+ function AddToCartButton({ product }) {
292286 const handleAddToCart = () => {
293287 track (' add_to_cart' , {
294288 currency: ' USD' ,
@@ -316,16 +310,14 @@ function AddToCartButton({ product }) {
316310### Error Boundaries
317311
318312``` tsx
319- import { useDatabuddy } from ' @databuddy/react ' ;
313+ import { track } from ' @databuddy/sdk ' ;
320314
321315function ErrorBoundary({ children }) {
322- const { track } = useDatabuddy ();
323-
324316 const handleError = (error : Error , errorInfo : any ) => {
325- track (' exception ' , {
326- description : error .message ,
327- fatal: false ,
328- error_stack : error .stack ,
317+ track (' error ' , {
318+ message : error .message ,
319+ error_type: ' react_error_boundary ' ,
320+ stack : error .stack ,
329321 component_stack: errorInfo .componentStack
330322 });
331323 };
@@ -346,11 +338,10 @@ function ErrorBoundary({ children }) {
346338### Custom Performance Metrics
347339
348340``` tsx
349- import { useDatabuddy } from ' @databuddy/react' ;
341+ import { useEffect } from ' react' ;
342+ import { track } from ' @databuddy/sdk' ;
350343
351344function DataDashboard() {
352- const { track } = useDatabuddy ();
353-
354345 useEffect (() => {
355346 const startTime = performance .now ();
356347
@@ -363,7 +354,7 @@ function DataDashboard() {
363354 data_size: ' large'
364355 });
365356 });
366- }, [track ]);
357+ }, []);
367358
368359 return <div >Dashboard content</div >;
369360}
@@ -374,22 +365,9 @@ function DataDashboard() {
374365### Type-Safe Event Tracking
375366
376367``` tsx
377- import { useDatabuddy } from ' @databuddy/react' ;
378-
379- interface CustomEvents {
380- button_click: {
381- button_text: string ;
382- location: string ;
383- };
384- form_submit: {
385- form_name: string ;
386- form_location: string ;
387- };
388- }
368+ import { track } from ' @databuddy/sdk' ;
389369
390370function TypedComponent() {
391- const { track } = useDatabuddy <CustomEvents >();
392-
393371 const handleClick = () => {
394372 // TypeScript will ensure correct event properties
395373 track (' button_click' , {
@@ -407,49 +385,52 @@ function TypedComponent() {
407385### 1. Environment-Based Configuration
408386
409387``` tsx
410- const config = {
411- siteId: process .env .REACT_APP_DATABUDDY_SITE_ID ,
412- debug: process .env .NODE_ENV === ' development' ,
413- disabled: process .env .NODE_ENV === ' test'
414- };
388+ < Databuddy
389+ clientId = { process .env .REACT_APP_DATABUDDY_CLIENT_ID ! }
390+ debug = { process .env .NODE_ENV === ' development' }
391+ disabled = { process .env .NODE_ENV === ' test' }
392+ />
415393```
416394
417- ### 2. Lazy Loading
395+ ### 2. Conditional Loading
418396
419397``` tsx
420- import { lazy , Suspense } from ' react' ;
421-
422- const DatabuddyProvider = lazy (() => import (' @databuddy/react' ));
398+ import { Databuddy } from ' @databuddy/sdk/react' ;
423399
424400function App() {
401+ const shouldTrack = process .env .NODE_ENV === ' production' ;
402+
425403 return (
426- <Suspense fallback = { <div >Loading...</div >} >
427- <DatabuddyProvider siteId = " YOUR_SITE_ID" >
428- <YourAppContent />
429- </DatabuddyProvider >
430- </Suspense >
404+ <>
405+ { shouldTrack && (
406+ <Databuddy clientId = { process .env .REACT_APP_DATABUDDY_CLIENT_ID ! } />
407+ )}
408+ <YourAppContent />
409+ </>
431410 );
432411}
433412```
434413
435414### 3. Custom Hook for Analytics
436415
437416``` tsx
438- import { useDatabuddy } from ' @databuddy/react' ;
417+ import { useCallback } from ' react' ;
418+ import { track } from ' @databuddy/sdk' ;
439419
440420export function useAnalytics() {
441- const { track } = useDatabuddy ();
421+ const trackButtonClick = useCallback ((buttonText : string , location : string ) => {
422+ track (' button_click' , { button_text: buttonText , location });
423+ }, []);
424+
425+ const trackPageView = useCallback ((pageName : string , category ? : string ) => {
426+ track (' screen_view' , { screen_name: pageName , screen_class: category });
427+ }, []);
428+
429+ const trackError = useCallback ((error : Error , context ? : string ) => {
430+ track (' error' , { message: error .message , error_type: ' custom' , context });
431+ }, []);
442432
443- return {
444- trackButtonClick : (buttonText : string , location : string ) =>
445- track (' button_click' , { button_text: buttonText , location }),
446-
447- trackPageView : (pageName : string , category ? : string ) =>
448- track (' screen_view' , { screen_name: pageName , screen_class: category }),
449-
450- trackError : (error : Error , context ? : string ) =>
451- track (' exception' , { description: error .message , context })
452- };
433+ return { trackButtonClick , trackPageView , trackError };
453434}
454435```
455436
0 commit comments