telemetree_react_provider_setup_with_custom_event_tracking.ts

1import React, { useEffect } from 'react';
2import { TWAEventProvider, useTWAEvent } from '@tonsolutions/telemetree-react-pts';
3
4const AppContent = () => {
5  const { track } = useTWAEvent();
6
7  useEffect(() => {
8    // Track a simple event when the component mounts
9    track('page_view', {
10      page: 'home',
11    });
12  }, [track]);
13
14  const handleButtonClick = () => {
15    // Track a custom event on user interaction
16    track('button_click', {
17      button_id: 'main_cta',
18      timestamp: Date.now(),
19    });
20  };
21
22  return (
23    <div>
24      <h1>Telemetree React Quickstart</h1>
25      <button onClick={handleButtonClick}>Click Me</button>
26    </div>
27  );
28};
29
30const App = () => {
31  return (
32    // Replace with your actual Project ID and API Key from the Telemetree dashboard
33    <TWAEventProvider
34      projectId="YOUR_PROJECT_ID"
35      apiKey="YOUR_API_KEY"
36      appName="YOUR_APP_NAME"
37    >
38      <AppContent />
39    </TWAEventProvider>
40  );
41};
42
43export default App;