Notice about collecting statistics
You can notify your site users that statistics will be collected, and defer loading the code snippet for the Yandex Metrica tag on site pages.
If the user agrees to have information transmitted, the tag code loads normally. Without the user’s consent, the snippet won’t load. The user’s one-time choice can be applied to all the other pages on the site or domain.
To enable the alert and implement delayed loading of the tag code, contact your webmaster.
Alert example
You can use any text to inform users of statistics collection. Please note that the text below is just an example of how text appears in a notification. Yandex is not responsible for its compliance with legal requirements. Before publishing the text, we recommend consulting with your lawyer.
This site collects session statistics and visitor data.
[Link to your site's Terms of Use or Privacy policy]
Example of code implementation
...
<head>
<meta charset="UTF-8">
<title>Page title</title>
<!--This example uses the reset.css style. You can use your own approach.-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<!--This example uses the js-cookie library to manage cookies. You can use your own approach.-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.2/js.cookie.js"></script>
<style>
* {
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
}
.cookie-notification {
position: fixed;
background-color: rgba(0, 0, 0, .8);
bottom: 0;
width: 100%;
color: white;
padding: 15px;
}
.cookie-notification_hidden_yes {
display: none;
}
.cookie-notification__header {
margin-bottom: 10px;
font-size: 23px;
}
.cookie-notification__body {
margin-bottom: 10px;
}
</style>
</head>
<body>
Site content
<div class="cookie-notification cookie-notification_hidden_yes">
<div class="cookie-notification__header">Notice about collecting statistics</div>
<div class="cookie-notification__body">
<p>This site collects session statistics and user data.</p>
<p>[Link to your site's user agreement or privacy policy]</p>
</div>
<div class="cookie-notification__buttons">
<button class="cookie-notification__button" id="yes">I agree</button>
</div>
</div>
<script type="text/javascript">
// Load the code snippet immediately
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document,'script','https://mc.yandex.ru/metrika/tag.js', 'ym')
var messageElement = document.querySelector('.cookie-notification');
// If there are no cookies, show the placeholder
if (!Cookies.get('agreement')) {
showMessage();
} else {
initCounter();
}
// This function adds the class to the DOM element. You can use the jQuery library or another framework
function addClass (o, c) {
var re = new RegExp("(^|\\s)" + c + "(\\s|$)", "g");
if (!o || re.test(o.className)) {
return;
}
o.className = (o.className + " " + c).replace(/\s+/g, " ").replace(/(^ | $)/g, "");
}
// This function removes the class from the DOM element. You can use the jQuery library or another framework
function removeClass (o, c) {
var re = new RegExp('(^|\\s)' + c + '(\\s|$)', 'g');
if (!o) {
return;
}
o.className = o.className.replace(re, '$1').replace(/\s+/g, ' ').replace(/(^ | $)/g, '');
}
// The function that hides the notice
function hideMessage () {
addClass(messageElement, 'cookie-notification_hidden_yes');
}
// The function that shows the notice
function showMessage () {
removeClass(messageElement, 'cookie-notification_hidden_yes');
}
function saveAnswer () {
// Hide the notice
hideMessage();
// Set the cookies
Cookies.set('agreement', '1');
}
function initCounter () {
ym(XXXXXXXX, 'init', {});
saveAnswer();
}
// Clicking the "I agree" button
document.querySelector('#yes').addEventListener('click', function () {
initCounter();
});
</script>
</body>
...
...
<head>
<meta charset="UTF-8">
<title>Page Title</title>
<!--This example uses the reset.css style. You can use your own approach.-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<!--The example uses the js-cookie library for working with cookies. You can use your own approach-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.2/js.cookie.js"></script>
<style>
* {
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
}
.cookie-notification {
position: fixed;
background-color: rgba(0, 0, 0, .8);
bottom: 0;
width: 100%;
color: white;
padding: 15px;
}
.cookie-notification_hidden_yes {
display: none;
}
.cookie-notification__header {
margin-bottom: 10px;
font-size: 23px;
}
.cookie-notification__body {
margin-bottom: 10px;
}
</style>
</head>
<body>
Website Content
<div class="cookie-notification cookie-notification_hidden_yes">
<div class="cookie-notification__header">Statistics Collection Notice</div>
<div class="cookie-notification__body">
<p>This website collects visit statistics and visitor data.</p>
<p>[Link to your website's User Agreement or Privacy Policy]</p>
</div>
<div class="cookie-notification__buttons">
<button class="cookie-notification__button" id="yes">I Agree</button>
</div>
</div>
<script type="text/javascript">
// Load the code snippet immediately
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document,'script','https://mc.yandex.ru/metrika/tag.js', 'ym')
var messageElement = document.querySelector('.cookie-notification');
// If there are no cookies, show the banner
if (!Cookies.get('agreement')) {
showMessage();
} else {
initCounter();
}
// Function adds a class to a DOM element. You can use the jQuery library or another framework
function addClass (o, c) {
var re = new RegExp("(^|\\s)" + c + "(\\s|$)", "g");
if (!o || re.test(o.className)) {
return;
}
o.className = (o.className + " " + c).replace(/\s+/g, " ").replace(/(^ | $)/g, "");
}
// Function removes a class from a DOM element. You can use the jQuery library or another framework
function removeClass (o, c) {
var re = new RegExp('(^|\\s)' + c + '(\\s|$)', 'g');
if (!o) {
return;
}
o.className = o.className.replace(re, '$1').replace(/\s+/g, ' ').replace(/(^ | $)/g, '');
}
// Function that hides the warning
function hideMessage () {
addClass(messageElement, 'cookie-notification_hidden_yes');
}
// Function that shows the warning
function showMessage () {
removeClass(messageElement, 'cookie-notification_hidden_yes');
}
function saveAnswer () {
// Hide the warning
hideMessage();
// Set cookies
Cookies.set('agreement', '1');
}
function initCounter () {
ym(XXXXXXXX, 'init', {});
saveAnswer();
}
// Click on the "I Agree" button
document.querySelector('#yes').addEventListener('click', function () {
initCounter();
});
</script>
</body>
...
where XXXXXXXX is the ID of your tag.
|
Useful links |
Online training |