Login
E-MailE-Mail
Phone
0800-8976326 (inside Germany) or +49 711-94969-60

Añadir Google Tag Manager y otros proveedores de terceros al gestor de consentimiento de cookies de Klaro.

En nuestra plantilla para TYPO3, hemos proporcionado el script de código abierto "Klaro" como Cookie Consent Manager (CCM) desde la versión 10. Ya hemos preconfigurado esto para herramientas comunes como Matomo, Google Analytics, Facebook Pixel, X y Youtube / Vimeo y desde nuestra plantilla versión 13.2.0 también para el Google Tag Manager. Sin embargo, si se requieren otros proveedores de terceros, estos se pueden agregar con relativa facilidad.

En esta guía, integramos un código de ejemplo del Google Tag Manager en nuestra plantilla para TYPO3, ya que tiene una posición especial entre las herramientas de seguimiento. Sin embargo, el principio es básicamente el mismo para cualquier otro servicio.

¿Qué es Google Tag Manager?

El Google Tag Manager (GTM) es una herramienta gratuita de Google que se puede utilizar para gestionar de forma centralizada varios códigos de seguimiento (las llamadas etiquetas) en un sitio web - sin tener que tocar el código fuente directamente (al menos después de la configuración inicial). Esto significa que ya no tiene que integrar Google Analytics, Google Ads o Facebook Pixel como código directamente en su sitio web, por ejemplo, sino que puede gestionarlos en su cuenta GTM. Esto tiene sentido si utilizas varios servicios o quieres personalizar tu selección con más frecuencia.

La integración de proveedores de terceros en nuestra plantilla para TYPO3 funciona en dos pasos:

  1. Incluir fragmento de código en el sitio web (dependiendo de los requisitos en la etiqueta <head> y/o <body>).
  2. Añadir consulta en el CCM de Klaro

1. incrustar un fragmento de código en el sitio web

Para integrar el GTM en un sitio web, deben colocarse dos fragmentos de código en el código fuente según las instrucciones: uno en el <head> del sitio web y otro dentro de la etiqueta <body>. El fragmento de código en la etiqueta <body> (un bloque <noscript> con un <iframe> dentro) es un fallback para el fragmento en el <head>, que carga el contenedor incluso si el navegador no soporta JavaScript o si JavaScript está bloqueado. Sin embargo, como utilizamos Klaro, un gestor de consentimiento de cookies que sólo funciona con JavaScript, el bloque <noscript> debe omitirse en este caso. Sin JavaScript, el MCP no se cargaría y el usuario no tendría la posibilidad de rechazar el seguimiento. Sin embargo, Google Tag Manager también es totalmente funcional sin este fragmento siempre que JavaScript esté disponible.

Por lo tanto, en TypoScript, por ejemplo en el archivo

Configuración/TypoScript/General/Setup/001_page.typoscript

como objeto page.headerData, inserte únicamente el fragmento de código destinado al <head>:

page.headerData.1588597225 = TEXTO
page.headerData.1588597225.value (
<script type="text/plain" data-type="application/javascript" data-name="googleTagManager">
[...]
</script>
)

Tenga en cuenta lo siguiente:

  • Asigne al objeto "page.headerData" un número de libre elección que aún no se haya asignado en el sitio web. Cuanto mayor sea el número, más tarde se cargará el script. Si tiene varios scripts, asegúrese de que se cargan en el orden correcto.
  • El valor del atributo type en la etiqueta <script> debe sustituirse por text/plain (esto impide que el navegador ejecute el script) el tipo original debe añadirse como data-type="...", por ejemplo data-type="application/javascript".
  • También debe añadirse un atributo data-name a la etiqueta <script>, que corresponde al nombre de la aplicación dada en la configuración (véase más abajo), en nuestro ejemplo data-name="googleTagManager".

Para una mejor visión de conjunto

En nuestra plantilla para TYPO3, los fragmentos de código para los proveedores de terceros ya preconfigurados se encuentran en el directorio:

Configuration/TypoScript/AddOns/KlaroConsentManager

Para mayor claridad, también puede crear un nuevo subdirectorio "GoogleTagManager/Setup" análogo a los ya existentes, crear el archivo "gtm.typoscript" e insertar allí el código TypoScript "page.headerData...".

Es posible que el archivo TypoScript recién creado no se integre automáticamente en el sitio web. La integración se realiza mediante una importación:

@import"EXT:jwsitepackage/Configuration/TypoScript/AddOns/
KlaroConsentManager/GoogleTagManager/Setup/gtm.typoscript"
(Plantilla versión 13)

por ejemplo en el archivo:

Configuration/Sets/Jwsitepackage/setup.typoscript
(Plantilla Versión 13)

Puede comprobar si el nuevo TypoScript está integrado en el backend de TYPO3 en el "Navegador de objetos TypoScript" o en "TypoScript activo", o en el código fuente de su sitio web.

2. añadir consulta en Klaro Consent Manager

Ahora hay que añadir la opción de Google Tag Manager en el CCM de Klaro.

Para ello, vamos al directorio

