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 the Terms of Use or Privacy policy of your site]</p>
</div>
<div class="cookie-notification__buttons">
<button class="cookie-notification__button" id="yes">I agree</button>
</div>
</div>
<script type="text/javascript">
var messageElement = document.querySelector('.cookie-notification');
// If there are no cookies, show a placeholder
if (!Cookies.get('agreement')) {
showMessage();
} else {
initCounter();
}
// 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')
// 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, '');
}
// Function that hides the notice
function hideMessage () {
addClass(messageElement, 'cookie-notification_hidden_yes');
}
// Function that shows the notice
function showMessage () {
removeClass(messageElement, 'cookie-notification_hidden_yes');
}
function saveAnswer () {
// Hide the notice
hideMessage();
// Set cookies
Cookies.set('agreement', '1');
}
function initCounter () {
ym(XXXX, 'init', {});
saveAnswer();
}
// Clicked 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>
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 website collects session statistics and user data.</p>
<p>[Link to the User Agreement of your website or to the Privacy Policy of your website]</p>
</div>
<div class="cookie-notification__buttons">
<button class="cookie-notification__button" id="yes">I agree</button>
</div>
</div>
<script type="text/javascript">
var messageElement = document.querySelector('.cookie-notification');
// If there aren't any cookies, show a placeholder
if (!Cookies.get('agreement')) {
showMessage();
} else {
initCounter();
}
// 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')
// 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, '');
}
// Function that hides the alert.
function hideMessage () {
addClass(messageElement, 'cookie-notification_hidden_yes');
}
// Function that shows the alert.
function showMessage () {
removeClass(messageElement, 'cookie-notification_hidden_yes');
}
function saveAnswer () {
// Hide the alert.
hideMessage();
// Set cookies.
Cookies.set('agreement', '1');
}
function initCounter () {
ym(XXXX, 'init', {});
saveAnswer();
}
// Clicked the "I agree" button.
document.querySelector('#yes').addEventListener('click', function () {
initCounter();
});
</script>
</body>
...
where
XXXXXX— Your tag number.
|
Useful links |
Online training |