DPO Radio

Free Website Privacy Check: Ensure Your Site's Compliant Now!
Background Image

ReactJS

Install Guide by ReactJS | AesirX Analytics

Step-by-step guide:

Step 1

Register your account at https://dapp.shield.aesirx.io/You will then get an email for user creation account.

Step 2

Activate your account by clicking verify in the email

Step 3

 Login to https://dapp.shield.aesirx.io/licenses site to get your LICENSE in your profile.

license

Step 4

Install package in your ReactJS App.

npm i aesirx-analytics

Step 5

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]

(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/licenses

- Disable Consent Popup

add this environment variable to .env

REACT_APP_DISABLE_ANALYTICS_CONSENT=true

Step 6

 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 {children};
};

export default AnalyticsContainer;

Wrap your component in <AnalyticsContainer><[YOUR-COMPONENT]/></AnalyticsContainer>

<AnalyticsContainer> need to using inside <Router> component

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 on-click="{()" => {initTrackEvent()}}> Search </button>
 );
}

Enjoyed this read? Share the blog!