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.
using npm:
npm install react-edgeeusing yarn:
yarn add react-edgeeimport using:
import EdgeeSdk from 'react-edgee';For rendering add <EdgeeSdk /> to your return() inside the <body></body> of RootLayout():
import EdgeeSdk from "react-edgee";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<EdgeeSdk src={"https://yourdomain.com/_edgee/sdk.js"} />
</body>
</html>
);
}For rendering add <EdgeeSdk /> to your return() in MyApp():
import EdgeeSdk from 'react-edgee';
export default function MyApp({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<EdgeeSdk src="https://yourdomain.com/_edgee/sdk.js" />
</>
);
}For rendering add <EdgeeSdk /> to your return() inside the component in App() in your App.js:
import EdgeeSdk from 'nextjsedgee';
const App = () => {
return (
<div>
<Router>
<EdgeeSdk src="https://yourdomain.com/_edgee/sdk.js" />
<Routes>
{/* Your Routes Here */}
</Routes>
</Router>
</div>
)
}
export default App;import using:
import { EdgeeSdk, EdgeeContextPayload, EdgeeContextObject } from "react-edgee";import { EdgeeSdk, EdgeeContextPayload, EdgeeContextObject } from "react-edgee";
export default function RootLayout({ children }) {
const edgeeContextPayload: EdgeeContextObject = {
page: {
name: "With Edgee",
category: "demo",
title: "With Edgee",
url: "https://mysite.com/my/path",
path: "/my/path",
search: "?ok",
keywords: ["demo", "edgee"],
properties: {
section: "edge computing",
order: 6
}
},
identify: {
userId: "12345",
anonymousId: "12345",
properties: {
email: "[email protected]",
name: "John Doe",
age: 32
}
},
destinations: {
all: true,
google_analytics: true,
amplitude: true,
facebook_capi: true
}
};
return (
<html lang="en">
<body>
{children}
<EdgeeSdk src={"https://yourdomain.com/_edgee/sdk.js"} />
</body>
</html>
);
}To know more about the Edgee SDK, visit the Edgee SDK documentation.