Skip to main content

GTM — Tooltip CTA Login

Script que inyecta un tooltip de bienvenida junto al botón de acceso a la cuenta en el header. Lee la cookie lastLoggedIn para obtener el nombre del último usuario registrado y lo usa para personalizar el mensaje, que invita a registrarse a cambio de un 10% de descuento.

Texto del tooltip​

El contenido es estático — no proviene de variables GTM:

Hola [firstName]. Regístrate en Hawkers y consigue un 10% de descuento extra en tus compras

Además, podrás disfrutar de todas las ventajas de ser parte de la familia Hawkers

[firstName] se reemplaza con el nombre leído de la cookie. Si la cookie no existe o no tiene firstName, el campo queda vacío.

La cookie almacena un objeto JSON con el email y nombre del último usuario logado, con dos capas de codificación:

Cookie raw value
  └─ decodeURIComponent()
      └─ JSON.parse() → { email: "...", firstName: "..." }
          └─ atob() (Base64 decode) sobre cada campo
              └─ hexToText() (hex → texto plano)
Campo cookieTipoDescripción
emailstring (hex→Base64)Email del usuario — decodificado pero solo almacenado, no visible en el tooltip.
firstNamestring (hex→Base64)Nombre del usuario — visible en el saludo del tooltip.
Dependencia externa sin uso

El script carga crypto-js 4.2.0 desde cdnjs, y define la variable gtmTooltipSecretKeyToDecodeData = "fuckyouga360", pero ninguno de los dos se usa en el código activo. Son remanentes de una versión anterior que probablemente usaba CryptoJS.AES.decrypt. La decodificación actual usa atob() + una función hexToText() propia.

Comportamiento actual vs. código comentado​

El script tiene funcionalidades implementadas pero comentadas que revelan una evolución de diseño:

  1. El tooltip se inyecta en .gtm-button-access-account al cargar el tag.
  2. Tras 1000ms, se añade la clase is-visible → slide-up + fade-in del tooltip.
  3. El tooltip queda visible permanentemente (no hay mecanismo de cierre activo).

Estados del tooltip​

ClaseElementoCuándo se aplicaEfecto
(ninguna).gtm-html-tooltipEstado inicialOculto: opacity: 0, visibility: hidden, translateY(32px).
is-visible.gtm-html-tooltip1000ms tras cargaVisible: opacity: 1, translateY(16px). Transición 250ms.
is-visible.gtm-html-notification(comentado)Activaría la animación gelatine del badge.

Clases CSS​

ClaseElementoDescripción
gtm-html-tooltipdivTooltip position: absolute, fondo azul #4c7fef, 300px, border-radius: 8px 0 8px 8px. Flecha ::before apuntando hacia arriba-derecha.
gtm-js-tooltipdiv interiorContenedor del texto del tooltip — referenciado por JS.
gtm-js-tooltip__titlepSaludo en negrita.
gtm-html-notificationspan(CSS implementado, JS comentado) Badge 16×16px, fondo #ceFF02, border-radius: 50%.

Selectores DOM​

SelectorDescripción
.gtm-button-access-accountBotón de acceso a la cuenta en el header — el tooltip y el badge (si activo) se añaden como hijos de este elemento.
.gtm-html-tooltipEl propio tooltip una vez inyectado — referenciado para abrir/cerrar.

Flujo de ejecución​

fnGtmTooltipToInit()  ← llamada directa al cargar el tag
  │
  ├─ Busca .gtm-button-access-account
  │
  ├─ fnGtmTooltipToGetLastLoggedInCustomerData()
  │   ├─ fnGtmTooltipToGetCookie("lastLoggedIn")
  │   │   └─ Parsea document.cookie buscando "lastLoggedIn"
  │   ├─ decodeURIComponent(cookieData) → JSON.parse() → { email, firstName }
  │   ├─ atob(email) → hexToText() → email en claro
  │   └─ atob(firstName) → hexToText() → firstName en claro
  │       → guarda en gtmTooltipLastLoggedInCustomerData
  │
  ├─ fnGtmTooltipToInjectCode()
  │   ├─ Crea div.gtm-html-tooltip con saludo personalizado
  │   └─ Lo añade como hijo de .gtm-button-access-account
  │
  ├─ fnGtmTooltipToInitElements()
  │   └─ Referencia .gtm-html-tooltip como gtmTooltipElement.wrapper
  │
  └─ setTimeout(1000ms) → fnGtmTooltipToOpenTooltip()
      └─ Añade is-visible al tooltip → slide-up + fade-in