diff --git a/README.md b/README.md index 00da483..b3d0a4a 100644 --- a/README.md +++ b/README.md @@ -286,13 +286,10 @@ Please follow below CSS example: ## Choose template for Consent modal There is 5 template for Consent modal -1. original -2. default (recommend) -3. simple-consent-mode - 1. Support Basic Consent Mode v2 -4. advance-consent-mode +1. default (recommend) 1. Support Advance Consent Mode v2 -5. simple-web-2 +2. simple-consent-mode + 1. Support Basic Consent Mode v2 #### Usage in SSR site: ``` diff --git a/src/AnalyticsNext/index.tsx b/src/AnalyticsNext/index.tsx index 2c7b803..31a9246 100644 --- a/src/AnalyticsNext/index.tsx +++ b/src/AnalyticsNext/index.tsx @@ -28,7 +28,9 @@ const AnalyticsNext = ({ isOptInReplaceAnalytics = false, children, }: AnalyticsNext) => { - const [layout, setLayout] = useState(process.env.NEXT_PUBLIC_CONSENT_LAYOUT ?? 'simple-web-2'); + const [layout, setLayout] = useState( + process.env.NEXT_PUBLIC_CONSENT_LAYOUT ?? 'simple-consent-mode' + ); const [gtagId, setGtagId] = useState(process.env.NEXT_PUBLIC_ANALYTICS_GTAG_ID); const [gtmId, setGtmId] = useState(process.env.NEXT_PUBLIC_ANALYTICS_GTM_ID); useEffect(() => { diff --git a/src/AnalyticsReact/index.tsx b/src/AnalyticsReact/index.tsx index 8cc6f57..9c98073 100644 --- a/src/AnalyticsReact/index.tsx +++ b/src/AnalyticsReact/index.tsx @@ -22,7 +22,9 @@ const AnalyticsReact = ({ isOptInReplaceAnalytics = false, children, }: AnalyticsReact) => { - const [layout, setLayout] = useState(process.env.REACT_APP_CONSENT_LAYOUT ?? 'simple-web-2'); + const [layout, setLayout] = useState( + process.env.REACT_APP_CONSENT_LAYOUT ?? 'simple-consent-mode' + ); const [gtagId, setGtagId] = useState(process.env.REACT_APP_ANALYTICS_GTAG_ID); const [gtmId, setGtmId] = useState(process.env.REACT_APP_ANALYTICS_GTM_ID); useEffect(() => { diff --git a/src/Components/Consent.tsx b/src/Components/Consent.tsx index 5e6cc26..acba35d 100644 --- a/src/Components/Consent.tsx +++ b/src/Components/Consent.tsx @@ -608,7 +608,7 @@ const ConsentComponentApp = (props: WalletConnectionPropsExtends) => { element.click(); }; - const loadConsentDefault = (gtagId: any, gtmId: any) => { + const loadConsentDefault = async (gtagId: any, gtmId: any) => { window.dataLayer = window.dataLayer || []; function gtag( // eslint-disable-next-line @typescript-eslint/no-unused-vars p0: string, // eslint-disable-next-line @typescript-eslint/no-unused-vars @@ -618,26 +618,47 @@ const ConsentComponentApp = (props: WalletConnectionPropsExtends) => { // eslint-disable-next-line prefer-rest-params dataLayer.push(arguments); } - gtag('consent', 'default', { - ad_user_data: 'denied', - ad_personalization: 'denied', - ad_storage: 'denied', - analytics_storage: 'denied', - wait_for_update: 500, - }); - if (gtagId) { - gtag('js', new Date()); - gtag('config', `${gtagId}`); - } - if (gtmId) { - dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); - } - if (layout === 'advance-consent-mode') { - gtagId && loadGtagScript(gtagId); - gtmId && loadGtmScript(gtmId); + if (layout !== 'simple-consent-mode' && sessionStorage.getItem('consentGranted') !== 'true') { + gtag('consent', 'default', { + ad_user_data: 'denied', + ad_personalization: 'denied', + ad_storage: 'denied', + analytics_storage: 'denied', + wait_for_update: 500, + }); gtag('set', 'url_passthrough', true); gtag('set', 'ads_data_redaction', true); } + if ( + (layout !== 'simple-consent-mode' || sessionStorage.getItem('consentGranted') === 'true') && + ((gtmId && + !document.querySelector( + `script[src="https://www.googletagmanager.com/gtm.js?id=${gtmId}"]` + )) || + (gtagId && + !document.querySelector( + `script[src="https://www.googletagmanager.com/gtag/js?id=${gtagId}"]` + ))) + ) { + gtagId && (await loadGtagScript(gtagId)); + gtmId && (await loadGtmScript(gtmId)); + if (gtagId) { + gtag('js', new Date()); + gtag('config', `${gtagId}`); + } + if (gtmId) { + dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); + } + } + + if (sessionStorage.getItem('consentGranted') === 'true') { + gtag('consent', 'update', { + ad_user_data: 'granted', + ad_personalization: 'granted', + ad_storage: 'granted', + analytics_storage: 'granted', + }); + } }; useEffect(() => { @@ -651,9 +672,12 @@ const ConsentComponentApp = (props: WalletConnectionPropsExtends) => { setShowBackdrop(false); setShowExpandConsent(false); } - (gtagId || gtmId) && loadConsentDefault(gtagId, gtmId); }, []); + useEffect(() => { + (gtagId || gtmId) && loadConsentDefault(gtagId, gtmId); + }, [layout]); + console.log('level', uuid, level, web3ID, account, loading); return ( diff --git a/src/Components/ConsentCustom.tsx b/src/Components/ConsentCustom.tsx index 9a1d1db..6f402ad 100644 --- a/src/Components/ConsentCustom.tsx +++ b/src/Components/ConsentCustom.tsx @@ -195,12 +195,12 @@ const ConsentComponentCustomApp = (props: any) => { const revoke = sessionStorage.getItem('aesirx-analytics-revoke'); // Metamask const { address, connector } = - (layout === 'simple-consent-mode' || layout === 'simple-web-2' || level === 1) && + (layout === 'simple-consent-mode' || level === 1) && (!revoke || revoke === '0' || revoke === '1') ? { address: '', connector: '' } : useAccount(); const { signMessage }: any = - (layout === 'simple-consent-mode' || layout === 'simple-web-2' || level === 1) && + (layout === 'simple-consent-mode' || level === 1) && (!revoke || revoke === '0' || revoke === '1') ? { signMessage: {} } : useSignMessage({ @@ -703,9 +703,12 @@ const ConsentComponentCustomApp = (props: any) => { ) { window.funcAfterConsent && window.funcAfterConsent(); } - (gtagId || gtmId) && loadConsentDefault(gtagId, gtmId); }, []); + useEffect(() => { + (gtagId || gtmId) && loadConsentDefault(gtagId, gtmId); + }, [layout]); + useEffect(() => { if ( showExpandRevoke && @@ -745,7 +748,7 @@ const ConsentComponentCustomApp = (props: any) => { ); }; - const loadConsentDefault = (gtagId: any, gtmId: any) => { + const loadConsentDefault = async (gtagId: any, gtmId: any) => { window.dataLayer = window.dataLayer || []; function gtag( // eslint-disable-next-line @typescript-eslint/no-unused-vars p0: string, // eslint-disable-next-line @typescript-eslint/no-unused-vars @@ -755,25 +758,45 @@ const ConsentComponentCustomApp = (props: any) => { // eslint-disable-next-line prefer-rest-params dataLayer.push(arguments); } - gtag('consent', 'default', { - ad_user_data: 'denied', - ad_personalization: 'denied', - ad_storage: 'denied', - analytics_storage: 'denied', - wait_for_update: 500, - }); - if (gtagId) { - gtag('js', new Date()); - gtag('config', `${gtagId}`); - } - if (gtmId) { - dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); + if ( + (layout !== 'simple-consent-mode' || sessionStorage.getItem('consentGranted') === 'true') && + ((gtmId && + !document.querySelector( + `script[src="https://www.googletagmanager.com/gtm.js?id=${gtmId}"]` + )) || + (gtagId && + !document.querySelector( + `script[src="https://www.googletagmanager.com/gtag/js?id=${gtagId}"]` + ))) + ) { + gtagId && (await loadGtagScript(gtagId)); + gtmId && (await loadGtmScript(gtmId)); + if (gtagId) { + gtag('js', new Date()); + gtag('config', `${gtagId}`); + } + if (gtmId) { + dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); + } } - if (layout === 'advance-consent-mode') { - gtagId && loadGtagScript(gtagId); - gtmId && loadGtmScript(gtmId); + if (layout !== 'simple-consent-mode' && sessionStorage.getItem('consentGranted') !== 'true') { gtag('set', 'url_passthrough', true); gtag('set', 'ads_data_redaction', true); + gtag('consent', 'default', { + ad_user_data: 'denied', + ad_personalization: 'denied', + ad_storage: 'denied', + analytics_storage: 'denied', + wait_for_update: 500, + }); + } + if (sessionStorage.getItem('consentGranted') === 'true') { + gtag('consent', 'update', { + ad_user_data: 'granted', + ad_personalization: 'granted', + ad_storage: 'granted', + analytics_storage: 'granted', + }); } }; const paymentRevoke = sessionStorage.getItem('aesirx-analytics-opt-payment'); @@ -1163,7 +1186,7 @@ const ConsentComponentCustomApp = (props: any) => { level === 4 && !account && !address ? '' : 'd-none' }`} > - {layout !== 'simple-consent-mode' && layout !== 'simple-web-2' && ( + {layout !== 'simple-consent-mode' && ( @@ -1262,7 +1285,7 @@ const ConsentComponentCustomApp = (props: any) => { {t('txt_yes_i_consent')} )} - {layout === 'simple-consent-mode' || layout === 'simple-web-2' ? ( + {layout === 'simple-consent-mode' ? ( <> ) : ( <> @@ -1341,7 +1364,7 @@ const ConsentComponentCustomApp = (props: any) => { {t('txt_yes_i_consent')} )} - {layout === 'simple-consent-mode' || layout === 'simple-web-2' ? ( + {layout === 'simple-consent-mode' ? ( <> ) : ( <> diff --git a/src/Components/Ethereum/index.tsx b/src/Components/Ethereum/index.tsx index 878ee2c..620f8a4 100644 --- a/src/Components/Ethereum/index.tsx +++ b/src/Components/Ethereum/index.tsx @@ -119,7 +119,7 @@ const SSOEthereumProvider = ({ children, layout, level }: any) => { ]); const revoke = sessionStorage.getItem('aesirx-analytics-revoke'); const wagmiConfig: any = - (layout === 'simple-consent-mode' || layout === 'simple-web-2' || level === 1) && + (layout === 'simple-consent-mode' || level === 1) && (!revoke || revoke === '0' || revoke === '1') ? {} : createConfig({ @@ -132,7 +132,7 @@ const SSOEthereumProvider = ({ children, layout, level }: any) => { const ethereumClient = new EthereumClient(wagmiConfig, chains); return ( <> - {(layout === 'simple-consent-mode' || layout === 'simple-web-2' || level === 1) && + {(layout === 'simple-consent-mode' || level === 1) && (!revoke || revoke === '0' || revoke === '1') ? ( <>{children} ) : ( diff --git a/src/Components/Terms.tsx b/src/Components/Terms.tsx index c5541fa..78aa1c2 100644 --- a/src/Components/Terms.tsx +++ b/src/Components/Terms.tsx @@ -139,7 +139,7 @@ const TermsComponent = ({ > {isRejectedLayout ? ( @@ -240,7 +240,7 @@ const TermsComponent = ({ )} - +

