Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/latitudefinancialoss/react-event-tracker
Easily track events in your React application.
https://github.com/latitudefinancialoss/react-event-tracker
analytics analytics-tracking events react tracker tracking
Last synced: about 2 months ago
JSON representation
Easily track events in your React application.
- Host: GitHub
- URL: https://github.com/latitudefinancialoss/react-event-tracker
- Owner: LatitudeFinancialOSS
- License: mit
- Created: 2019-09-20T07:30:53.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T04:46:19.000Z (almost 2 years ago)
- Last Synced: 2024-04-23T22:38:50.090Z (9 months ago)
- Topics: analytics, analytics-tracking, events, react, tracker, tracking
- Language: JavaScript
- Size: 281 KB
- Stars: 9
- Watchers: 5
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-event-tracker
## Install
```shell
npm install --save react-event-tracker
```
## How to use
**App.js** - root level component
```js
import { useSiteTracking } from "react-event-tracker";
const trackingConfig = {
siteData: {
site: "my site",
},
pageTracking: {
trackPageView: ({ siteData, pageData }) => {
// Fire a page view to your analytics solution.
},
},
eventTracking: {
trackEvent: ({ siteData, pageData, eventData }) => {
// Fire a click event to your analytics solution.
},
},
};
function App() {
const { SiteTracking } = useSiteTracking(trackingConfig);
// Wrap your app with SiteTracking
return ...;
}
```
**ProductPage.js** - page level component
```js
import { usePageTracking } from "react-event-tracker";
// To automatically fire a page view, just pass the `pageData` to `usePageTracking`. This will call your `trackingConfig.pageTracking.trackPageView` once the page mounts.
function ProductPage() {
usePageTracking({
page: "my_product",
});
...
}
// If you don't want to fire the page view immediately after the page gets mounted, you can fire it yourself based on any logic you want.
function ProductPage(props) {
const [products, setProducts] = useState();
const { trackPageView } = usePageTracking({
page: "my_product",
products // will be fetched from the server
}, {
trackPageViewByDefault: false
});
useEffect(() => {
if (products) {
trackPageView();
}
}, [products, trackPageView]); // react-event-tracker guarantees that trackPageView will never change
...
}
```
**Note:** Make sure that you never render more than one page level component at a given time.
**Content.js** - any component deep inside the tree
```js
import { useEventTracking } from "react-event-tracker";
function Content() {
const { trackEvent } = useEventTracking();
return (
...
{
/*
Here is the core of what this library does.
You call `trackEvent` (provided by `react-event-tracker`) with `eventData`.
In return, `react-event-tracker` will call your own `trackEvent` (that you defined in the `trackingConfig` above) with `siteData`, `pageData`, and `eventData`.
*/
trackEvent({ button: "Apply" });
}}
>
Apply
...
)
}
```
## Writing to `localStorage`
Sometimes, when tracking a page view, you may want to track the traffic source.
For example, say you are tracking page views of the Application page. It could be very useful to know how users have arrived to the Application page. Did they click the "Apply" link in the header on the Home page? Maybe the "Apply" link in the footer? Or, maybe, they landed on the Application page after clicking "Apply" on your Product Page?
One way to track this, is to write to `localStorage` when users click the "Apply" link. Then, read from `localStorage` in the `trackPageView` function.
```js
const trackingConfig = {
...
eventTracking: {
storeTrafficSource: ({ pageData, eventData }) => {
localStorage.setItem(
"traffic_source",
`${pageData.page}:${eventData.source}`
);
}
}
};
```
```js
import { useEventTracking } from "react-event-tracker";
function Content() {
const { storeTrafficSource } = useEventTracking();
return (
...
{/*
You call `storeTrafficSource` (provided by `react-event-tracker`) with `eventData`.
In return, `react-event-tracker` will call your own `storeTrafficSource` (that you defined in the `trackingConfig` above) with `siteData`, `pageData`, and `eventData`.
*/}
{
// This will write "my_product:apply" to "traffic_source" in `localStorage`.
storeTrafficSource({ source: "apply" });
}}
>
Apply
...
)
}
```
## Building a query string
When linking to external sites, you may want to add query string parameters based on `siteData`, `pageData`, and/or `eventData`.
Add a `getQueryString` function to `eventTracking`, e.g.:
```js
const trackingConfig = {
eventTracking: {
getQueryString: ({ siteData, pageData, eventData }) => {
const dataLayer = {
...siteData,
...pageData,
...eventData,
};
return Object.keys(dataLayer)
.map((key) => `${key}=${encodeURIComponent(dataLayer[key])}`)
.join("&");
},
},
};
```
Then, call `getQueryString` that is given to you by `useEventTracking`.
```js
import { useEventTracking } from "react-event-tracker";
function Content() {
const { getQueryString } = useEventTracking();
return (
...
{/*
You call `getQueryString` (provided by `react-event-tracker`) with `eventData`.
In return, `react-event-tracker` will call your own `getQueryString` (that you defined in the `trackingConfig` above) with `siteData`, `pageData`, and `eventData`.
*/}
Apply on external site
...
)
}
```
## Related
- [tealium-tracker](https://github.com/LatitudeFinancialOSS/tealium-tracker) - Easily integrate with [Tealium](https://tealium.com)