Aquí tienes el tutorial completamente reformulado, adaptado al estilo oficial de CRMHUB y listo para publicación:

🍪 Integración de Herramientas de Marketing con el Banner de Cookies

Si vas a utilizar herramientas como Facebook Pixel, Google Analytics o Google Tag Manager en tu sitio o embudos de CRMHUB, es fundamental que se integren correctamente con el banner de consentimiento de cookies para cumplir con normativas como el GDPR.

Este tutorial te guía paso a paso en la implementación correcta.

📋 Contenido de este Tutorial

🎯 ¿Por qué es importante la integración con cookies?
🔧 Implementación segura de píxeles y scripts
🧠 Lectura y control de categorías de consentimiento
⚠️ Notas clave a tener en cuenta

🎯 ¿Por qué es importante la integración con cookies?

El banner de cookies de CRMHUB permite a los usuarios decidir qué tipo de datos están dispuestos a compartir. Si tus scripts de marketing (como Pixel de Facebook o Google Analytics) se cargan sin verificar ese consentimiento, podrías infringir regulaciones de privacidad.

Por eso, es obligatorio no usar etiquetas <noscript>, ya que estas pueden cargar scripts sin respetar el consentimiento del usuario.

🔧 Implementación Segura de Scripts

🔵 Facebook Pixel

Reemplaza el código tradicional por este script actualizado que respeta el consentimiento:

<script> !function(f,b,e,v,n,t,s) { if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('consent', 'revoke'); fbq('init', '{tu-pixel-id}'); fbq('track', 'PageView'); window.addEventListener('LCCookieConsentDoneFB', function(cookieConsent){ fbq('consent', cookieConsent.detail.fb) }, false); </script>

🟢 Google Analytics (gtag.js)

<script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag("consent", "default", { ad_storage: "denied", ad_user_data: "denied", ad_personalization: "denied", analytics_storage: "denied", }); window.addEventListener("LCCookieConsentDoneGTag", function (cookieConsent) { if (cookieConsent.detail.gtag === 'grant') { gtag("consent", "update", { ad_storage: "granted", ad_user_data: "granted", ad_personalization: "granted", analytics_storage: "granted", }); } }, false); </script> <!-- Script principal de Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=TU_TAG_ID"></script> <script> gtag("js", new Date()); gtag("config", "TU_TAG_ID"); </script>

🟡 Google Tag Manager (GTM)

<script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag("consent", "default", { ad_storage: "denied", ad_user_data: "denied", ad_personalization: "denied", analytics_storage: "denied", }); window.addEventListener("LCCookieConsentDoneGTM", function (cookieConsent) { if (cookieConsent.detail.gtm === 'grant') { gtag("consent", "update", { ad_storage: "granted", ad_user_data: "granted", ad_personalization: "granted", analytics_storage: "granted", }); } }, false); </script> <!-- Código GTM --> <script> (function(w,d,s,l,i){ w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'}); var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:''; j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl; f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXX'); </script>

🧠 Lectura de Categorías de Consentimiento

Si deseas ejecutar scripts personalizados o de terceros basados en lo que el usuario aceptó, puedes usar el siguiente código:

function getConsentedCategories() { const categoriesCookie = document.cookie .split('; ') .find(row => row.startsWith('cookie-categories=')); if (categoriesCookie) { return categoriesCookie.split('=')[1].split(','); } return []; } function isCategoryAllowed(category) { const categories = getConsentedCategories(); return categories.includes(category); } function getCookieConfig() { const cookieConfig = document.cookie .split('; ') .find(row => row.startsWith('cookie-config=')); if (cookieConfig) { return cookieConfig.split('=')[1]; } return undefined; }

⚠️ Notas Importantes

❌ No uses etiquetas <noscript>: Pueden ignorar el consentimiento del usuario.
✅ Asegúrate de que todas las herramientas de marketing respeten el consentimiento.
📦 Las cookies aceptadas se almacenan en cookie-categories (formato: essential,advertising,analytics).
🔄 Usa los eventos de consentimiento (LCCookieConsentDoneFB, LCCookieConsentDoneGTag, LCCookieConsentDoneGTM) para activar herramientas solo si el usuario ha aceptado.

¿Te resultó útil este tutorial?
Consulta más guías prácticas en nuestro Help Center:
👉 https://soporte.crmhubplatform.com/es/