Consentl en BigCommerce

Instale Consentl en BigCommerce con Script Manager o en el tema Stencil para un bloqueo previo estricto, con un proceso de pago conforme con PCI y en Catalyst.

Cargador el primero en el <head>

Depende del método

Hay dos formas de instalarlo, según lo estricto que deba ser el bloqueo previo.

Antes de cualquiera de los dos métodos, decida qué hacer con el consentimiento de cookies propio de BigCommerce: Settings → Security & Privacy → Your customers' privacy → Cookie consent tracking.

• Recomendado: desactívelo. Consentl muestra el banner y retiene por sí mismo los scripts no esenciales; mantener ambos mostraría dos banners.
• Si lo mantiene activado, BigCommerce solo genera los scripts de Script Manager de las categorías Analytics, Functional o Targeting; Advertising tras su propio consentimiento, y habría que mantener sincronizados los dos banners, algo que esta guía no cubre. En ese caso, el propio Consentl debe tener la categoría Essential; de lo contrario, nunca se cargaría.

Su clave del sitio de Consentl está en la página Configuración inicial de su sitio en el panel de control. Añada el nombre de host de la tienda en el campo Dominios; www. y el dominio sin www cuentan como el mismo sitio, así que no hace falta añadir www. por separado.

Qué cubre su plan de Consentl

• Free: solo banner, registro de consentimientos y bloqueo manual.
• Pro: añade Google Consent Mode v2.
• Business: añade el bloqueo automático de rastreadores conocidos y las reglas de bloqueo que añada en el panel de control.

En Free y Pro, solo se retienen las etiquetas que marque manualmente.

A. Script Manager (tiendas Stencil)

1. Panel de control de BigCommerce → Storefront → Script Manager → Create a Script.
2. Rellene:
   • Name of script: Consentl
   • Location on page: Header
   • Select pages where script will be added: Store pages (páginas de la tienda). No All pages; consulte Proceso de pago y My Account.
   • Script category: Essential
   • Script type: URL
   • Load method: Default. Nunca Async ni Defer: el cargador debe ejecutarse de forma síncrona.
   • Script URL: https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=en (añada &gcm=ext si la tienda también utiliza la plantilla de Consentl para GTM, para que solo la plantilla envíe comandos de Consent Mode)
   • Integrity Hash: déjelo vacío. El cargador cambia cuando usted cambia la configuración en el panel de control de Consentl, por lo que un hash fijo haría que el navegador lo rechazara.
3. Save. Los cambios pueden tardar unos 20 segundos en aparecer debido a la caché.
4. Pruebe en una ventana privada (consulte Comprobar que funciona).

Script Manager limita el contenido de los scripts a 64 KB. El cargador es un script de URL de una sola línea.

Proceso de pago y My Account

• BigCommerce exige un hash SRI para cada script de la página del proceso de pago: «All scripts on the checkout page need at least one SRI hash to meet PCI 4.0 - 6.4.3 requirements» (todos los scripts de la página de pago necesitan al menos un hash SRI para cumplir los requisitos de PCI 4.0 - 6.4.3). La ayuda de BigCommerce extiende esto a la página My Account cuando las tarjetas guardadas están activadas.
• El cargador de Consentl no puede llevar un hash estable, por lo que no debe colocarse allí. Por eso Store pages es la opción predeterminada indicada arriba, y por eso el método B debe mantener el cargador fuera del proceso de pago.
• En consecuencia, el proceso de pago (y My Account cuando las tarjetas guardadas están activadas) no muestra ningún banner y allí no se ejecuta ningún runtime de Consentl.
• La elección que el visitante hizo en la tienda se conserva en la cookie propia consentl y se vuelve a aplicar en la siguiente página de la tienda. Consentl no retiene nada en el propio proceso de pago: mantenga los scripts no esenciales fuera del proceso de pago (seleccione también Store pages para ellos) y compruebe qué cargan allí las integraciones de Settings → Data Solutions.
• Los scripts solo se generan en el proceso de pago y en la confirmación del pedido con Optimized One-Page Checkout.

B. Archivo del tema (realmente el primero)

1. Storefront → Themes: en su tema actual, elija Advanced → Make a copy. BigCommerce solo permite editar los archivos del tema en una copia. Después, abra Advanced → Edit Theme Files de la copia, o utilice la Stencil CLI.

2. Abra templates/layout/base.html y pegue el cargador justo después de <head>, antes de {{{head.scripts}}} y del CSS del tema:

   <head>
       <script src="https://api.consentl.com/v1/loader.js?k=SITE_KEY&l={{language_selector.active_language_code}}"></script>
       <title>{{ head.title }}</title>

   • {{language_selector.active_language_code}} es el helper de idioma documentado. Cornerstone también tiene {{locale_name}}, que funciona allí pero no figura en la referencia de objetos. Utilice un idioma fijo como en si ninguno de los dos devuelve el formato que necesita.
   • Si Enable Nonce-Based Script Security está activado (Settings → Security & Privacy), añada nonce="{{nonce}}" a la etiqueta. Los scripts que Consentl libera después del consentimiento también necesitan entonces el nonce (asígnelo a cada etiqueta que marque manualmente) o una política con 'strict-dynamic'; de lo contrario, el navegador los bloquea.

