Notificação sobre coleta de estatísticas
Você pode notificar os usuários do seu site de que serão coletadas estatísticas e protelar o carregamento do snippet de código da tag Yandex Metrica nas páginas do site.
Se o usuário concordar com a transmissão de informações, o código da tag carregará normalmente. Sem o consentimento do usuário, o snippet não será carregado. O usuário faz a escolha uma vez e ela se aplica a todas as outras páginas do site ou domínio.
Para habilitar o alerta e implementar o carregamento protelado do código da tag, entre em contato com seu webmaster.
Exemplo de alerta
Você pode utilizar qualquer texto para informar os usuários sobre a coleta de estatísticas. Observe, por gentileza, que o texto abaixo é apenas um exemplo de como o texto aparece em notificações. O Yandex não é responsável por sua conformidade com as exigências legais. Antes de publicar o texto, recomendamos que você consulte seu advogado.
Este site coleta estatísticas sobre sessões e dados de visitantes.
[Link para os Termos de uso ou Política de privacidade do seu site]
Exemplo de implementação de código
...
<head>
<meta charset="UTF-8">
<title>Título da página</title>
<!--Este exemplo usa o estilo reset.css. Você pode usar o seu próprio método.-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<!--O exemplo utiliza a biblioteca js-cookie para trabalhar com cookies. Você pode usar o seu próprio método-->
<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>
Conteúdo do site
<div class="cookie-notification cookie-notification_hidden_yes">
<div class="cookie-notification__header">Aviso sobre coleta de estatísticas</div>
<div class="cookie-notification__body">
<p>Este site coleta estatísticas de visitas e dados dos visitantes.</p>
<p>[Link para o Contrato do Usuário ou Política de Privacidade do seu site]</p>
</div>
<div class="cookie-notification__buttons">
<button class="cookie-notification__button" id="yes">Eu concordo</button>
</div>
</div>
<script type="text/javascript">
// Carregar o snippet de código imediatamente
(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');
// Se não houver cookies, mostrar o banner
if (!Cookies.get('agreement')) {
showMessage();
} else {
initCounter();
}
// A função adiciona uma classe a um elemento DOM. É possível usar a biblioteca jQuery ou outro 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, "");
}
// A função remove uma classe de um elemento DOM. Você pode usar a biblioteca jQuery ou outro 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, '');
}
// Função que oculta a aviso
function hideMessage () {
addClass(messageElement, 'cookie-notification_hidden_yes');
}
// Função que mostra o aviso
function showMessage () {
removeClass(messageElement, 'cookie-notification_hidden_yes');
}
function saveAnswer () {
// Ocultar o aviso
hideMessage();
// Definir cookies
Cookies.set('agreement', '1');
}
function initCounter () {
ym(XXXXXXXX, 'init', {});
saveAnswer();
}
// Clicar no botão "Eu concordo"
document.querySelector('#yes').addEventListener('click', function () {
initCounter();
});
</script>
</body>
...
onde XXXXXXXX é a ID (número) da sua tag.