Banner de Cookies. La forma correcta (HTML, CSS y JS)

Подписаться 511 тыс.

Просмотров 38 тыс.

50% 1

En este tutorial vas aprender como crear y agregar a tu pagina web un banner para "aceptar cookies", de la forma correcta, utilizando Google Tag Manager.
🚀 Blog de Diseño Web:
www.falconmasters.com
⭐ Curso de Diseño Web desde Cero:
www.desarrolloweb.io/cursos/d...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrolloweb.io/cursos/p...
⭐ Curso de React y Firebase desde Cero:
www.desarrolloweb.io/cursos/r...
⭐ Curso de Bootstrap:
www.desarrolloweb.io/cursos/b...
⭐ Curso de Woocommerce:
www.desarrolloweb.io/cursos/t...
---
📄 Código del Proyecto: github.com/falconmasters/avis...
Aviso de Cookies: www.modelosycontratos.com/201...
Google Tag Manager: tagmanager.google.com/#/home
Documentacion de Google Tag Manager: developers.google.com/tag-man...
Icono de galleta: www.flaticon.com/free-icon/co...
---
Temario
00:00:00 - Introducción
03:55:01 - Diseñando el banner
20:45:00 - Javascript
30:48:00 - Google Tag Manager
---
Redes Sociales:
📌 Twitter: / falconmasters
📌 Página de Facebook: / falconmasters

Наука

Опубликовано:

28 апр 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 129

@FalconMasters 3 года назад

Si te gusto el video dale manita arriba! 👍 Y no olvides suscribirte para mas tutoriales de desarrollo web.

@jokerimad9983 3 года назад

Hola Buenas! Como me puedo poner en contacto contigo? Necesito un tutorial de como hacer un buscador con php en tu curso de php no es exactamente lo que necesito, te lo puedo pagar aparte, estaria bien hablar por privado los detalles Gracias Saludos!

@ninomali7122 3 года назад

navigator.share

@ninomali7122 3 года назад

navigator.share

@cris-org Год назад

Saludos Arturo, te felicito por tu trabajo, compré el curso de diseño web en Udemy, apenas estoy desarrollando un sitio peronal con lo que estoy aprendiendo, quería preguntar si puedo usar tal cual el diseño del banner para insertarlo en mi sitio web.

@FalconMasters Год назад

@@cris-org Hola Cristian, claro puedes usarlo sin problemas. Saludos!

@zaseymendoza7856 3 года назад

El video perfecto en el mejor momento. Muchas Gracias!

@FalconMasters 3 года назад

Me alegra que te sea de ayuda!

@jeremyaza3905 3 года назад

Me encantó tu video, y fue muy interesante los dos puntos que mencionaste sobre el manejo de las cookies 🍪

@danielcebrian2545 2 года назад

FalconMasters, impresionante explicación de como hacerlo. Muchas gracias por el aporte.

@ericcarrillo6250 2 года назад

Eres un grande, muchas gracias! El video esta perfecto, esta todo lo que necesito.

@Lorsand 2 года назад

Hola! Antes de nada, agradecerte tus vídeos porque aprendemos mucho con ellos. Y gracias también por éste porque así podemos implementar bien el tema de las cookies. Quería comentarte que, si no me equivoco, hay un fallo aquí, ya que al indicarle a Tag Manager que incluya los scripts que hemos puesto (de Analytics, etc) en el Evento personalizado, al hacer clic en Aceptar, si recargamos/actualizamos la página o bien abrimos otra de nuestra web, como ya están aceptadas las cookies, ya no lo damos a aceptar y por lo tanto, no incluye los scripts que tenemos en Tag Manager. Estaré atento a tu respuesta a ver cómo solucionamos eso.. Saludos y gracias de nuevo!!

@pycondominicana2035 Год назад

Buscando esto por horas y tu me diste la solución, muchas gracias.-

@luishdzm73 Год назад

Muchas gracias profe, por la explicación y implementación.

3 года назад

Siempre pensando en nosotros, Carlos. Excelente video, en lista para aprender y aplicar en nuestros proyectos, eres un máquina.

@FalconMasters 3 года назад

Gracias Janiel, aprecio mucho estos comentarios.

@nelsonbrown9068 Год назад

