From 07a475cc93a9a774c43fa0336a569261f91b350d Mon Sep 17 00:00:00 2001 From: Andrii-Moshenskyi Date: Mon, 1 Mar 2021 15:39:26 +0200 Subject: Created Google Analytics & Cookies message with working logic --- sass/google-analytics-message.sass | 70 +++++++++++++++++++++++++++++++++++++ sass/main.sass | 3 +- site/img/global/cookies.svg | 10 ++++++ site/js/google-analytics-message.js | 46 ++++++++++++++++++++++++ templates/main.html | 26 +++++++++++++- 5 files changed, 153 insertions(+), 2 deletions(-) create mode 100644 sass/google-analytics-message.sass create mode 100644 site/img/global/cookies.svg create mode 100644 site/js/google-analytics-message.js diff --git a/sass/google-analytics-message.sass b/sass/google-analytics-message.sass new file mode 100644 index 0000000..3789f86 --- /dev/null +++ b/sass/google-analytics-message.sass @@ -0,0 +1,70 @@ +@import settings.sass + +.google-analytics-message + position: fixed + left: 0 + right: 0 + bottom: 0 + height: auto + display: none + align-items: center + background-color: $white + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08) + padding: 44px 0 + +resp(lg) + padding: 28px 0 + +resp(sm) + padding: 20px 0 + +resp(esm) + padding: 13px 0 + &.open + display: flex + &__content + display: flex + align-items: center + &__img + border-right: 1px solid #E0DFDF + padding-right: 21px + &__text + p + padding-left: 20px + line-height: 160% + font-size: 15px + hyphens: inherit + +resp(md) + font-size: 14px + p:first-child + margin-bottom: 16px + &__buttons + text-align: right + margin-top: 20px + +resp(esm) + text-align: inherit + display: flex + &__accept, &__decline + height: 40px + width: 151px + font-weight: 700 + cursor: pointer + outline: none + transition: 0.3s + +resp(esm) + width: 50% + &__accept + background-color: $orange + border: 1px solid $orange + color: $black + margin-right: 6px + +resp(esm) + margin-right: 5px + &:hover + background-color: $white + &__decline + background-color: $black + border: 1px solid $black + color: $white + +resp(esm) + margin-left: 5px + &:hover + background-color: $white + color: $black \ No newline at end of file diff --git a/sass/main.sass b/sass/main.sass index 7c5ba66..882446c 100644 --- a/sass/main.sass +++ b/sass/main.sass @@ -99,4 +99,5 @@ div.container @import front-page/main-text.sass @import front-page/inform-columns.sass @import front-page/bottom-text.sass -@import footer.sass \ No newline at end of file +@import footer.sass +@import google-analytics-message.sass \ No newline at end of file diff --git a/site/img/global/cookies.svg b/site/img/global/cookies.svg new file mode 100644 index 0000000..056d6f4 --- /dev/null +++ b/site/img/global/cookies.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/site/js/google-analytics-message.js b/site/js/google-analytics-message.js new file mode 100644 index 0000000..d5ecb91 --- /dev/null +++ b/site/js/google-analytics-message.js @@ -0,0 +1,46 @@ +// function to toggle Google Analytics message +const toggleGoogleAnalyticsMessage = action => { + const message = document.getElementById('google-analytics-message') + action === 'show' && message.classList.add('open') + action === 'hide' && message.classList.remove('open') +} + +// check if cookies with user choice exist +const isGoogleAnalyticsAllowedValueExist = + document.cookie.split(';') + .find(row => row.includes('isGoogleAnalyticsAllowed')) + +// if the user has already made a choice +if (isGoogleAnalyticsAllowedValueExist) { + + const isGoogleAnalyticsAllowedValue = isGoogleAnalyticsAllowedValueExist.split('=')[1] + + // and if the user chose "Accept" - connect Google Analytics + if (isGoogleAnalyticsAllowedValue === 'yes') { + window.dataLayer = window.dataLayer || []; + function gtag() { dataLayer.push(arguments); } + gtag('js', new Date()); + gtag('config', 'G-J3WHFQG00P'); + } + +} else { + + // display a message with a question + toggleGoogleAnalyticsMessage('show') + + const googleAnalyticsMessageAccept = document.getElementById('google-analytics-message-accept') + const googleAnalyticsMessageDecline = document.getElementById('google-analytics-message-decline') + + // register a click on the "Accept" button + googleAnalyticsMessageAccept.addEventListener('click', function () { + document.cookie = 'isGoogleAnalyticsAllowed=yes' + toggleGoogleAnalyticsMessage('hide') + }) + + // register a click on the "Decline" button + googleAnalyticsMessageDecline.addEventListener('click', function () { + document.cookie = 'isGoogleAnalyticsAllowed=no' + toggleGoogleAnalyticsMessage('hide') + }) + +} \ No newline at end of file diff --git a/templates/main.html b/templates/main.html index a7be405..7cc6337 100644 --- a/templates/main.html +++ b/templates/main.html @@ -185,5 +185,29 @@ + + + + + - + \ No newline at end of file -- cgit v1.2.3