@saulwade/swl-ses 2.4.3 → 2.5.2

package/habilidades/tracking-measurement/recursos/consent-mode.md

@@ -1,231 +0,0 @@
-# Consent Mode v2: GDPR, CCPA e integración con CMPs
-
-## Qué es Consent Mode v2
-
-Consent Mode v2 es un mecanismo de Google que permite a los tags de Google
-(GA4, Google Ads, Floodlight) adaptar su comportamiento según el consentimiento
-del usuario. Introducido en 2024 como requisito para mantener la personalización
-de anuncios en el EEE y UK.
-
-### Los 4 parámetros de consentimiento
-
-| Parámetro | Controla |
-|-----------|----------|
-| `analytics_storage` | Cookies de medición (GA4: `_ga`, `_ga_*`) |
-| `ad_storage` | Cookies de publicidad (Google Ads, Floodlight) |
-| `ad_user_data` | Envío de datos de usuario a Google para publicidad |
-| `ad_personalization` | Remarketing y personalización de anuncios |
-
-Cuando un parámetro está `denied`, Google no almacena cookies pero sí
-registra eventos "sin cookies" (pings anónimos) para el modelado estadístico.
-
-## Implementación base con gtag
-
-El código de Consent Mode debe ejecutarse ANTES del snippet de GTM o gtag.
-El orden importa: si GTM carga primero, puede crear cookies antes del consentimiento.
-
-```html
-<!-- 1. Snippet de Consent Mode — ANTES de GTM -->
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-
-  gtag('consent', 'default', {
-    analytics_storage: 'denied',
-    ad_storage: 'denied',
-    ad_user_data: 'denied',
-    ad_personalization: 'denied',
-    wait_for_update: 500,  // ms para esperar la respuesta del CMP
-  });
-
-  gtag('set', 'ads_data_redaction', true);  // Redactar URLs de click si denied
-  gtag('set', 'url_passthrough', true);     // Pasar info de click en URL para atribución
-</script>
-
-<!-- 2. Snippet de GTM — DESPUÉS de Consent Mode -->
-<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-XXXXXXX');
-</script>
-```
-
-### Actualizar consentimiento tras decisión del usuario
-
-```javascript
-// Llamar después de que el usuario acepta en el banner del CMP
-function otorgarConsentimiento(opciones) {
-  gtag('consent', 'update', {
-    analytics_storage: opciones.analytics ? 'granted' : 'denied',
-    ad_storage: opciones.publicidad ? 'granted' : 'denied',
-    ad_user_data: opciones.publicidad ? 'granted' : 'denied',
-    ad_personalization: opciones.publicidad ? 'granted' : 'denied',
-  });
-}
-
-// Llamar cuando el usuario rechaza todo
-function rechazarConsentimiento() {
-  gtag('consent', 'update', {
-    analytics_storage: 'denied',
-    ad_storage: 'denied',
-    ad_user_data: 'denied',
-    ad_personalization: 'denied',
-  });
-}
-```
-
-## Integración con CMPs
-
-### Cookiebot
-
-Cookiebot dispara el evento `CookiebotOnAccept` / `CookiebotOnDecline`.
-Integración directa disponible en GTM como template oficial de la galería.
-
-```javascript
-// Listener para Cookiebot
-window.addEventListener('CookiebotOnAccept', function() {
-  gtag('consent', 'update', {
-    analytics_storage: Cookiebot.consent.statistics ? 'granted' : 'denied',
-    ad_storage: Cookiebot.consent.marketing ? 'granted' : 'denied',
-    ad_user_data: Cookiebot.consent.marketing ? 'granted' : 'denied',
-    ad_personalization: Cookiebot.consent.marketing ? 'granted' : 'denied',
-  });
-}, false);
-```
-
-### OneTrust
-
-OneTrust usa categorías de cookies mapeadas a grupos:
-
-| Grupo OneTrust | Parámetro Consent Mode |
-|---------------|----------------------|
-| `C0002` (Performance) | `analytics_storage` |
-| `C0004` (Targeting) | `ad_storage`, `ad_user_data`, `ad_personalization` |
-
-```javascript
-// Template GTM disponible en: OneTrust > GTM Integration
-// O implementación manual:
-window.OneTrust?.OnConsentChanged(function(event) {
-  const activas = event.detail;
-  gtag('consent', 'update', {
-    analytics_storage: activas.includes('C0002') ? 'granted' : 'denied',
-    ad_storage: activas.includes('C0004') ? 'granted' : 'denied',
-    ad_user_data: activas.includes('C0004') ? 'granted' : 'denied',
-    ad_personalization: activas.includes('C0004') ? 'granted' : 'denied',
-  });
-});
-```
-
-### Usercentrics
-
-Usercentrics expone el objeto `UC_UI` y el evento `ucEvent`:
-
-```javascript
-window.addEventListener('ucEvent', function(e) {
-  if (e.detail?.event === 'consent_status') {
-    const servicios = e.detail;
-    gtag('consent', 'update', {
-      analytics_storage: servicios['Google Analytics'] ? 'granted' : 'denied',
-      ad_storage: servicios['Google Ads'] ? 'granted' : 'denied',
-      ad_user_data: servicios['Google Ads'] ? 'granted' : 'denied',
-      ad_personalization: servicios['Google Ads'] ? 'granted' : 'denied',
-    });
-  }
-});
-```
-
-## Modelado de conversiones en GA4
-
-Cuando `analytics_storage` o `ad_storage` está `denied`, GA4 no puede
-atribuir conversiones directamente. Google utiliza ML para estimar las
-conversiones faltantes basándose en usuarios con consentimiento similar.
-
-**Condiciones para que el modelado funcione**:
-- Mínimo 1,000 conversiones observables por semana.
-- Tasa de consentimiento > 0% (si nadie acepta, no hay datos base).
-- Consent Mode implementado correctamente (los pings anónimos llegan).
-
-**Verificar que los pings llegan**: En GA4 > Admin > Data streams > tu stream >
-Measurement Protocol. Debe mostrar eventos incluso de usuarios sin consentimiento
-(aparecen como eventos anónimos sin `client_id`).
-
-## GDPR: base legal por tipo de tracking
-
-| Tipo de tracking | Base legal posible | Requiere banner |
-|-----------------|-------------------|-----------------|
-| Analytics de medición interna | Interés legítimo (debatible) | Sí, en la mayoría de países |
-| Analytics para mejora de producto | Interés legítimo | Sí |
-| Retargeting / remarketing | Consentimiento explícito | Sí, siempre |
-| Conversiones para optimización de anuncios | Consentimiento explícito | Sí, siempre |
-
-**Práctica recomendada**: usar consentimiento explícito para todo tracking
-publicitario y analítico. El interés legítimo es cuestionable y está siendo
-restringido en interpretaciones recientes del GDPR.
-
-**Registro de consentimiento**: almacenar en base de datos:
-- Fecha y hora de la decisión
-- Versión de la política de privacidad aceptada
-- Opciones específicas seleccionadas por el usuario
-- IP anonimizada (últimos 2 octetos a 0)
-
-## CCPA: opt-out en lugar de opt-in
-
-En California (CCPA), el modelo es inverso al GDPR: tracking activo por
-defecto, con obligación de ofrecer opt-out.
-
-```javascript
-// URL de opt-out requerida por CCPA
-// El usuario llega desde el enlace "No vender mi información personal"
-if (new URLSearchParams(location.search).has('ccpa_opt_out')) {
-  gtag('consent', 'update', {
-    ad_storage: 'denied',
-    ad_user_data: 'denied',
-    ad_personalization: 'denied',
-  });
-  // Persistir la preferencia en localStorage
-  localStorage.setItem('ccpa_opt_out', 'true');
-}
-
-// Al cargar la página, verificar opt-out previo
-if (localStorage.getItem('ccpa_opt_out') === 'true') {
-  gtag('consent', 'update', {
-    ad_storage: 'denied',
-    ad_user_data: 'denied',
-    ad_personalization: 'denied',
-  });
-}
-```
-
-**US Privacy String**: formato `1YNN` (versión 1, aviso notificado, opt-out no,
-LSPA no). Incluir en requests de publicidad si se usa un ad server compatible.
-
-## Verificación con Consent Mode Inspector
-
-En Chrome DevTools > Application > Cookies:
-- Antes de aceptar: no deben existir `_ga`, `_ga_*`, `_gcl_*`, `_fbp`
-- Después de aceptar analytics: `_ga` y `_ga_MEASUREMENTID` deben aparecer
-- Después de aceptar publicidad: `_gcl_au` (Google Ads) debe aparecer
-
-En la consola del browser:
-```javascript
-// Ver estado actual del consentimiento
-window.dataLayer.filter(e => e[0] === 'consent')
-// Debe mostrar el 'default' y los 'update' aplicados
-```
-
-Con la extensión **Consent Mode Inspector** de Google (Chrome Web Store):
-muestra en tiempo real el estado de cada parámetro y los cambios al interactuar
-con el banner de consentimiento.
-
-## Checklist de cumplimiento pre-lanzamiento
-
-- [ ] Consent Mode inicializado ANTES del snippet de GTM
-- [ ] Default: los 4 parámetros en `denied`
-- [ ] Banner de CMP visible en primera visita para usuarios del EEE
-- [ ] `gtag('consent', 'update', ...)` se ejecuta al aceptar/rechazar
-- [ ] Sin cookies `_ga`, `_fbp` antes del consentimiento (verificar en DevTools)
-- [ ] Registro de consentimiento almacenado en base de datos
-- [ ] Enlace "No vender mi información" visible en footer (para CCPA)
-- [ ] Política de privacidad actualizada con tecnologías de tracking usadas

