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-edgee
using yarn:
yarn add react-edgee
import 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.