react-edgee
v1.0.1
Published
React component to use the Edgee SDK
Downloads
39
Maintainers
sachamorardReadme
react-edgee Component
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.
Install
using npm:
npm install react-edgeeusing yarn:
yarn add react-edgeeUsage
import using:
import EdgeeSdk from 'react-edgee';Usage with app/layout.js for app folder structure
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>
);
}Usage with pages/_app.js for pages folder structure
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" />
</>
);
}Usage with React, Vite React or any other React Based Framework
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;Edgee Context Payload Usage
import using:
import { EdgeeSdk, EdgeeContextPayload, EdgeeContextObject } from "react-edgee";Usage with app/layout.js for app folder structure
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.