Aviso sobre la recopilación de estadísticas
Puede notificar a los usuarios de su sitio que se recopilarán estadísticas y posponer la carga del fragmento de código para la etiqueta Yandex Metrica en las páginas del sitio.
Si el usuario acepta que se transmita información, el código de la etiqueta se carga normalmente. Sin el consentimiento del usuario, el fragmento no se cargará. La elección única del usuario se puede aplicar a todas las demás páginas del sitio o dominio.
Para habilitar la alerta e implementar la carga diferida del código de la etiqueta, contacte a su webmaster.
Ejemplo de alerta
Puede utilizar cualquier texto para informar a los usuarios sobre la recopilación de estadísticas. Tenga en cuenta que el texto que aparece a continuación es sólo un ejemplo de cómo aparece el texto en una notificación. Yandex no es responsable de su cumplimiento con los requisitos legales. Antes de publicar el texto, le recomendamos que consulte con su abogado.
Este sitio recopila estadísticas de sesión y datos de los visitantes.
[Enlace a las condiciones de uso o a la política de privacidad de su sitio web]
Ejemplo de implementación de código
...
<head>
<meta charset="UTF-8">
<title>Page title</title>
<!--Este ejemplo utiliza el estilo reset.css. Usted puedes usar su propio método.-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<!--Este ejemplo utiliza la biblioteca js-cookie para gestionar las cookies. Usted puede usar su propio 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>
Site content
<div class="cookie-notification cookie-notification_hidden_yes">
<div class="cookie-notification__header">Aviso sobre la recopilación de estadísticas</div>
<div class="cookie-notification__body">
<p>Este sitio web recopila estadísticas de la sesión y datos del usuario.</p>
<p>[Enlace al acuerdo de usuario o a la política de privacidad de su sitio]</p>
</div>
<div class="cookie-notification__buttons">
<button class="cookie-notification__button" id="yes">Estoy de acuerdo</button>
</div>
</div>
<script type="text/javascript">
// Carga el fragmento de código inmediatamente
(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');
// Si no hay cookies, mostrar el marcador de posición
if (!Cookies.get('agreement')) {
showMessage();
} else {
initCounter();
}
// Esta función agrega la clase al elemento DOM. Puede usar la biblioteca jQuery u otro 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, "");
}
// Esta función elimina la clase del elemento DOM. Puede usar la biblioteca jQuery u otro 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, '');
}
// La función que oculta el aviso
function hideMessage () {
addClass(messageElement, 'cookie-notification_hidden_yes');
}
// La función que muestra el aviso
function showMessage () {
removeClass(messageElement, 'cookie-notification_hidden_yes');
}
function saveAnswer () {
// Oculta el aviso
hideMessage();
// Establece las cookies
Cookies.set('agreement', '1');
}
function initCounter () {
ym(XXXXXXXX, 'init', {});
saveAnswer();
}
// Al hacer clic en el botón “Acepto”
document.querySelector('#yes').addEventListener('click', function () {
initCounter();
});
</script>
</body>
...
...
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<!--Este ejemplo usa el estilo reset.css. Puede usar su propio enfoque.-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<!--El ejemplo usa la biblioteca js-cookie para trabajar con cookies. Puede utilizar su propio enfoque-->
<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>
Contenido del sitio web
<div class="cookie-notification cookie-notification_hidden_yes">
<div class="cookie-notification__header">Aviso sobre la recolección de estadísticas</div>
<div class="cookie-notification__body">
<p>Este sitio web recolecta estadísticas de visitas y datos de los visitantes.</p>
<p>[Enlace al Acuerdo de usuario o a la Política de privacidad de su sitio web]</p>
</div>
<div class="cookie-notification__buttons">
<button class="cookie-notification__button" id="yes">Estoy de acuerdo</button>
</div>
</div>
<script type="text/javascript">
// Carga el fragmento de código inmediatamente
(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');
// Si no hay cookies, mostrar el banner
if (!Cookies.get('agreement')) {
showMessage();
} else {
initCounter();
}
// Función que agrega una clase a un elemento DOM. Puede usar la biblioteca jQuery u otro entorno de trabajo
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, "");
}
// Función que elimina una clase de un elemento DOM. Puede usar la biblioteca jQuery u otro entorno de trabajo
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, '');
}
// Función que oculta la alerta
function hideMessage () {
addClass(messageElement, 'cookie-notification_hidden_yes');
}
// Función que muestra la alerta
function showMessage () {
removeClass(messageElement, 'cookie-notification_hidden_yes');
}
function saveAnswer () {
// Oculta la alerta
hideMessage();
// Establecer cookies
Cookies.set('agreement', '1');
}
function initCounter () {
ym(XXXXXXXX, 'init', {});
saveAnswer();
}
// Al hacer clic en el botón “Estoy de acuerdo”
document.querySelector('#yes').addEventListener('click', function () {
initCounter();
});
</script>
</body>
...
donde XXXXXXXX es el ID de su etiqueta.