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 NextJS App.
npm i aesirx-analyticsStep 3: Enviroment
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]
NEXT_PUBLIC_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` from https://dapp.shield.aesirx.io/- Disable Consent Popup
add this environment variable to .env
NEXT_PUBLIC_DISABLE_ANALYTICS_CONSENT=trueStep 4: Using
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
onClick={() => {
initTrackEvent();
}}
>
Search
</button>
);
};(endPoint is the link to your 1st party server which must be installed)
(referer is the referer domain)
Opt-in Consent
import dynamic from "next/dynamic";
const OptInConsent = dynamic(
() => import("aesirx-analytics").then((module) => module.OptInConsent),
{
loading: () => <div>Loading...</div>,
ssr: false,
}
);
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 NextJS please add isOptInReplaceAnalytics to our provider first
<AnalyticsNext router={useRouter()} isOptInReplaceAnalytics={true}>
<[YOUR-COMPONENT]/>
</AnalyticsNext>;<OptInConsent
optInConsentData={[
{
title: "payment",
content: `<div>YOUR_CONTENT_INPUT_HERE</div>`,
show: showModal,
handleConsent: handleConsent,
handleReject: handleReject,
replaceAnalyticsConsent: "true",
},
]}
/>;