{t('txt_manage_your_consent')} @@ -350,7 +350,7 @@ const TermsComponent = ({

- +

{t('txt_our_commitment_in_action')} diff --git a/src/Hooks/useConsentStatus.ts b/src/Hooks/useConsentStatus.ts index 9c0a5d5..30b7444 100644 --- a/src/Hooks/useConsentStatus.ts +++ b/src/Hooks/useConsentStatus.ts @@ -84,7 +84,7 @@ const useConsentStatus = (endpoint?: string, layout?: string, props?: WalletConn const rpc = useGrpcClient(network); useEffect(() => { - if (rpc && layout !== 'simple-consent-mode' && layout !== 'simple-web-2' && level !== 1) { + if (rpc && layout !== 'simple-consent-mode' && level !== 1) { setRpcGenesisHash(undefined); rpc .getConsensusStatus() @@ -134,7 +134,7 @@ const useConsentStatus = (endpoint?: string, layout?: string, props?: WalletConn const handleLevel = useCallback( async (_level: number) => { - if (layout !== 'simple-consent-mode' && layout !== 'simple-web-2') { + if (layout !== 'simple-consent-mode') { setLevel(_level); if (_level > 3 && isDesktop && !connection && window['concordium']) { setActiveConnectorType(BROWSER_WALLET); diff --git a/src/analytics.tsx b/src/analytics.tsx index 92bf8e4..cf267b4 100644 --- a/src/analytics.tsx +++ b/src/analytics.tsx @@ -27,7 +27,7 @@ declare global { } const ConsentPopup = ({ visitor_uuid, event_uuid }: any) => { window.process = { env: '' }; - const [layout, setLayout] = useState(window['consentLayout'] ?? 'simple-web-2'); + const [layout, setLayout] = useState(window['consentLayout'] ?? 'simple-consent-mode'); const [gtagId, setGtagId] = useState(window['analyticsGtagId']); const [gtmId, setGtmId] = useState(window['analyticsGtmId']); useEffect(() => { diff --git a/src/styles/style.scss b/src/styles/style.scss index 7719268..e4e5886 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -537,4 +537,19 @@ body { } } } + +.aesirxsso, +.aesirxconsent { + .fade, + &.fade { + opacity: 1; + } + &.modal.fade .modal-dialog { + transform: none; + } + .btn { + text-transform: unset; + white-space: normal; + } +} @import './color-mode.scss'; diff --git a/src/translations/dk/common.json b/src/translations/dk/common.json index 4039c43..4ca3554 100644 --- a/src/translations/dk/common.json +++ b/src/translations/dk/common.json @@ -125,5 +125,7 @@ "txt_payment_1": "Denne tjeneste vil sætte cookies og indsamle data for at understøtte betalingsgateway-behandling.", "txt_payment_2": "For at fuldføre dit køb vil ordre- & brugerdata blive delt med Sellix & Stripe som vores betalingsbehandlere. (*Google reCaptcha bruges af betalingsbehandlerne af sikkerhedsmæssige årsager.)", "txt_payment_3": "Hvis du ikke giver samtykke til denne dataudveksling, vil du ikke kunne fuldføre betalingen.", - "txt_payment_4": "For mere information, henvises til vores privatlivspolitik.." + "txt_payment_4": "For mere information, henvises til vores privatlivspolitik..", + "txt_consent_nanagement": "Samtykkestyring", + "txt_details": "Detaljer" } diff --git a/src/translations/en/common.json b/src/translations/en/common.json index 2c057ad..ac23fcf 100644 --- a/src/translations/en/common.json +++ b/src/translations/en/common.json @@ -125,5 +125,7 @@ "txt_payment_1": "This service will set cookies & collect data to support payment gateway processing.", "txt_payment_2": "To complete your purchase, order & user data will be shared with Sellix & Stripe as our payment processors. (*Google reCaptcha is used by the payment processors for security purposes.)", "txt_payment_3": "If you do not consent to this data sharing, you will not be able to complete the payment.", - "txt_payment_4": "For more information, please refer to our privacy policy." + "txt_payment_4": "For more information, please refer to our privacy policy.", + "txt_consent_nanagement": "Consent Management", + "txt_details": "Details" } diff --git a/src/translations/es/common.json b/src/translations/es/common.json index f1e7825..085285b 100644 --- a/src/translations/es/common.json +++ b/src/translations/es/common.json @@ -125,5 +125,7 @@ "txt_payment_1": "Este servicio establecerá cookies y recopilará datos para respaldar el procesamiento de la pasarela de pagos.", "txt_payment_2": "Para completar su compra, los datos del pedido & del usuario se compartirán con Sellix & Stripe como nuestros procesadores de pagos. (*Google reCaptcha es utilizado por los procesadores de pagos por razones de seguridad.)", "txt_payment_3": "Si no consiente compartir estos datos, no podrá completar el pago.", - "txt_payment_4": "Para más información, por favor consulte nuestra política de privacidad." + "txt_payment_4": "Para más información, por favor consulte nuestra política de privacidad.", + "txt_consent_nanagement": "Gestión del consentimiento", + "txt_details": "Detalles" } diff --git a/src/translations/fr/common.json b/src/translations/fr/common.json index b0a1b56..328b285 100644 --- a/src/translations/fr/common.json +++ b/src/translations/fr/common.json @@ -125,5 +125,7 @@ "txt_payment_1": "Ce service installera des cookies et collectera des données pour prendre en charge le traitement de la passerelle de paiement.", "txt_payment_2": "Pour finaliser votre achat, les données de commande & d'utilisateur seront partagées avec Sellix & Stripe nos processeurs de paiement. (*Google reCaptcha est utilisé par les processeurs de paiement pour des raisons de sécurité.)", "txt_payment_3": "Si vous ne consentez pas à ce partage de données, vous ne pourrez pas finaliser le paiement.", - "txt_payment_4": "Pour plus d'informations, veuillez consulter notre politique de confidentialité." + "txt_payment_4": "Pour plus d'informations, veuillez consulter notre politique de confidentialité.", + "txt_consent_nanagement": "Gestion du consentement", + "txt_details": "Détails" } diff --git a/src/translations/hr/common.json b/src/translations/hr/common.json index 3c80355..7131d43 100644 --- a/src/translations/hr/common.json +++ b/src/translations/hr/common.json @@ -125,5 +125,7 @@ "txt_payment_1": "Ova usluga postavit će kolačiće i prikupljati podatke za podršku obradi platnog prolaza.", "txt_payment_2": "Za dovršetak kupnje, podaci o narudžbi & korisniku će biti podijeljeni s Sellix & Stripe kao našim procesorima plaćanja. (*Google reCaptcha koristi se od strane procesora plaćanja iz sigurnosnih razloga.)", "txt_payment_3": "Ako ne pristanete na ovo dijeljenje podataka, nećete moći dovršiti plaćanje.", - "txt_payment_4": "Za više informacija, molimo pogledajte našu politiku privatnosti." + "txt_payment_4": "Za više informacija, molimo pogledajte našu politiku privatnosti.", + "txt_consent_nanagement": "Upravljanje pristankom", + "txt_details": "Detalji" } diff --git a/src/translations/th/common.json b/src/translations/th/common.json index 86dafbf..85b1577 100644 --- a/src/translations/th/common.json +++ b/src/translations/th/common.json @@ -125,5 +125,7 @@ "txt_payment_1": "บริการนี้จะตั้งค่าคุกกี้และรวบรวมข้อมูลเพื่อรองรับการประมวลผลเกตเวย์การชำระเงิน.", "txt_payment_2": "เพื่อทำการซื้อให้เสร็จสมบูรณ์ ข้อมูลการสั่งซื้อและข้อมูลผู้ใช้ จะถูกแบ่งปันกับ Sellix & Stripe ในฐานะ ตัวประมวลผลการชำระเงิน ของเรา (*Google reCaptcha ถูกใช้โดย ตัวประมวลผลการชำระเงิน เพื่อวัตถุประสงค์ด้าน ความปลอดภัย)", "txt_payment_3": "หากคุณไม่ยินยอมให้แบ่งปันข้อมูลนี้ คุณจะไม่สามารถทำการชำระเงินให้เสร็จสมบูรณ์ได้", - "txt_payment_4": "สำหรับข้อมูลเพิ่มเติม โปรดดู นโยบายความเป็นส่วนตัว ของเรา" + "txt_payment_4": "สำหรับข้อมูลเพิ่มเติม โปรดดู นโยบายความเป็นส่วนตัว ของเรา", + "txt_consent_nanagement": "การจัดการความยินยอม", + "txt_details": "รายละเอียด" } diff --git a/src/translations/ua/common.json b/src/translations/ua/common.json index 5fb0ba9..bef8e58 100644 --- a/src/translations/ua/common.json +++ b/src/translations/ua/common.json @@ -125,5 +125,7 @@ "txt_payment_1": "Ця послуга буде встановлювати файли cookie та збирати дані для підтримки обробки платіжного шлюзу.", "txt_payment_2": "To complete your purchase, order & user data will be shared with Sellix & Stripe as our payment processors. (*Google reCaptcha is used by the payment processors for security purposes.)", "txt_payment_3": "Якщо ви не погоджуєтеся на передачу цих даних, ви не зможете завершити платіж.", - "txt_payment_4": "Для отримання додаткової інформації, будь ласка, ознайомтеся з нашою політикою конфіденційності." + "txt_payment_4": "Для отримання додаткової інформації, будь ласка, ознайомтеся з нашою політикою конфіденційності.", + "txt_consent_nanagement": "Керування згодою", + "txt_details": "Деталі" } diff --git a/src/translations/vi/common.json b/src/translations/vi/common.json index ed0c99f..8456adf 100644 --- a/src/translations/vi/common.json +++ b/src/translations/vi/common.json @@ -125,5 +125,7 @@ "txt_payment_1": "Dịch vụ này sẽ cài đặt cookie và thu thập dữ liệu để hỗ trợ xử lý cổng thanh toán.", "txt_payment_2": "Để hoàn tất việc mua hàng, dữ liệu đơn hàng & người dùng sẽ được chia sẻ với Sellix & Stripe là những bộ xử lý thanh toán của chúng tôi. (*Google reCaptcha được các bộ xử lý thanh toán sử dụng cho mục đích security bảo mật.)", "txt_payment_3": "Nếu bạn không đồng ý chia sẻ dữ liệu này, bạn sẽ không thể hoàn tất thanh toán.", - "txt_payment_4": "Để biết thêm thông tin, vui lòng tham khảo chính sách bảo mật của chúng tôi." + "txt_payment_4": "Để biết thêm thông tin, vui lòng tham khảo chính sách bảo mật của chúng tôi.", + "txt_consent_nanagement": "Quản lý sự đồng ý", + "txt_details": "Chi tiết" } diff --git a/src/utils/consent.ts b/src/utils/consent.ts index 7efd66d..1b34f94 100644 --- a/src/utils/consent.ts +++ b/src/utils/consent.ts @@ -71,18 +71,32 @@ const agreeConsents = async ( declare const dataLayer: any[]; const consentModeGrant = async (isGtag: any, id: any, layout: any) => { - if (layout !== 'advance-consent-mode') { - isGtag ? loadGtagScript(id) : loadGtmScript(id); - } - sessionStorage.setItem('consentGranted', 'true'); - function gtag( // eslint-disable-next-line @typescript-eslint/no-unused-vars + async function gtag( // eslint-disable-next-line @typescript-eslint/no-unused-vars p0: any, // eslint-disable-next-line @typescript-eslint/no-unused-vars p1: any, // eslint-disable-next-line @typescript-eslint/no-unused-vars - p2: any + p2?: any ) { // eslint-disable-next-line prefer-rest-params dataLayer.push(arguments); } + if (layout === 'simple-consent-mode') { + if ( + isGtag && + !document.querySelector(`script[src="https://www.googletagmanager.com/gtag/js?id=${id}"]`) + ) { + await loadGtagScript(id); + gtag('js', new Date()); + gtag('config', `${id}`); + } else if ( + !isGtag && + !document.querySelector(`script[src="https://www.googletagmanager.com/gtm.js?id=${id}"]`) + ) { + await loadGtmScript(id); + dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); + } + } + sessionStorage.setItem('consentGranted', 'true'); + gtag('consent', 'update', { ad_user_data: 'granted', ad_personalization: 'granted', @@ -91,7 +105,7 @@ const consentModeGrant = async (isGtag: any, id: any, layout: any) => { }); }; -const loadGtagScript = (gtagId: any) => { +const loadGtagScript = async (gtagId: any) => { // Load gtag.js script. const gtagScript = document.createElement('script'); gtagScript.async = true; @@ -101,7 +115,7 @@ const loadGtagScript = (gtagId: any) => { firstScript.parentNode.insertBefore(gtagScript, firstScript); }; -const loadGtmScript = (gtmId: any) => { +const loadGtmScript = async (gtmId: any) => { // Load Tag Manager script. const gtmScript = document.createElement('script'); gtmScript.async = true;