3. Guarde y aplique la copia. No añada además Consentl mediante Script Manager.

4. Las actualizaciones del tema sustituyen base.html: vuelva a añadir la línea después de cada actualización.

No añada el cargador a las plantillas del proceso de pago (consulte Proceso de pago y My Account). Después de aplicar el tema, abra la página del proceso de pago y compruebe con «Ver código fuente» que el cargador no está allí.

Etiquetas escritas directamente

Un <script src>, un píxel <img> o un <iframe> escrito en los archivos del tema o en un script de Script Manager lo obtiene el navegador antes de que ningún script pueda detenerlo, aunque Consentl impida que se ejecute. Marque manualmente esas etiquetas y elimine los píxeles en <noscript>:

<script type="text/plain" data-consentl="marketing" src="https://ads.example.com/tag.js"></script>
<iframe data-consentl="marketing" data-src="https://www.youtube-nocookie.com/embed/ID" title="Video"></iframe>
<img data-consentl="marketing" data-src="https://tracker.example.com/pixel.gif" alt="" width="1" height="1">

Las etiquetas cargadas por código (GTM, el cargador JavaScript de un píxel) se retienen sin solicitud cuando el bloqueo automático está activado (plan Business y superiores).

Enlace para volver a abrir y bloques insertables

• Los enlaces cuya URL termina en #consentl o #consentl-preferences, y cualquier elemento con el atributo data-consentl-open, abren las preferencias. Añada uno al pie de página («Configuración de cookies»).
• Los bloques insertables de declaración de cookies, solicitudes sobre datos personales y desistimiento de la UE funcionan como se describe en la guía para sitios web. El formulario de desistimiento requiere el plan Pro o superior y debe activarse en el panel de control; de lo contrario, queda vacío.

Content Security Policy

Si ha añadido restricciones de script-src (Settings → Security & Privacy → Content Security Policy), permita https://api.consentl.com en script-src y connect-src.

Catalyst (tienda headless con Next.js)

Catalyst inyecta los scripts de Script Manager en el lado del cliente y de forma diferida, por lo que nunca son los primeros. Siga la guía de Next.js para el App Router, incluidas sus indicaciones sobre «el primero en el <head>»:

• core/app/[locale]/layout.tsx no tiene un <head> explícito. Añada uno y coloque Consentl en él como indica la guía de Next.js: un <script> simple como primer hijo.
• app/not-found.tsx genera su propio <html>; añada Consentl también allí.
• React 19 sube los scripts async por encima de un script síncrono simple, y next/script con afterInteractive hace que el navegador descargue la etiqueta antes del consentimiento. Añada todas las demás etiquetas que deben esperar el consentimiento con el componente ConsentlScript de la guía (type="text/plain" con su categoría de Consentl), o gestiónelas en Google Tag Manager.

Desactive el seguimiento del consentimiento de cookies de BigCommerce. Catalyst 1.3 y posteriores incluyen su propio banner de consentimiento (c15t): elimínelo o desactívelo para evitar dos banners.

Comprobar que funciona

Abra la tienda en una ventana privada y vea el código fuente: con el método B, el cargador es el primer elemento del <head>. Aparece el banner. El servidor de desarrollo de la Stencil CLI no genera los scripts de Script Manager, pero sí el código del tema.

La región del visitante se obtiene de su dirección IP: Consentl consulta el país en memoria en cada vista de página (no se almacena nada) y aplica la regla que haya definido para él en el panel de control. No se distingue entre estados de EE. UU.: los visitantes de EE. UU. reciben su regla para todo EE. UU. o, si no la hay, su primera regla de un estado de EE. UU. Un país desconocido recibe su regla para las regiones desconocidas (opt-in de forma predeterminada).

Limitaciones

• Script Manager no es el primero. Los propios scripts del head del tema y los scripts de Script Manager que BigCommerce imprime antes de Consentl se ejecutan primero; su orden dentro de {{{head.scripts}}} no está documentado. Utilice el método B para un bloqueo previo estricto. Consentl retiene los rastreadores reconocidos que se cargan después de él (plan Business y superiores); en Free y Pro, solo se retienen las etiquetas que marque manualmente.
• Sin banner en el proceso de pago (ni en My Account con tarjetas guardadas); consulte Proceso de pago y My Account.
• Consentl no controla las analíticas nativas de BigCommerce (por ejemplo, las integraciones nativas de GA4 o Meta en Settings → Data Solutions). Configúrelas para que sigan Consent Mode, o sustitúyalas por etiquetas cargadas mediante GTM.

Guías relacionadas

• Cualquier sitio web (fragmento)
• Google Tag Manager
• Next.js

¿Se ha atascado? Escriba a support@consentl.com: respondemos en inglés en días laborables.