Last active
April 28, 2018 20:47
-
-
Save GendelfLugansk/4ee853829015e832a754677bb2f18228 to your computer and use it in GitHub Desktop.
Google analytics integration with user notice and consent (for static website which uses GA)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Put this code in <head> tag. 'UA-XXXXX-Y' should be replaced with the property ID (also called the "tracking ID") | |
* of the Google Analytics property you wish to track. Also you may wish to change text and remove | |
* `ga('set', 'anonymizeIp', true);` line from `initGac` function. Style user notice with css. | |
* | |
* Please note that when user clicks "Disable cookies" this script removes google analytics' cookies and adds | |
* cookie with name `_gac_consent_`. It doesn't store any user data, just 'allow' or 'disable' string. This is | |
* needed to store user's answer. You may want to inform users about that in your Cookie Policy. | |
*/ | |
(function (i, s, o, g, r, a, m) { | |
i['GoogleAnalyticsObject'] = r; | |
i[r] = i[r] || function () { | |
(i[r].q = i[r].q || []).push(arguments) | |
}, i[r].l = 1 * new Date(); | |
a = s.createElement(o), | |
m = s.getElementsByTagName(o)[0]; | |
a.async = 1; | |
a.src = g; | |
m.parentNode.insertBefore(a, m) | |
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); | |
function gacConsent() { | |
function setCookie(cname, cvalue, exdays, domain) { | |
var d = new Date(); | |
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); | |
var expires = "expires=" + d.toUTCString(); | |
document.cookie = cname + "=" + cvalue + ";" + expires + ";domain=" + (domain || window.location.hostname); | |
} | |
function getCookie(cname) { | |
var name = cname + "="; | |
var decodedCookie = decodeURIComponent(document.cookie); | |
var ca = decodedCookie.split(';'); | |
for (var i = 0; i < ca.length; i++) { | |
var c = ca[i]; | |
while (c.charAt(0) === ' ') { | |
c = c.substring(1); | |
} | |
if (c.indexOf(name) === 0) { | |
return c.substring(name.length, c.length); | |
} | |
} | |
return undefined; | |
} | |
function initGac() { | |
ga('create', 'UA-XXXXX-Y', 'auto'); | |
ga('set', 'anonymizeIp', true); | |
ga('send', 'pageview'); | |
} | |
var cookieName = '_gac_consent_'; | |
var consent = getCookie(cookieName); | |
var consentAllowValue = 'allow', consentDisableValue = 'disable'; | |
if (consent === consentAllowValue) { | |
initGac(); | |
} else if (consent === undefined) { | |
var consentPanel = document.createElement('div'); | |
consentPanel.classList.add('gac-consent-panel'); | |
consentPanel.innerHTML = "<div class='gac-consent-header'>This website uses cookies</div>" + | |
"This site uses Google Analytics (with anonymized IP) to count unique visitors and analyze traffic sources. " + | |
"Also, cookies are used to store your preferences. " + | |
"<a target='_blank' href='/cookies.html'>Cookies Policy</a>"; | |
var disableButton = document.createElement('button'); | |
disableButton.classList.add('gac-consent-disable'); | |
disableButton.innerText = 'Disable Google Analytics'; | |
disableButton.onclick = function (ev) { | |
setCookie(cookieName, consentDisableValue, 365); | |
setCookie('_gat', '', -1, '.' + window.location.hostname); | |
setCookie('_gid', '', -1, '.' + window.location.hostname); | |
setCookie('_ga', '', -1, '.' + window.location.hostname); | |
consentPanel.remove(); | |
}; | |
var enableButton = document.createElement('button'); | |
enableButton.classList.add('gac-consent-enable'); | |
enableButton.innerText = 'Enable Google Analytics'; | |
enableButton.onclick = function (ev) { | |
setCookie(cookieName, consentAllowValue, 365); | |
consentPanel.remove(); | |
initGac(); | |
}; | |
var buttonsPanel = document.createElement('div'); | |
buttonsPanel.classList.add('gac-consent-buttons'); | |
buttonsPanel.appendChild(disableButton); | |
buttonsPanel.appendChild(enableButton); | |
consentPanel.appendChild(buttonsPanel); | |
document.body.appendChild(consentPanel); | |
} | |
} | |
if (["complete", "interactive"].indexOf(document.readyState) > -1) { | |
gacConsent(); | |
} | |
else { | |
document.addEventListener("DOMContentLoaded", gacConsent); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.gac-consent-panel { | |
background: #fff; | |
position: fixed; | |
top: 0; | |
width: 100%; | |
padding: 1rem; | |
box-shadow: 1px 1px 20px 0 #ddd; | |
box-sizing: border-box; | |
.gac-consent-header { | |
font-weight: bold; | |
} | |
.gac-consent-buttons { | |
margin-top: 0.5rem; | |
@include media(">=large-desctop") { | |
margin-top: 0; | |
display: inline-block; | |
margin-left: 0.5rem; | |
} | |
} | |
button { | |
border-radius: 0.2rem; | |
padding: 0.5rem 1rem; | |
border: none; | |
font-weight: 700; | |
color: #333; | |
background: #e0e1e2; | |
&:not(:first-child) { | |
margin-left: 0.5em; | |
} | |
&:hover { | |
background: #cacbcd; | |
} | |
&.gac-consent-enable { | |
background: #21ba45; | |
color: #fff; | |
&:hover { | |
background: #16ab39; | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment