Step 1: Create an AesirX Account
- Visit https://signup.aesirx.io/.
- If you don't have an AesirX account, click on the option to create one.
- Enter your email address, choose a privacy ID, and select "First Party Analytics" from the Solutions drop-down menu.
- Enter your domain name and click "Verify" to submit your request.
- Check your email (including spam folder) for a confirmation message containing your license ID.
Step 2: Install Analytics
Install package in your ReactJS App.
npm i aesirx-analyticsStep 3: Enviroment
Add the environment variable file (.env)
REACT_APP_ENDPOINT_ANALYTICS_URL=https://example.com
REACT_APP_SSO_CLIENT_ID=[REPLACE THIS WITH THE PROVIDED CLIENT_ID]
REACT_APP_SSO_CLIENT_SECRET=[REPLACE THIS WITH THE PROVIDED CLIENT_SECRET]
(https://example.com is the link to your 1st party server)
`CLIENT_ID` replace this with the provided `CLIENT_ID` from https://dapp.shield.aesirx.io/
`CLIENT_SECRET` replace this with the provided `CLIENT_SECRET` fromhttps://dapp.shield.aesirx.io/- Disable Consent Popup
add this environment variable to .env
REACT_APP_DISABLE_ANALYTICS_CONSENT=trueStep 4: Using
Using with react-router-dom v5:
- Create AnalyticsContainer component:
import React from "react";
import { useLocation, useHistory } from "react-router-dom";
import { AnalyticsReact } from "aesirx-analytics";
const AnalyticsContainer = ({ children }) => {
const location = useLocation();
let history = useHistory();
return (
<AnalyticsReact location={location} history={history}>
{children}
</AnalyticsReact>
);
};
export default AnalyticsContainer;Track events
import { trackEvent, AnalyticsContext } from "aesirx-analytics";
const CustomEvent = () => {
const AnalyticsStore = useContext(AnalyticsContext);
const initTrackEvent = async () => {
await trackEvent(endPoint, AnalyticsStore.visitor_uuid, referer, {
event_name: "Submit",
event_type: "submit",
attributes: [
{
name: "<name-1>",
value: "<value-1>",
},
{
name: "<name-2>",
value: "<value-2>",
},
],
});
};
return (
<button
onClick={() => {
initTrackEvent();
}}
>
Search
</button>
);
};Opt-in Consent
const OptInConsent = React.lazy(() =>
import("./OptInConsent").then((module) => ({ default: module.OptInConsent }))
);
const ConsentComponent = () => {
const [showModal, setShowModal] = useState(false);
const handleOpen = () => {
setShowModal(true);
};
const handleConsent = () => {
setShowModal(false);
};
const handleReject = () => {
setShowModal(false);
};
return (
<>
<OptInConsent
optInConsentData={[
{
title: "payment",
content: `<div>YOUR_CONTENT_INPUT_HERE</div>`,
show: showModal,
handleConsent: handleConsent,
handleReject: handleReject,
},
]}
/>
</>
);
};(We also provive option replaceAnalyticsConsent to replace Analytics Consent with Opt-in Consent) To use this in ReactJS please add isOptInReplaceAnalytics to our provider first
<OptInConsent
optInConsentData={[
{
title: "payment",
content: `<div>YOUR_CONTENT_INPUT_HERE</div>`,
show: showModal,
handleConsent: handleConsent,
handleReject: handleReject,
replaceAnalyticsConsent: "true",
},
]}
/>;
