Adiciona banner de consentimento de cookies e implementa lógica de ac…

…eitação no Google Analytics
RoodneyMoraes · Nov 17, 2024 · be6b37d · be6b37d
1 parent 26f10d3
commit be6b37d
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -8,16 +8,12 @@
     <!-- BOOTSTRAP CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <!-- ICONS BOXICONS CSS -->
     <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
     <!-- CUSTOM CSS -->
     <link href="src/css/custom-index.css" rel="stylesheet">
-    <!-- GOOGLE TAG (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CMLZKJVKKY"></script>
-    <script src="src/js/google-analytics.js"></script>
     <!-- GOOGLE SEARCH CONSOLE -->
     <meta name="google-site-verification" content="XQsiX2YxaWq7-5UC_GOf7TztluKwd9738FXi1Y62G7A" />
-    <!-- CERTIFICADO CARDS -->
-    <script src="src/js/custom-index.js"></script>
 </head>
 
 <body>
@@ -73,6 +69,26 @@ <h4 class="navbar-footer">Sucesso no dia do exame! 🌟</h4>
             <p class="mb-0"><i>Copyright@2024. Roodney Moraes</i></p>
         </div>
     </footer>
+
+    <!-- COOKIE CONSENT BANNER -->
+    <div class="cookie-consent-banner bg-light text-dark p-3 fixed-bottom d-flex justify-content-between align-items-center"
+        id="cookieConsentBanner" style="display: none !important">
+        <div>
+            Este site utiliza cookies para melhorar a experiência do usuário e analisar o tráfego do site. Ao clicar em
+            "Aceitar", você concorda com o uso de cookies do Google Analytics.
+        </div>
+        <div>
+            <button type="button" class="btn btn-secondary btn-sm me-2" id="declineConsent">Recusar</button>
+            <button type="button" class="btn btn-primary btn-sm" id="acceptConsent">Aceitar</button>
+        </div>
+    </div>
+
+    <!-- BOOTSTRAP JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+    <!-- GOOGLE TAG -->
+    <script src="src/js/google-analytics.js"></script>
+    <!-- CUSTOM INDEX -->
+    <script src="src/js/custom-index.js"></script>
 </body>
 
 </html>
diff --git a/src/css/custom-index.css b/src/css/custom-index.css
@@ -182,4 +182,27 @@ footer .social-icons a {
         font-size: 1.3rem;
         padding: 15px 0;
     }
-}
+
+    .cookie-consent-banner {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .cookie-consent-banner div {
+        width: 100%;
+    }
+
+    .cookie-consent-banner .d-flex {
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .cookie-consent-banner .btn {
+        width: 100%;
+        margin-bottom: 10px;
+    }
+
+    .cookie-consent-banner .btn:last-child {
+        margin-bottom: 0;
+    }
+}
diff --git a/src/css/custom-page.css b/src/css/custom-page.css
@@ -59,4 +59,27 @@ footer {
     footer .d-flex>div:last-child {
         margin-bottom: 0;
     }
+
+    .cookie-consent-banner {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .cookie-consent-banner div {
+        width: 100%;
+    }
+
+    .cookie-consent-banner .d-flex {
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .cookie-consent-banner .btn {
+        width: 100%;
+        margin-bottom: 10px;
+    }
+
+    .cookie-consent-banner .btn:last-child {
+        margin-bottom: 0;
+    }
 }
diff --git a/src/js/google-analytics.js b/src/js/google-analytics.js
@@ -1,5 +1,45 @@
-// Google Analytics
-window.dataLayer = window.dataLayer || [];
-function gtag() { dataLayer.push(arguments); }
-gtag('js', new Date());
-gtag('config', 'G-CMLZKJVKKY');
+document.addEventListener('DOMContentLoaded', () => {
+    const consentAccepted = localStorage.getItem('consentAccepted');
+    console.log('Consent accepted:', consentAccepted);
+
+    if (!consentAccepted) {
+        console.log('Displaying cookie consent banner');
+        document.getElementById('cookieConsentBanner').style.display = 'block';
+    }
+
+    document.getElementById('acceptConsent').addEventListener('click', () => {
+        console.log('Accept button clicked');
+        localStorage.setItem('consentAccepted', 'true');
+        loadGoogleAnalytics();
+        document.getElementById('cookieConsentBanner').style.display = 'none';
+        document.getElementById('cookieConsentBanner').setAttribute('style', 'display: none !important');
+        console.log('Banner hidden after accept');
+    });
+
+    document.getElementById('declineConsent').addEventListener('click', () => {
+        console.log('Decline button clicked');
+        document.getElementById('cookieConsentBanner').style.display = 'none';
+        document.getElementById('cookieConsentBanner').setAttribute('style', 'display: none !important');
+        console.log('Banner hidden after decline');
+    });
+
+    function loadGoogleAnalytics() {
+        console.log('Loading Google Analytics');
+        const script = document.createElement('script');
+        script.src = 'https://www.googletagmanager.com/gtag/js?id=G-CMLZKJVKKY';
+        script.async = true;
+        document.head.appendChild(script);
+
+        script.onload = () => {
+            window.dataLayer = window.dataLayer || [];
+            function gtag() { dataLayer.push(arguments); }
+            gtag('js', new Date());
+            gtag('config', 'G-CMLZKJVKKY');
+            console.log('Google Analytics loaded');
+        };
+    }
+
+    if (consentAccepted) {
+        loadGoogleAnalytics();
+    }
+});
diff --git a/src/page/az-104.html b/src/page/az-104.html
@@ -5,32 +5,28 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Simulado AZ-104</title>
-    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <!-- BOOTSTRAP CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <!-- CUSTOM CSS -->
     <link href="../css/custom-page.css" rel="stylesheet">
-    <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CMLZKJVKKY"></script>
-    <script src="../js/google-analytics.js"></script>
 </head>
 
 <body>
+    <!-- HEADER -->
     <header>
         <div class="container">
             <h1 id="tituloPagina"></h1>
             <h6 id="descricaoProgresso"></h6>
         </div>
     </header>
 
+    <!-- MAIN -->
     <div class="container topicos mt-6">
         <div id="topicos" class="list-group mt-3"></div>
     </div>
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-    <script src="../js/custom-page.js"></script>
-    <script>
-        carregarPagina('../data/az-104.json', 'simulado-az-104');
-    </script>
-
+
+    <!-- FOOTER -->
     <footer>
         <div class="container">
             <div class="d-flex justify-content-between mt-3">
@@ -39,7 +35,6 @@ <h6 id="descricaoProgresso"></h6>
                 </div>
                 <div>
                     <button id="btnAnterior" class="btn btn-primary" onclick="paginaAnterior()">Anterior</button>
-                    <!-- Botão Home adicionado aqui -->
                     <button id="btnHome" class="btn btn-primary" onclick="confirmarVoltarHome()">Menu</button>
                     <button id="btnProxima" class="btn btn-primary" onclick="proximaPagina()">Próxima</button>
                 </div>
@@ -49,6 +44,32 @@ <h6 id="descricaoProgresso"></h6>
             </div>
         </div>
     </footer>
+
+    <!-- COOKIE CONSENT BANNER -->
+    <div class="cookie-consent-banner bg-light text-dark p-3 fixed-bottom d-flex justify-content-between align-items-center"
+        id="cookieConsentBanner" style="display: none !important">
+        <div>
+            Este site utiliza cookies para melhorar a experiência do usuário e analisar o tráfego do site. Ao clicar em
+            "Aceitar", você concorda com o uso de cookies do Google Analytics.
+        </div>
+        <div>
+            <button type="button" class="btn btn-secondary btn-sm me-2" id="declineConsent">Recusar</button>
+            <button type="button" class="btn btn-primary btn-sm" id="acceptConsent">Aceitar</button>
+        </div>
+    </div>
+
+     <!-- BOOTSTRAP JS -->
+     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
+     <!-- GOOGLE TAG -->
+     <script src="../js/google-analytics.js"></script>
+    <!-- CUSTOM JS --> 
+     <script src="../js/custom-page.js"></script>
+     <!-- QUESTIONS -->
+     <script>
+         carregarPagina('../data/az-104.json', 'simulado-az-104');
+     </script>
 </body>
 
 </html>