diff --git a/README.md b/README.md index 00da483..be29f95 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: ``` @@ -325,7 +322,10 @@ NEXT_PUBLIC_CONSENT_LAYOUT=default "title":"payment", "content":"
YOUR_CONTENT_INPUT_HERE
" } - ]` + ]`; + + //trigger open optIn consent with Javascript + document.querySelector('.opt-in-consent.payment').classList.add('show'); ``` diff --git a/package.json b/package.json index da9624e..7fb8b7c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aesirx-analytics", - "version": "2.2.15", + "version": "2.2.17", "license": "GPL-3.0-only", "author": "AesirX", "repository": "https://gitlab.redweb.dk/aesirx/analytics", @@ -14,7 +14,7 @@ "@concordium/web-sdk": "^7.0.4-rc.3", "@web3modal/ethereum": "^2.7.0", "@web3modal/react": "^2.7.0", - "aesirx-sso": "^1.4.13", + "aesirx-sso": "^1.4.15", "axios": "^1.6.0", "bootstrap": "^5.3.2", "bowser": "^2.11.0", diff --git a/src/AnalyticsNext/index.tsx b/src/AnalyticsNext/index.tsx index 2c7b803..8c03970 100644 --- a/src/AnalyticsNext/index.tsx +++ b/src/AnalyticsNext/index.tsx @@ -28,9 +28,14 @@ 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); + const [customConsentText, setCustomConsentText] = useState( + process.env.NEXT_PUBLIC_ANALYTICS_CONSENT_TEXT + ); useEffect(() => { const init = async () => { const data: any = await getConsentTemplate( @@ -40,6 +45,9 @@ const AnalyticsNext = ({ setLayout(data?.data?.template ?? process.env.NEXT_PUBLIC_CONSENT_LAYOUT); setGtagId(data?.data?.gtag_id ?? process.env.NEXT_PUBLIC_ANALYTICS_GTAG_ID); setGtmId(data?.data?.gtm_id ?? process.env.NEXT_PUBLIC_ANALYTICS_GTM_ID); + setCustomConsentText( + data?.data?.consent_text ?? process.env.NEXT_PUBLIC_ANALYTICS_CONSENT_TEXT + ); }; init(); }, []); @@ -59,6 +67,7 @@ const AnalyticsNext = ({ isLoggedApp={isLoggedApp} gtagId={gtagId} gtmId={gtmId} + customConsentText={customConsentText} /> ) : ( diff --git a/src/AnalyticsReact/index.tsx b/src/AnalyticsReact/index.tsx index 8cc6f57..e26e545 100644 --- a/src/AnalyticsReact/index.tsx +++ b/src/AnalyticsReact/index.tsx @@ -22,9 +22,14 @@ 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); + const [customConsentText, setCustomConsentText] = useState( + process.env.REACT_APP_ANALYTICS_CONSENT_TEXT + ); useEffect(() => { const init = async () => { const data: any = await getConsentTemplate( @@ -34,6 +39,9 @@ const AnalyticsReact = ({ setLayout(data?.data?.template ?? process.env.REACT_APP_CONSENT_LAYOUT); setGtagId(data?.data?.gtag_id ?? process.env.REACT_APP_ANALYTICS_GTAG_ID); setGtmId(data?.data?.gtm_id ?? process.env.REACT_APP_ANALYTICS_GTM_ID); + setCustomConsentText( + data?.data?.consent_text ?? process.env.REACT_APP_ANALYTICS_CONSENT_TEXT + ); }; init(); }, []); @@ -50,6 +58,7 @@ const AnalyticsReact = ({ aesirXEndpoint={process.env.REACT_APP_ENDPOINT_URL ?? 'https://api.aesirx.io'} gtagId={gtagId} gtmId={gtmId} + customConsentText={customConsentText} /> ) : ( diff --git a/src/Components/Connect.tsx b/src/Components/Connect.tsx index 2a5d4f6..908e67e 100644 --- a/src/Components/Connect.tsx +++ b/src/Components/Connect.tsx @@ -1,6 +1,6 @@ import React, { Suspense, useState } from 'react'; import { Modal } from 'react-bootstrap'; -import { isMobile, isDesktop } from 'react-device-detect'; +import { isMobile, isDesktop, OsTypes, osName } from 'react-device-detect'; import { BROWSER_WALLET, WALLET_CONNECT } from '../Hooks/config'; import concordium_logo from '../Assets/concordium_logo.png'; import { useTranslation } from 'react-i18next'; @@ -65,31 +65,36 @@ const ConnectModal = ({ )} )} - - + {osName !== OsTypes?.IOS ? ( + <> + + + ) : ( + <> + )} {' '} 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..5507bd6 100644 --- a/src/Components/ConsentCustom.tsx +++ b/src/Components/ConsentCustom.tsx @@ -68,6 +68,7 @@ const ConsentComponentCustom = ({ gtmId, layout, isOptInReplaceAnalytics, + customConsentText, }: any) => { return ( <> @@ -84,6 +85,7 @@ const ConsentComponentCustom = ({ gtagId={gtagId} gtmId={gtmId} layout={layout} + customConsentText={customConsentText} /> )} @@ -121,6 +123,7 @@ const ConsentComponentCustomWrapper = (props: any) => { gtagId={props?.gtagId} gtmId={props?.gtmId} layout={props?.layout} + customConsentText={props?.customConsentText} uuid={uuid} level={level} connection={connection} @@ -146,6 +149,7 @@ const ConsentComponentCustomApp = (props: any) => { gtagId, gtmId, layout, + customConsentText, activeConnectorType, activeConnector, activeConnectorError, @@ -195,12 +199,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 +707,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 +752,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 +762,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 +1190,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 +1289,7 @@ const ConsentComponentCustomApp = (props: any) => { {t('txt_yes_i_consent')} )} - {layout === 'simple-consent-mode' || layout === 'simple-web-2' ? ( + {layout === 'simple-consent-mode' ? ( <> ) : ( <> @@ -1292,6 +1319,7 @@ const ConsentComponentCustomApp = (props: any) => { handleLevel={handleLevel} isCustom={true} layout={layout} + customConsentText={customConsentText} >
{ {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..fd6ed7b 100644 --- a/src/Components/Terms.tsx +++ b/src/Components/Terms.tsx @@ -69,6 +69,7 @@ const TermsComponent = ({ isCustom = false, layout, isRejectedLayout, + customConsentText, }: any) => { const { t } = useTranslation(); const handleReadmore = (status: boolean) => { @@ -139,7 +140,7 @@ const TermsComponent = ({ > {isRejectedLayout ? ( @@ -177,70 +178,85 @@ const TermsComponent = ({ ) : ( <> -

- {t('txt_manage_your_consent')} -

-

- {layout === 'simple-consent-mode' - ? t('txt_choose_how_we_use_simple') - : t('txt_choose_how_we_use')} -

-
-

{t('txt_by_consenting')}

-
- - - -
-
{t('txt_analytics_behavioral')}
-
-
-
- - - -
-
{t('txt_form_data')}
-
-
-
-
-

{t('txt_please_note')}

-
- - - -
-
{t('txt_we_do_not_share')}
-
-
-
- - - -
-
{t('txt_you_can_opt_in')}
+ {customConsentText ? ( + <> +
+ + ) : ( + <> + {' '} +

+ {t('txt_manage_your_consent')} +

+

+ {layout === 'simple-consent-mode' + ? t('txt_choose_how_we_use_simple') + : t('txt_choose_how_we_use')} +

+
+

+ {t('txt_by_consenting')} +

+
+ + + +
+
{t('txt_analytics_behavioral')}
+
+
+
+ + + +
+
{t('txt_form_data')}
+
+
-
-
- - - -
-
+
+

{t('txt_please_note')}

+
+ + + +
+
{t('txt_we_do_not_share')}
+
+
+
+ + + +
+
{t('txt_you_can_opt_in')}
+
+
+
+ + + +
+
+
+
-
-
+ + )} )} - +

{t('txt_manage_your_consent')} @@ -350,7 +366,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..5ee88dd 100644 --- a/src/analytics.tsx +++ b/src/analytics.tsx @@ -27,9 +27,10 @@ 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']); + const [customConsentText, setCustomConsentText] = useState(window['analyticsConsentText']); useEffect(() => { const init = async () => { const data: any = await getConsentTemplate( @@ -39,6 +40,7 @@ const ConsentPopup = ({ visitor_uuid, event_uuid }: any) => { setLayout(data?.data?.template ?? window['consentLayout']); setGtagId(data?.data?.gtag_id ?? window['analyticsGtagId']); setGtmId(data?.data?.gtm_id ?? window['analyticsGtmId']); + setCustomConsentText(data?.data?.consent_text ?? window['analyticsConsentText']); }; init(); }, []); @@ -60,6 +62,7 @@ const ConsentPopup = ({ visitor_uuid, event_uuid }: any) => { aesirXEndpoint={window['aesirxEndpoint'] ?? 'https://api.aesirx.io'} gtagId={gtagId} gtmId={gtmId} + customConsentText={customConsentText} /> ) : ( { gtagId={gtagId} gtmId={gtmId} layout={layout} + customConsentText={customConsentText} /> )} 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 10038fb..4ca3554 100644 --- a/src/translations/dk/common.json +++ b/src/translations/dk/common.json @@ -103,7 +103,7 @@ "txt_more_info_at": "Mere info på https://shield. aesirx.io.", "txt_select_your_preferred": "Vælg din foretrukne mulighed for decentraliseret samtykke:", "txt_decentralized_wallet": "Decentraliseret samtykke", - "txt_decentralized_wallet_will_be_loaded": "Se cargará el consentimiento descentralizado", + "txt_decentralized_wallet_will_be_loaded": "Decentraliseret samtykke vil blive indlæst", "txt_both_first_party_third_party": "Både førsteparts- og tredjepartssporingsdata vil blive aktiveret.", "txt_all_consented_data_will_be_collected": "Alle samtykkede data vil blive indsamlet.", "txt_users_can_revoke": "Brugere kan til enhver tid tilbagekalde samtykke på stedet.", @@ -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; diff --git a/yarn.lock b/yarn.lock index 86b2430..3d77b06 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3578,10 +3578,10 @@ aes-js@^3.1.2: resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.1.2.tgz#db9aabde85d5caabbfc0d4f2a4446960f627146a" integrity sha512-e5pEa2kBnBOgR4Y/p20pskXI74UEz7de8ZGVo58asOtvSVG5YAbJeELPZxOmt+Bnz3rX753YKhfIn4X4l1PPRQ== -aesirx-lib@^2.0.11: - version "2.0.11" - resolved "https://registry.yarnpkg.com/aesirx-lib/-/aesirx-lib-2.0.11.tgz#242e737510569ba23e2f93685a88af551c0ba55e" - integrity sha512-HLYRiZt+vxffccJZXKyfXSliFr4W7XB0KquU6rplJA2DSVXTcOF6DHACI1HWg7kByNS65heb4+eKDPMhMXo6nw== +aesirx-lib@^2.0.12: + version "2.0.12" + resolved "https://registry.yarnpkg.com/aesirx-lib/-/aesirx-lib-2.0.12.tgz#0a57dc2070fa2534ac2635ee142a05c5c4be3cb6" + integrity sha512-SU+1wwmK0wCE/zwXYEQuZrC7uinoXe6iGcuovjbeHQW8HGFLXfOq4lTauC3oxrV1tVrPBKCFxF4aNmU3HHrcZQ== dependencies: axios "^1.6.0" axios-auth-refresh "^3.3.6" @@ -3592,10 +3592,10 @@ aesirx-lib@^2.0.11: query-string "7" react-secure-storage "^1.3.2" -aesirx-sso@^1.4.13: - version "1.4.13" - resolved "https://registry.yarnpkg.com/aesirx-sso/-/aesirx-sso-1.4.13.tgz#63a3dfcf55b6a837b4e71c567d45758da486d5fb" - integrity sha512-CEKAUyKJfFyOi+AN3mLR/0YbFNVM/GmQKHoH74IP+FV5gA2A5/bpF7vm1OotTu5DSZehm/Vocqx020rBOIe9zA== +aesirx-sso@^1.4.15: + version "1.4.15" + resolved "https://registry.yarnpkg.com/aesirx-sso/-/aesirx-sso-1.4.15.tgz#fb9f1b3629dad8a01ffa63430b0480376da58032" + integrity sha512-2HmnUAmStuiFBiUxLjNcdC6L4XYXOvGmpuLWW4EGaRk2ws3yBx/k1wYqqYRPgot0HaXS62MrmgD3Ly31obbBkg== dependencies: "@concordium/browser-wallet-api-helpers" "^3.0.0" "@concordium/react-components" "^0.4.0-rc.7" @@ -3607,7 +3607,7 @@ aesirx-sso@^1.4.13: "@wagmi/core" "^1.3.8" "@web3modal/ethereum" "^2.7.0" "@web3modal/react" "^2.7.0" - aesirx-lib "^2.0.11" + aesirx-lib "^2.0.12" axios "^1.6.0" bootstrap "^5.3.3" bowser "^2.11.0"