Excelente aplicación, como siempre. Muchas gracias por tu valiosos aportes a la comunidad.

@edwinfandino1402 3 года назад

Excelente video! wow llevo una semana viendo tus videos y siento que aprendo más que con mi profesor jaja muchas gracias !

@FalconMasters 3 года назад

Muchas gracias!

@materiablue4509 6 месяцев назад

gracias por esta informacion actualmente en 2023 esta funcionando exelentemente este video, muy buena explicacion y bastante concreta

@aldermartinez5989 Год назад

Crack!! muchas gracias y mejor explicado no se puede, me suscribo.

@ESALHI Год назад

No puedo estar más agradecido. He aprendido más con su video que con todos los tutoriales y documentaciones que he visto por ahí. Genial. Directo. Concreto y DIDÁCTICO. Mi más sincera enhorabuena. 👏Eres un genio. Suscrito

@FalconMasters Год назад

Muchas gracias!

@alanblanco7041 Год назад

Sencillamente, increíble tutorial! No se puede pedir algo más completo, me siento listo para implementar esto en mis sitios. Gracias!

@FalconMasters Год назад

Muchas gracias!

@lacaverna9151 2 года назад

en el código CSS en vez de ponerle el padding: 0; y margin : 0; a los estilos generales, se los podemos poner al body. de esa manera los parrafos y titulos mantendrian su margenes y nos ahorramos el tener que añadirlos a posterior. GENIAL EL VIDEO !!! como siempre un saludo y gracias por compartir con nosotros.

@josuetriminio7623 Год назад

gracias por la informacion bien detallada y clara sigue asi ya me suscribi saludos desde españa

@solo-programadoresa.martin2602 2 года назад

Fantástico el vídeo. Muchas gracias.

@josechirino5168 3 года назад

La verdad era un concepto que no lo tenia muy claro y tu explicacion lo aclaro todo, Gracias! Ya me puedo reir de los memes de Cookies

@emilioelias4433 Год назад

muchas gracias por tu aporte. Muy bien explicado

@JIMGnservices 16 дней назад

Muy buen vídeo, gracias por tu ayuda colega 👍

@ulisessenpai8355 2 года назад

Excelente video, me sacaste de un apuro demasiado fuerte, y que me había costado 3 días en encontrar, prácticamente me quedé en blanco, y este video me ayudó bastante gracias. Por cierto, yo quiero centrar el recuadro de las cookies como si estuviera en el medio de todo, pero al cambiar los pixeles del recuadro o inclusive los demás boton, cuadro de texto e imagen, ya no se mueven del lugar, si me podrías liberar de esa duda, estará muy agradecido por eso

@javidesarrolloweb 3 года назад

gracias arturo muy buen video y practico, un saludo 👍

@robertmora5342 3 года назад

Me encanta tu manera de explicar, he visto casi todos los cursos😆

@FalconMasters 3 года назад

Muchas gracias!

@stavgraff 2 года назад

Excelente tutorial hermano !!! gracias

@esthernunez410 7 месяцев назад

Mil gracias, es excelente

@andresa3220 3 года назад

Señor Falcon, seré breve... ¡Eres lo máximo! Gracias por este gran tutorial.

@FalconMasters 3 года назад

Muchas gracias por ver mi video!

@worldmusic4190 2 года назад

Muchas gracias me funciono muchísimo

@orendaec 2 года назад

