# Features
npm install ratflow-sdk-react-rollup - Track when a user is browsing in your app
- Track when a user is interacting with an element
First of all, to use the ratflow-react-sdk you must import and nest your app inside an AnalyticsContextProvider as such:
``
import { AnalyticsContextProvider } from "ratflow-sdk-react";
const authConfig = {
appId: "YOUR_APP_ID",
};
const sdkOptions = {
trackMouse: true,
useBeacon: false
};
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
//... your app
);
``
You must provide a prop "auth" with the following values, an optional "options" prop can be provided but is not required.
auth: {
appId: string;
};
options: {
debug?: boolean;
trackMouse?: boolean;
useBeacon?: boolean;
}
import { useDoubleClick } from "ratflow-sdk-react";
export default function Button() {
const { ref } = useDoubleClick({ tag: "MY_BUTTON_TAG" });
return ;
}
Here, the component Button will return a button that will send an event to your dashboard whenever a user double-clicks it.
| Hook| Utility |
|--|--|
| useClick | Tracks when a user clicks an element |
| useDoubleClick |Tracks when a user double-clicks an element|
| useScroll| Tracks when a user is scroll inside a div |
| useSubmit| Tracks when a user is submit a form |
Basic example of the source code of useClickTracker:
import { UseTrackerProps } from "../interfaces/tracker";
import useGenericTracker from "./use-generic-tracker";
export default function useClickTracker({ tag }: UseTrackerProps) {
const { ref } = useGenericTracker({ tag, type: "click" });
return { ref };
}
In some case, you might want to send your own extra custom data, you can then provide a callback function to useGenericTracker. This callback will allow you to receive the event data and process it to return what interests you.
Example of callback with useScrollTracker:
import { UseTrackerProps } from "../interfaces/tracker";
import useGenericTracker from "./use-generic-tracker";
export default function useScrollTracker({ tag }: UseTrackerProps) {
const cb = (d: MouseEvent) => {
const { pageX, pageY } = d;
return {
pageX, pageY
}
}
const { ref } = useGenericTracker({ tag, type: "mousemove", cb, useDebounce: true });
return { ref };
}
UseGenericTracker props:
tag: string;
type: string;
cb?: (data: any) => void;
useDebounce?: boolean;
export const ratflowConfig = {
appId:
}
export const tags = {
mainAppScroll:
scrollLong:
btn:
form:
}
export const sdkOptions = {
trackMouse: true, //as you wish
useBeacon: false //as you wish
};
export const sdkConfig = {
auth: ratflowConfig,
options: sdkOptions
}
You can get the tags variable in your Ratflow dashboard when managing your app tags.
Inside your main.tsx or main.ts file:
import { sdkConfig } from "./ratflow";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
);
Example:
import { useAnalytics } from "ratflow-sdk-react";
function App() {
const { pathname } = useLocation();
const { setCurrentPage } = useAnalytics();
useEffect(() => {
setCurrentPage(pathname);
}, [pathname]);
return (
/!\ Your component App must be nested inside a BrowserRouter context for the previous example to work