aesirx-analytics 2.3.6 → 2.4.1

package/README.md

@@ -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
@@ -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
 
@@ -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:
@@ -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:
@@ -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"
-    },
-  ]}
-/>
-```