/Parciales/KlaroModules

donde ya se encuentran los módulos de Klaro de los proveedores de terceros preconfigurados.

Creamos el fichero "GoogleTagManager.html" e insertamos el siguiente código de configuración (fuente: https://klaro.org/de/doku/anleitungen/google_tag_manager):

klaroConfig.services.push(
    {
        nombre: 'googleTagManager',
        requerido: false,
        propósitos: ['marketing'],
        onAccept: `
for(let k of Object.keys(opts.consents)){
if (opts.consents[k]){
let eventName = 'klaro-'+k+'-aceptado'
dataLayer.push({'evento': eventName})
}
}
`,
        onInit: `
window.dataLayer = window.dataLayer || [];
window.gtag = function(){dataLayer.push(arguments)}
gtag('consent', 'default', {'ad_storage': 'denied', 'analytics_storage': 'denied', 'ad_user_data': 'denied', 'ad_personalisation': 'denied'})
gtag('set', 'ads_data_redaction', true)
`,
    },
);

Aquí es importante que el nombre : 'googleTagManager' coincida con el nombre de los datos en el fragmento de código en el <head>. Sólo entonces se puede activar y desactivar el código más tarde a través del Gestor de Consentimiento de Klaro.

Los controladores de eventos "onAccept" y "onInit" sirven para que el Google Tag Manager sea informado del consentimiento del usuario y pueda cargar las etiquetas integradas correspondientes.

Ahora tenemos que añadir este nuevo parcial al archivo

/Parciales/Klaro.html

en la parte inferior, donde ya están integrados los parciales del resto de proveedores terceros.

<f:render partial="KlaroModules/GoogleTagManager"/>

Podemos omitir la condición "<f:if condition="{configuración...", ya que sólo está ahí para que tú como administrador puedas activar y desactivar el módulo a través del editor de constantes o a través del editor de configuración del sitio en el backend. La variable consultada en la condición también tendría que ser creada primero.

Integrar los servicios gestionados en Klaro a través de GTM

Google Tag Manager ya está configurado en su sitio web. Ahora puede gestionar los servicios que desee con el GTM a través de su cuenta GTM. Sin embargo, para que aparezcan en el Gestor de consentimientos de Klaro, deben añadirse en la configuración.

Para Google Analytics, por ejemplo, esto ya se ha hecho en nuestra plantilla para TYPO3. Puede encontrar la configuración en el archivo

Parciales/KlaroModules/GoogleAnalytics.html

Amplíalo de la siguiente manera (fuente: https://klaro.org/de/doku/anleitungen/google_tag_manager):

var gaPath = "{configuración.gaPath}";
var gaDomain = "{configuración.gaDomain}";
klaroConfig.services.push(
    {
        nombre : 'googleAnalytics',
        cookies: [
            /^_g(a|id|at_.*|ac_.*)$/, gaPath, gaDomain
        ],
        fines: ['marketing'],
        onAccept: `
		gtag('consentimiento', 'actualizar', {
		'analytics_storage': 'granted',
		})
		`,
        onDecline: `
		gtag('consent', 'update', {
		'analytics_storage': 'denegado',
		})
		`,
    },
);

En Google Tag Manager, ahora se debe crear un activador de eventos personalizado de la forma klaro-[nombre-del-servicio]-accepted para Google Analytics, donde [nombre-del-servicio] es el nombre del servicio en la configuración de Klaro. En nuestro ejemplo

klaro-googleAnalytics-accepted

Añadiendo "klaro-[service-name]-accepted", es decir, siempre el "nombre" en la configuración de Klaro precedido de "klaro-" y seguido de "-accepted", se informa a Google Tag Manager de si este servicio ha sido aceptado o no.

Si añade un servicio a través de Google Tag Manager que ya está preconfigurado en nuestra plantilla para TYPO3, debe eliminar el fragmento de código asociado de la plantilla o asegurarse de que no sale (en nuestro ejemplo, el código de Google Analytics. Éste se encuentra en el archivo Configuration/TypoScript/AddOns/KlaroConsentManager/GoogleAnalytics/Setup/ga.typoscript. Puede, por ejemplo, comentar este código o dejar vacío el campo para el ID de seguimiento de Google Analytics en el editor de constantes o en el editor de configuración del sitio).

Pruebas

Ya ha integrado Google Tag Manager en su sitio web, ha añadido la opción de aceptarlo o rechazarlo en el banner de Klaro y ha añadido un primer servicio, a saber, Google Analytics. Todavía tiene que probar si todo funciona. Para ello, Google ofrece el Asistente de etiquetas.

Puedes probar la configuración de las cookies en un sitio web en general accediendo a las herramientas para webmasters de tu navegador y cambiando a la pestaña "Aplicación" (en Chrome). A continuación, verá el elemento "Cookies" en la columna de la izquierda, en "Almacenamiento". Si hace clic en la URL, podrá ver en la tabla de la derecha si se han establecido cookies y, en caso afirmativo, cuáles.

Otros enlaces

El contenido de esta página se ha traducido automáticamente.

Aktualisiert: 27.06.2025