DPO Radio

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

Nextjs

Install Guide by NextJS | 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 NextJS App.

npm i aesirx-analytics

Step 5

Add the environment variable file (.env)

NEXT_PUBLIC_ENDPOINT_ANALYTICS_URL=https://example.com
NEXT_PUBLIC_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

NEXT_PUBLIC_DISABLE_ANALYTICS_CONSENT=true

Step 6

Using with next/router:

- Added in app.js:

import { useRouter } from "next/router";
import { AnalyticsNext } from "aesirx-analytics";

<AnalyticsNext router={useRouter()}>
<[YOUR-COMPONENT]/>
</AnalyticsNext>

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>
 );
}

(endPoint is the link to your 1st party server which must be installed)

(referer is the referer domain)

Enjoyed this read? Share the blog!