react-edgee is a React component that injects the Edgee SDK script into a React application.
It also sets up listeners to track page navigations via history.pushState and history.replaceState
to automatically call the edgee.page method, ensuring page views are tracked during SPA navigations, and provides a React Hook (useEdgeeDataCollection) to simplify event tracking (track, user, page, consent).
using npm:
npm install react-edgeeusing yarn:
yarn add react-edgeeimport using:
import { EdgeeSdk, EdgeeDataLayer, EdgeeDataLayerObject } from 'react-edgee';The Data Layer provides you with fine-grained control over the data sent to various analytics. It is a structured data format used to define and send detailed information about user interactions and page characteristics. By including a Data Layer, you can instruct Edgee on what data to collect, how to process it, and where to send it.
import { EdgeeDataLayerObject, EdgeeDataLayer } from "react-edgee";
const edgeeDataLayer: EdgeeDataLayerObject = {
// your Data Layer configuration here
};To learn more about the Data Layer object, visit the Edgee Data Layer docs.
Add the EdgeeSdk and EdgeeDataLayer components inside the <body> tag of your RootLayout component:
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<EdgeeDataLayer data={edgeeDataLayer} />
<EdgeeSdk src={"<YOUR_SDK_URL>"} />
</body>
</html>
);
}Add the EdgeeSdk and EdgeeDataLayer components in your MyApp component:
export default function MyApp({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<EdgeeDataLayer data={edgeeDataLayer} />
<EdgeeSdk src="<YOUR_SDK_URL>" />
</>
);
}Add the EdgeeSdk and EdgeeDataLayer component inside the <Router> component in your App:
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
const App = () => {
return (
<div>
<Router>
<EdgeeDataLayer data={edgeeDataLayer} />
<EdgeeSdk src="<YOUR_SDK_URL>" />
<Routes>
{/* Your Routes Here */}
</Routes>
</Router>
</div>
);
}
export default App;The useEdgeeDataCollection hook simplifies event tracking by providing direct access to the Edgee SDK methods.
import { useEdgeeDataCollection } from 'react-edgee';
const MyComponent = () => {
const { track, user, page, consent } = useEdgeeDataCollection();
return (
<>
<button onClick={() => track({ name: 'button_click' })}>Click Me</button>
<button onClick={() => user({ user_id: '12345', edgee_id: 'edgee-abc' })}>Identify User</button>
<button onClick={() => page({ name: 'HomePage', url: 'https://example.com' })}>Track Page</button>
<button onClick={() => consent('granted')}>Accept Consent</button>
</>
);
};To learn more about the Edgee SDK, visit the Edgee SDK documentation.