package/habilidades/tracking-measurement/recursos/gtm-datalayer.md

@@ -1,216 +0,0 @@
-# GTM: dataLayer avanzado, triggers, variables y server-side
-
-## Arquitectura de GTM
-
-GTM funciona con tres conceptos fundamentales que se relacionan en orden:
-
-```
-Trigger (cuándo) ──► Tag (qué hacer) ──► Variable (con qué datos)
-```
-
-Un **trigger** detecta un evento en la página. Una **tag** se dispara cuando
-el trigger se activa. Las **variables** proveen los datos que la tag necesita.
-
-### Workspace y versiones
-
-- El **workspace** es el entorno de trabajo en progreso (sin publicar).
-- Cada **versión** es un snapshot publicado con nombre, fecha y descripción.
-- Crear una versión antes de cada cambio relevante: `Versión > Nueva versión`.
-- En producción usar siempre un contenedor publicado, nunca el workspace.
-- Ambientes (`Environments`): crear uno por stage (dev, staging, prod) para
-  probar sin afectar el contenedor de producción.
-
-## Variables
-
-### Variables built-in
-
-GTM incluye variables activables sin configuración extra:
-
-| Variable | Valor |
-|----------|-------|
-| `Page URL` | URL completa de la página actual |
-| `Page Path` | Solo el path: `/productos/sku-001` |
-| `Click URL` | URL del elemento clickeado |
-| `Click Text` | Texto del elemento clickeado |
-| `Click Classes` | Clases CSS del elemento clickeado |
-| `Form URL` | URL de acción del formulario enviado |
-| `Scroll Depth Threshold` | Porcentaje de scroll alcanzado |
-
-Activarlas en: Variables > Built-In Variables > Configure.
-
-### Variables personalizadas de dataLayer
-
-Para leer valores del objeto `ecommerce` del dataLayer:
-
-- Tipo: **Data Layer Variable**
-- Nombre de variable: `ecommerce.transaction_id` (notación de punto)
-- Versión del dataLayer: **Version 2** (siempre para GA4)
-- Nombre de la variable en GTM: `{{DL - ecommerce.transaction_id}}`
-
-Convención de naming para variables de dataLayer: `{{DL - ruta.al.valor}}`.
-
-### Variables de JavaScript personalizado
-
-Para lógica más compleja (formateo, cálculos, lectura de cookies):
-
-```javascript
-// Variable: {{JS - GA Client ID}}
-function() {
-  var cookie = document.cookie.match(/_ga=([^;]+)/);
-  if (!cookie) return undefined;
-  var parts = cookie[1].split('.');
-  return parts.slice(-2).join('.');
-}
-```
-
-```javascript
-// Variable: {{JS - FBC Cookie}}
-function() {
-  var match = document.cookie.match(/_fbc=([^;]+)/);
-  return match ? match[1] : undefined;
-}
-```
-
-## Triggers
-
-### Tipos de trigger más usados
-
-**All Pages (Pageview)**: Se dispara en cada carga de página. Base para GA4
-Configuration tag. Siempre presente en todo contenedor.
-
-**Custom Event**: Se dispara cuando `dataLayer.push({ event: 'nombre' })`
-coincide con el nombre configurado. Usar para eventos de e-commerce.
-
-```
-Trigger > Custom Event
-Event name: purchase
-(Para capturar todos los eventos custom: usar regex .*)
-```
-
-**Click - All Elements**: Se dispara en cualquier click. Útil para tracking
-de botones sin código JavaScript adicional.
-
-**Form Submission**: Se dispara al enviar un formulario. Requiere activar
-`Form` en Built-In Variables.
-
-**History Change**: Esencial en Single-Page Apps (React, Angular, Vue) donde
-la URL cambia sin recarga completa. Usar en lugar de Pageview para SPAs.
-
-### Race conditions en SPAs
-
-En aplicaciones de una sola página, el trigger `History Change` puede
-dispararse antes de que el componente actualice el dataLayer. Solución:
-
-```javascript
-// Después del cambio de ruta, esperar al siguiente tick
-router.afterEach((to) => {
-  setTimeout(() => {
-    dataLayer.push({ ecommerce: null });
-    dataLayer.push({
-      event: 'page_view',
-      page_path: to.path,
-      page_title: to.meta.title,
-    });
-  }, 0);
-});
-```
-
-Alternativa con GTM: usar la variable `{{JS - Page Path}}` con `Page Path`
-built-in, que siempre refleja la URL actual al momento del trigger.
-
-## Tags
-
-### GA4 Configuration Tag
-
-Una sola por contenedor. Se dispara en All Pages.
-
-- Tag type: **Google Analytics: GA4 Configuration**
-- Measurement ID: `{{Constant - GA4 Measurement ID}}`
-- Fields to set: `debug_mode` = `true` (solo en workspace de desarrollo)
-
-### GA4 Event Tag
-
-Una por tipo de evento e-commerce.
-
-- Tag type: **Google Analytics: GA4 Event**
-- Configuration Tag: seleccionar la Configuration Tag creada arriba
-- Event Name: `{{DL - event}}` (lee el nombre del evento del dataLayer)
-- Trigger: Custom Event con el nombre del evento
-
-Para pasar el objeto `ecommerce` completo:
-- Event Parameters: agregar `items` = `{{DL - ecommerce.items}}`
-- Marcar **Send Ecommerce data**: activado, Source: Data Layer
-
-### Conversion Linker
-
-Tag obligatoria para Enhanced Conversions y cross-device tracking:
-
-- Tag type: **Conversion Linker**
-- Trigger: All Pages
-- Colocar antes que cualquier tag de conversión de Google Ads
-
-## GTM Server-Side en Cloud Run
-
-El servidor GTM actúa como proxy entre el browser y las plataformas de ads,
-permitiendo enviar datos first-party sin depender de las restricciones del browser.
-
-### Setup mínimo
-
-1. Crear un contenedor de tipo **Server** en GTM.
-2. Desplegar la imagen `gcr.io/cloud-tagging-10302018/gts-preview:latest`
-   en Cloud Run (mínimo 1 instancia siempre activa para latencia).
-3. Configurar el **Server Container URL** en el contenedor browser de GTM.
-4. Verificar que las requests van a `tu-dominio.com/g/collect` en vez de
-   directamente a `google-analytics.com`.
-
-### Client templates
-
-El servidor GTM necesita un **Client** que reciba las requests del browser:
-
-- **GA4 Client**: recibe requests del tag GA4 del browser.
-- **Meta Pixel Client**: recibe requests del Meta Pixel del browser.
-
-Cada client parsea el payload y lo pone disponible para los tags del servidor.
-
-### Tag templates del servidor
-
-Los tags del servidor envían datos a las plataformas finales:
-
-- **GA4 (server-side)**: usa `measurement_id` y `api_secret` como variables.
-- **Meta CAPI**: usa `pixel_id` y `access_token` como variables de entorno.
-
-Ventaja clave: las variables con credenciales viven en el servidor,
-nunca expuestas en el browser.
-
-## Modo de depuración
-
-### Tag Assistant
-
-1. En GTM workspace > Preview: abre Tag Assistant en una nueva pestaña.
-2. Ingresar la URL del sitio y activar la sesión de debug.
-3. El panel izquierdo muestra todos los eventos del dataLayer en orden.
-4. Hacer click en un evento para ver qué tags se dispararon y cuáles no.
-
-### GA4 DebugView
-
-En GA4 > Admin > DebugView: muestra eventos en tiempo real del browser
-con `debug_mode: true`. Indispensable para validar eventos e-commerce.
-
-### Regla de validación antes de pasar a producción
-
-1. Verificar en Tag Assistant que cada evento tiene `ecommerce: null` previo.
-2. Confirmar en GA4 DebugView que el evento `purchase` llega con el
-   `transaction_id` correcto.
-3. Publicar una versión con nombre descriptivo: `"feat: purchase event GA4"`.
-4. Monitorear GA4 > Realtime durante las primeras 24 horas post-deploy.
-
-## Buenas prácticas de naming
-
-| Tipo | Convención | Ejemplo |
-|------|-----------|---------|
-| Variable dataLayer | `{{DL - ruta.del.valor}}` | `{{DL - ecommerce.transaction_id}}` |
-| Variable JavaScript | `{{JS - Descripción}}` | `{{JS - GA Client ID}}` |
-| Constante | `{{Constant - Nombre}}` | `{{Constant - GA4 Measurement ID}}` |
-| Trigger custom event | Igual que el nombre del evento | `purchase`, `view_item` |
-| Tag GA4 | `GA4 - Nombre del evento` | `GA4 - Purchase`, `GA4 - Config` |
-| Tag conversión | `Ads - Nombre conversión` | `Ads - Purchase Conversion` |