Cómo agregar un popup con clave de acceso en tu tienda usando Google Tag Manager

Si querés que tu tienda funcione como un catálogo de acceso restringido, podés agregar un popup con clave de acceso usando Google Tag Manager.

Cuando un cliente ingresa:

• Se desenfoca el fondo de la tienda
• Aparece un popup solicitando una clave
• Solo ingresando la contraseña puede navegar el catálogo

Ideal para:

• Catálogos mayoristas
• Preventas privadas
• Lanzamientos exclusivos
• Catálogos solo para clientes seleccionados

Importante

Este recurso funciona como un popup visual, no como un sistema de usuarios ni una seguridad absoluta.

Importante aclarar:

• No es login por usuario.
• No protege el catálogo de forma total.
• La clave puede compartirse.
• No evita difusión del contenido por terceros.

Sirve como una capa práctica de acceso “privado”, no como restricción fuerte.

Clave predeterminada

El ejemplo usa esta contraseña: 12345678

Podés cambiarla por la que quieras.

Paso 1: Crear tu cuenta en Google Tag Manager

1. Ingresá a Google Tag Manager
2. Creá una cuenta
3. Configurá:

• Nombre de cuenta
• País
• Nombre del contenedor
• Plataforma: Web

1. Copiá tu código:

GTM-XXXXXXX

Paso 2: Vincular GTM en Pedix

Ir a:

Panel de control → Google Analytics y Facebook Pixel

Pegá tu código GTM y guardá cambios.

Paso 3: Crear una nueva etiqueta

En GTM:

Etiquetas → Nueva

Nombre sugerido:

Popup catálogo privado

Tipo:

HTML personalizado

Pegá este script:

<script>
(function() {
  var ACCESS_PASSWORD = '12345678';
  var SESSION_KEY = 'pedix_private_catalog_access';

  if (sessionStorage.getItem(SESSION_KEY) === 'true') {
    return;
  }

  document.documentElement.style.overflow = 'hidden';
  document.body.style.overflow = 'hidden';

  var overlay = document.createElement('div');
  overlay.id = 'pedix-private-access-overlay';

  overlay.style.position = 'fixed';
  overlay.style.top = '0';
  overlay.style.left = '0';
  overlay.style.width = '100%';
  overlay.style.height = '100%';
  overlay.style.zIndex = '999999';
  overlay.style.background = 'rgba(0,0,0,0.38)';
  overlay.style.display = 'flex';
  overlay.style.alignItems = 'center';
  overlay.style.justifyContent = 'center';
  overlay.style.padding = '20px';

  if ('backdropFilter' in overlay.style) {
    overlay.style.backdropFilter='blur(8px)';
  }

  if ('webkitBackdropFilter' in overlay.style) {
    overlay.style.webkitBackdropFilter='blur(8px)';
  }

  var box=document.createElement('div');
  box.style.maxWidth='420px';
  box.style.width='100%';
  box.style.background='#fff';
  box.style.borderRadius='18px';
  box.style.padding='32px';
  box.style.boxShadow='0 18px 60px rgba(0,0,0,.25)';
  box.style.fontFamily='Arial,sans-serif';
  box.style.textAlign='center';

  var title=document.createElement('h2');
  title.innerHTML='Catálogo privado';
  title.style.color='#26284D';

  var text=document.createElement('p');
  text.innerHTML='Ingresá la clave para acceder a esta tienda.';
  text.style.color='#555';

  var input=document.createElement('input');
  input.type='password';
  input.placeholder='Clave de acceso';
  input.style.width='100%';
  input.style.padding='14px';
  input.style.border='1px solid #ddd';
  input.style.borderRadius='12px';

  var error=document.createElement('div');
  error.innerHTML='Clave incorrecta';
  error.style.display='none';
  error.style.color='#d93025';
  error.style.marginTop='12px';

  var button=document.createElement('button');
  button.innerHTML='Ingresar';
  button.style.marginTop='18px';
  button.style.width='100%';
  button.style.padding='14px';
  button.style.background='#26284D';
  button.style.color='#fff';
  button.style.border='0';
  button.style.borderRadius='12px';
  button.style.cursor='pointer';

  box.appendChild(title);
  box.appendChild(text);
  box.appendChild(input);
  box.appendChild(error);
  box.appendChild(button);

  overlay.appendChild(box);
  document.body.appendChild(overlay);

  function unlockCatalog(){
    sessionStorage.setItem(
      SESSION_KEY,
      'true'
    );

    document.documentElement.style.overflow='';
    document.body.style.overflow='';

    overlay.parentNode.removeChild(
      overlay
    );
  }

  function validatePassword(){

    var value=input.value.replace(
      /^\s+|\s+$/g,''
    );

    if(value===ACCESS_PASSWORD){
      unlockCatalog();
    } else {
      error.style.display='block';
      input.focus();
    }

  }

  button.onclick=validatePassword;

  input.onkeydown=function(e){
    e=e||window.event;

    if(e.keyCode===13){
      validatePassword();
    }
  };

})();
</script>

Cambiar la contraseña

Buscá esta línea:

var ACCESS_PASSWORD='12345678';

Y reemplazala por tu propia clave.

Paso 4: Activador

Configurá:

Activadores → Todas las páginas

Así el popup aparece en toda la tienda.

Paso 5: Publicar

Hacé clic en:

Enviar → Publicar

Y probalo en incógnito.

¿Qué verá el cliente?

Cuando ingrese:

1. La tienda aparecerá desenfocada
2. Se mostrará el popup
3. Deberá ingresar la clave
4. Si es correcta, accede al catálogo

Recomendaciones

Usalo para:

• clientes mayoristas
• acceso por invitación
• preventas
• catálogos privados

¿Necesitás ayuda?

Si querés adaptar el popup o sumar otras personalizaciones vía Google Tag Manager, escribinos por soporte y te ayudamos.