A utility that centralize several analytics systems
A utility that centralize several analytics systems. This library add the neccesary scripts to run the analytics that are used on your system
Currently supports:
npm i --save @couds/react-analytics
After installing you just need to add the AnalyticsContext to on your top view, this will add only the scripts that you need (if you only pass the gtm prop will not download the rest of services for example)
import React from 'react';
import Analytics from '@couds/react-analytics';
const App = () => {
return (
<Analytics gtm="XXXX" hotjar="XXXX" segment="XXXX" fullstory="xxxx">
{/* The rest of your app */}
</Analytics>
);
};
export default App;
import React, { useEffect, useContext } from 'react';
import { AnalyticsContext } from 'views/components/analytics';
const MyInnerView = () => {
const { trackEvent, identify, trackPage } = useContext(AnalyticsContext);
useEffect(() => {
// Track this page
trackPage();
// Identify user on analytids that allow indentifying
identify('user-id', {
name: 'test',
otherprop: 2,
});
}, []);
const onClick = () => {
// You can send custom events this way
trackEvent('my-custom-event', {
prop1: 'custom value',
});
};
return (
...
);
}
gtm.js
, because it send a event undefined
, We send a custom event named pageView
.To setup the tracking when the user navigate you should create a new trigger of tyoe Custom Event
wieh the event name pageView