Excelente video, muchas gracias me sirvió (:

@AlbertCisneros0209 2 года назад

justo lo que necesitaba.

@LenRM 3 года назад

Eres el mejor profesor 👨‍🏫 #teamo. 💛

@santiagomartire.terapeuta 2 года назад

Muy buen video tutorial gracias!¡ consulta: ¿y q aparezca opciónes aceptar todo & solo las necesarias como veo en otras web? Aunque termina siendo obligatorio desde la experiencia de usuario se siente mejor xq podes tomar una decisión de mayor reserva

@alphamx13 2 года назад

Una pregunta Falcon, la propiedad o funcion localStorage cuanto tiempo le da a la cookie ? ya sabes, en PHP se le puede asignar una vigencia , pero para esta prueba que nos explicas se le puede asignar un tiempo de vigencia a las cookies ? Gracias!

@SuperEvilFigures Год назад

Hola. Gracias por este excelente tutorial, por fin logré entenderle al tema. Me queda una duda: en la configuración de la etiqueta, si únicamente voy a ejecutar Google Analytics ¿se logra el mismo resultado si elijo esa herramienta en la lista de etiquetas o de todos modos debo elegir "HTML Personalizado" para pegar el código de Analytics?

@empachado69 3 года назад

eres un genio!

@robertogutierrezcaballero9699 3 месяца назад

Wow, espectacular

@joelwaldo996 3 года назад

Te quedó increíble, Gracias necesitaba esto :D

@FalconMasters 3 года назад

Gracias!

@joelwaldo996 3 года назад

@@FalconMasters a ti, sigue así 😀

@SebasPortu 2 года назад

Una maravilla como explicas!!! mil gracias. Pero tengo una duda si podrias resolver. ¿Como hago para insetar este banner en mi woprdpress? Llevo una semana buscando como hacerlo y no encuentro nada. Gracias!

@linearata6162 3 года назад

Muy buen Canal muy bien explicado

@FalconMasters 3 года назад

Muchas gracias!

@nchaquer 3 года назад

Excelente..

@Paus3d Год назад

Increíble

@imanolrodriguez3789 3 года назад

Excelente

@byteknight1294 Год назад

Gracias Manin

@kiyojuarez7547 Год назад

este cámara si le sabe, gran tutorial hermano.

@FalconMasters Год назад

Gracias!

@novalunha 3 года назад

Gracias por compartir, me ayudo mucho tu tutorial.

@FalconMasters 3 года назад

Genial! Me alegra que así fuera.

@novalunha 3 года назад

@@FalconMasters Hola nuevamente. Estuve tratando de aplicar el tutorial en mi blog, pues lo explicas muy bien y lo puede hacer hasta el minuto 36.30 que es cuando tengo que poner los scrips de google analitic, facebook y demas en el tagmanager de google (html personalizado).. Primero cuando cree la cuenta allí, y pegue los dos códigos en la plantilla de blogger justo donde indicas, me daba error por &| Y no sabía cómo corregirlo, quizás porque tengo otros códigos en mi plantilla. Y además porque no se en mi plantilla como encontrar dichos script de google, facebook y demás.. Igual me disfrute el proceso de preparar el codigo contigo como guía. Pero me gustaría preguntarle si me puede ayudar hacerlo, yo estaría dispuesto a pagarle. Mi blog es: mujerescogida.com y mi email: mujerescogida1@gmail.com Podrias por favor contactarme para dejarme saber si me puedes ayudar con eso y el pago, para enviarte via paypal? Gracias, espero me puedas ayudar!

@FalconMasters 3 года назад

@@novalunha Hola, ¿que error es el que te marca?

@Mr23545 Год назад

Mi LIKE para ti !!! GRACIAS bro !!!

@omarmeza6321 2 года назад

UUff!!!🙃 Que buen video... Pero tengo una consulta ¿SI tengo mas de un pixel que ejecutar en mi pág.. como haría en mi caso? esto es xq el pixel debe ejecutar independiente en distintas paginas o al menos así entiendo que funciona

@joha365 2 года назад

Excelentes tu forma de enseñar y tus videos, muchas gracias. Una pregunta este código lo debo colocar en todas las páginas de mi sitio web?

@FalconMasters 2 года назад

Gracias! y si tendrías que ponerlo en todas.

@carloscabrera4527 2 года назад

ídolo

@aico_1173 3 года назад

Muy buen video

@FalconMasters 3 года назад

Gracias!

@fabiananavarro5556 2 года назад

Falcon podrias hacer un video sobre como hacerlo en react? no puedo hacer la parte del javascript... o me dirias como seria el codigo? estoy hace dias y no puedo resolverlo..

@joeparadise3639 Год назад

pregunta, ya tengo una pagina acabada solo falta poner el cookies , al hacer eso afectara alguna posicion de mi html? es decir , se descuadrará algo o no . gracias

@2kceltics Год назад

hola te hago una consulta, tenes idea de como solucionar el error de los videos third-party de youtube cuando los colocas con un en tu sitio web, te sale un aviso en chrome del estilo: SameSite debe ser none... y cuando reproducis el video te tira mas de 500 avisos de error en la consola del navegador, intente muchas veces configurar la sesion para modificar el samesite a "none" ... pero no hay caso el aviso de error no se va... Crees que podria ser un problema por mala optimizacion de youtube en cuanto a la cookies cruzadas en sitios de 3eros ?!! Si tenes tiempo fijate sobre el tema me parecio llamativo ese tipo de error

@ericcarrillo6250 2 года назад

Tengo una duda, una vez configuras Tag Manager para que active las cookies cuando haces click en aceptar, el codigo que esta en mi editor de todo lo que sería google analytics, google ads, etc, se borra ya que Tag Manager ya tiene los codigos o lo dejo puesto porque Tag Manager solo los activa si están escritos? Espero que se me haya entendido😂😅

@cajegoprosilveredits9949 2 года назад

Buen aporte, pero algo me falla, después de copiar el código no me aparece el banner, pero si vuelvo a escribir activo en el HTML en el mismo sitio que antes si que aparece pero al dar click en De Acuerdo no hace la función de desaparecer... Codifico con PhpStorm

@batman68477 3 года назад

muy interesante osea con esto puedo hacer un historial de navegacion

@4eahs 3 года назад

Voy a hacer uno pero como cartel de bienvenida o algo parecido

@Paula-xs7tt 11 месяцев назад

Help! Hola, estoy creando un blog en Google sites y quería incorporarle el banner de cookies, he visto todo tu vídeo pero no me queda claro dónde tengo que insertar los códigos dentro de Google sites para que me aparezca. ¿Podrías por favor decirme? Gracias

@SuperEvilFigures Год назад

Si el usuario no quiere aceptar las cookies ¿entonces de plano no le damos acceso a la página? ¿no debería de haber un botón de custodiar cookies y rechazar cookies?

@Leover378 Год назад

2:19 Ok pero entonces con este ejemplo que muestras si los visitantes le dan un clic fuera del AVISO, desaparece el mismo y les permite navegar?

@TheHitWin 3 года назад

Buenisimo!! gracias Cuando alguien da click al boton aceptar, cuanto tiempo pasa para que vuelva a aparecer el banner, 30 días?

@FalconMasters 3 года назад

En este caso hasta que el almacenamiento en localstorage se borre. Aunque se puede programar también para que después de 30 días se borre el almacenamiento actual y se vuelva a preguntar.

@TheHitWin 3 года назад

@@FalconMasters Gracias por la respuesta! en este caso como haría el código para que se borre automáticamente en 30 días? gracias de nuevo me ha servido el tutorial

@FalconMasters 3 года назад

@@TheHitWin Seria guardar en localstorage el valor de la fecha cuando dio click en aceptar cookies y cada que el usuario entre al sitio, comprobar si la fecha actual es mayor de 30 días a la guardada en localstorage, entonces se borra localstorage y se muestra de nuevo el mensaje.

@Dj_System Год назад

buenas amigo trengo problema con su codigo lo coloco y me cambia la pagina a ingles y no recibe tildes ni ñ que será mi pagina tiene metas de es sp para referirce al español. agradezco su ayuda

@Oscarre 2 года назад

pero con esto solo puede aceptar? no puede rechazar y seguir navegando?

@marianyleal9394 3 дня назад

consulta por que la imagen sale con codigos ?

@german_abril7254 2 года назад

29:03 Pero ese condicional ya me refleja como una cookie en uso...míralo en el icono donde va el candado de seguridad SSL. Aunque no es una cookie realmente, pero la gente que no sabe lo ve como que has cargado una cookie sin permiso.

@santiagovalcarcel6868 10 месяцев назад

ayuda chicos voy en el minuto 27:34 en js para poner activo a la función de avisoCookies y fondoAvisoCookies pero no aparece !! ayudenme porfa

@mingo6267 3 года назад

Hay algun tipo de contacto contigo?

@german_abril7254 2 года назад

2:10 Me parece que te equivocas. No sé en Latinoamérica cómo será la ley, pero al menos aquí en Europa eso se llama Cookie Wall y fueron prohibidos ya que consideran que el acceso y uso de las funciones no debe estar condicionado porque el usuario acepte el uso de cookies. Así que la manera incorrecta sería bloquear la página con un banner de cookies.

@mateocoronel3083 Год назад

Hola que tal como hago para que corra todo lo que hicimos

@yepeskilla 2 года назад

Parceros, ojo a los que tienen un bloqueador de anuncios instalado en el navegador y no les funciona lo de tag manager, a mi me costo 2 días de mi vida descubrir que los bloqueadores si funcionan para mi caso el uBlock Origin en edge

@jaalorsa 3 года назад

El localstorage tiene el mismo efecto legal que las cookies?

@FalconMasters 3 года назад

Es una pregunta muy interesante y no soy un abogado como para darte la respuesta exacta. Pero bajo mi punto de vista si entrarían en la misma categoría ya que se pudieran utilizar para rastrear a los usuarios. Aunque no suele ser el caso, ya que para eso se usan cookies, ya que estas se pueden enviar al servidor cuando haces una petición dentro de una pagina web.

@davidareiza9875 8 месяцев назад

Hola amigo, saludos, los códigos del repositorio están en blanco. :(

@user-go6qj5cy1m 21 день назад

Aún se puede hacer de esta forma?

@jokerimad9983 3 года назад

Como te puedo contactar ?? Te necesito para un trabajo

@FalconMasters 3 года назад

Puedes mandarme un mensaje privado en Udemy.

@carloscarrion7405 9 месяцев назад

como puedo incluirlo a un blog?

@agnologogiafler9085 3 года назад

Cómo agregar galletas en una web. Okay.

@MiguelAngel-mf3yu 3 года назад

Para q sirve poner un cokis a una web?

@911gpscolombia Год назад

Esta caido el enlace con los archivos... pero el video esta excelente

@chicharrero3884 3 года назад

Estas leyes son una mierda, al final entrar en algunas paginas basura usualmente periodicos donde tienes que clickar en 20 botones para desactivar todas las cookies, pero no han puesto una ley para que exista un boton para desactivar todas las coockies. Pero por suerte hay paginas que si ponen un boton para desactivar todas las coockies

@FalconMasters 3 года назад

Totalmente de acuerdo contigo. Es como si fueras a un supermercado y para entrar tuvieras que firmar donde das el consentimiento de que puedan usar cámaras y tu salgas en ellas.

@francnavarro44 3 года назад

En Europa es donde son más rígidas estas leyes, google no es tan exigente, hasta donde se (y así lo tengo en mis webs monetizadas) sólo te piden un aviso de cookies.

@padrocha 3 года назад

Pregunta. Hacer localStorage ¿es una cookie?

@jaalorsa 3 года назад

No es lo mismo, pero mi duda es si tendrá el mismo efecto legal(el localstorage) que las cookies?

@Greenry.crearte.valery Год назад

no me quieren funcionar los códigos de Js..porque sera?

@FalconMasters Год назад

Seguramente tienes algo mal escrito.

@dayanaachaschavez9553 6 месяцев назад

a mi no me funciona

@SegundoRobledo 3 года назад

No debería ver otro botón para rechazar cookies o solo aceptar funcionales

@FalconMasters 3 года назад

Si, lo puedes poner, pero si las rechazan deberias sacarlos de tu pagina o no ponerles las cookies.

@seliyu9030 2 года назад

@@FalconMasters ¿Cómo se podría implementar? Es decir un botón de rechazar y que se pueda seguir navegando sin cargar las cookies.

@ivanglpz 3 года назад

>:v porque dice aceptar cookies y no me dan cookies.

@ivanmartinez8551 8 месяцев назад

ya dame el maldito código de las cookies

@informatica8765 3 года назад

Muy interesante, pero mejor no uso las Cookies jaja

@HDRender 3 года назад

Yo pensaba igual, pero luego resulta que estaba usando analytics que lleva cookies, y muchos servicios de terceros que le metemos a nuestras webs. Ni me había dado cuenta de que tenía cookies en mis webs.

@Unika0s 6 месяцев назад

falso, las cookies no deben condicionar la navegacion en modo alguno, si acaso, la visualizacion del contenido. Pero bueno, a ver que tal acaban estos 45 casi 46 minutos de video que van a llevar perder tiempo o a invertirlo. Ya te contare.

@ninomali7122 3 года назад

navigator.share

@ninomali7122 3 года назад

navigator.share

@ninomali7122 3 года назад

navigator.share