Skip to content

Split consent #335

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vietredweb merged 6 commits into from
Dec 27, 2024
Merged

Split consent #335

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7d1e86a
Split consent
vietredweb Dec 25, 2024
8ff27ee
Split consent
vietredweb Dec 26, 2024
fdb7926
Fix lint
vietredweb Dec 27, 2024
05d3e85
Update readme
vietredweb Dec 27, 2024
cf3c052
Update tracker
vietredweb Dec 27, 2024
3a45a8c
Fix conflict
vietredweb Dec 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
244 changes: 2 additions & 242 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ A powerful and compliant web Analytics platform (1st-party alternative to Google

AesirX Analytics comes with a locally hosted JavaScript solution that gathers and stores data legally and compliantly in accordance with GDPR and other regional legislation including storage of citizens’ data in-country and 1st-party.

*Important Change: AesirX Consent was split to another packages https://github.com/aesirxio/consent

## Setup instructions

### Setup the 1st party server
Expand All @@ -21,22 +23,11 @@ Follow the instructions in: [https://github.com/aesirxio/analytics-1stparty](htt
```
<script>
window.aesirx1stparty = "https://example.com"
window.aesirxClientID="[REPLACE THIS WITH THE PROVIDED CLIENT_ID]"
window.aesirxClientSecret="[REPLACE THIS WITH THE PROVIDED CLIENT_SECRET]"
</script>
<script async defer src="YOUR_PROJECT_PATH/analytics.js"></script>
```

1. (`https://example.com` is the link to your 1st party server which must be installed)
2. `CLIENT_ID` replace this with the provided `CLIENT_ID` from https://dapp.shield.aesirx.io/
3. `CLIENT_SECRET` replace this with the provided `CLIENT_SECRET` fromhttps://dapp.shield.aesirx.io/

##### Disable Consent Popup:
```
<script>
window.disableAnalyticsConsent = "true"
</script>
```

#### Usage in ReactJS

Expand All @@ -46,18 +37,8 @@ Follow the instructions in: [https://github.com/aesirxio/analytics-1stparty](htt

```
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=true
```

###### With react-router-dom v5:
Expand Down Expand Up @@ -89,12 +70,8 @@ export default AnalyticsContainer;

```
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` fromhttps://dapp.shield.aesirx.io/
```

##### Disable Consent Popup:
Expand Down Expand Up @@ -239,220 +216,3 @@ const CustomEvent = () => {
(`endPoint` is the link to your 1st party server which must be installed)

(`referer` is the referer domain)

## Customize CSS for Consent modal
Please follow below CSS example:
```
// Customize toast
.aesirxconsent .toast {
--aesirxconsent-toast-font-size: 16px;
--aesirxconsent-toast-padding-x: 0.75rem;
--aesirxconsent-toast-padding-y: 0.5rem;
--aesirxconsent-toast-spacing: 1.5rem;
--aesirxconsent-toast-zindex: 1049;
}
// Customize button
.aesirxconsent .btn {
--aesirxconsent-btn-font-size: 16px;
--aesirxconsent-btn-padding-x: 0.75rem;
--aesirxconsent-btn-padding-y: 0.375rem;
--aesirxconsent-btn-font-weight: 400;
--aesirxconsent-btn-line-height: 1.5;
}
// Customize button success
.aesirxconsent .btn-success {
--aesirxconsent-btn-color: #000;
--aesirxconsent-btn-bg: #1ab394;
--aesirxconsent-btn-border-color: #1ab394;
--aesirxconsent-btn-hover-color: #000;
--aesirxconsent-btn-hover-bg: #3cbea4;
--aesirxconsent-btn-hover-border-color: #31bb9f;
--aesirxconsent-btn-focus-shadow-rgb: 22, 152, 126;
--aesirxconsent-btn-active-color: #000;
--aesirxconsent-btn-active-bg: #48c2a9;
--aesirxconsent-btn-active-border-color: #31bb9f;
--aesirxconsent-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--aesirxconsent-btn-disabled-color: #000;
--aesirxconsent-btn-disabled-bg: #1ab394;
--aesirxconsent-btn-disabled-border-color: #1ab394;
}
// To customize CSS for dark mode (Bootstrap dark mode)
[data-bs-theme=dark] .aesirxconsent {
color: #fff;
}
```


## Choose template for Consent modal

There is 5 template for Consent modal
1. default (recommend)
1. Support Advance Consent Mode v2
2. simple-consent-mode
1. Support Basic Consent Mode v2

#### Usage in SSR site:
```
<script>
window.consentLayout = "default"
</script>
```

#### In ReactJS:

add this environment variable to `.env`
```
REACT_APP_CONSENT_LAYOUT=default
```

#### In NextJS:

add this environment variable to `.env`
```
NEXT_PUBLIC_CONSENT_LAYOUT=default
```

## Opt-in Consent

#### Usage in SSR site:
```
<script>
window.optInConsentData = `[
{
"title":"payment",
"content":"<div>YOUR_CONTENT_INPUT_HERE</div>"
}
]`;

//trigger open optIn consent with Javascript
document.querySelector('.opt-in-consent.payment').classList.add('show');
</script>
```

(We also provive option `replaceAnalyticsConsent` to replace Analytics Consent with Opt-in Consent)
```
<script>
window.optInConsentData = `[
{
"title":"payment",
"content":"<div>YOUR_CONTENT_INPUT_HERE</div>",
"replaceAnalyticsConsent": "true"
}
]`
</script>
```

#### In ReactJS:
```
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
```
<AnalyticsReact location={location} history={history} isOptInReplaceAnalytics={true}>
{children}
</AnalyticsReact>
```
```
<OptInConsent
optInConsentData={[
{
title: 'payment',
content: `<div>YOUR_CONTENT_INPUT_HERE</div>`,
show: showModal,
handleConsent: handleConsent,
handleReject: handleReject,
replaceAnalyticsConsent: "true"
},
]}
/>
```
#### In NextJS:
```
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"
},
]}
/>
```
18 changes: 2 additions & 16 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "aesirx-analytics",
"version": "2.3.6",
"version": "2.4.0",
"license": "GPL-3.0-only",
"author": "AesirX",
"repository": "https://gitlab.redweb.dk/aesirx/analytics",
Expand All @@ -9,30 +9,16 @@
"types": "dist/index.d.ts",
"type": "module",
"dependencies": {
"@concordium/browser-wallet-api-helpers": "3.0.1",
"@concordium/react-components": "0.6.1",
"@concordium/web-sdk": "7.0.4-rc.3",
"@web3modal/ethereum": "^2.7.0",
"@web3modal/react": "^2.7.0",
"aesirx-sso": "^1.4.18",
"axios": "^1.7.4",
"bootstrap": "^5.3.2",
"bowser": "^2.11.0",
"buffer": "^6.0.3",
"ethers": "^6.6.5",
"i18next": "^23.6.0",
"i18next-browser-languagedetector": "^7.2.1",
"murmurhash-js": "^1.0.0",
"next": "^14.2.10",
"query-string": "^7.1.1",
"react": "^18.3.1",
"react-bootstrap": "^2.8.0",
"react-content-loader": "^7.0.0",
"react-device-detect": "^2.2.3",
"react-dom": "18",
"react-select": "^5.8.0",
"react-toastify": "^9.1.3",
"wagmi": "^1.3.2"
"react-toastify": "^9.1.3"
},
"scripts": {
"dev": "NODE_ENV=development tsup --watch",
Expand Down
Loading
Loading