Instalar con una etiqueta script

La etiqueta script funciona en cualquier sitio donde puedas añadir HTML. Cópiala desde Instalación en tu proyecto y añádela a todas las páginas de tu web. Viene ya con tu clave de navegador y una versión fija.

Pega el fragmento

La versión y la clave del ejemplo son marcadores; en Instalación tienes los valores reales.

<script src="https://cdn.tracelog.io/v/2.1.0/tracelog.js"></script>
<script>
  TraceLog.init({ key: "tl_pk_xxxxxxxxxxxxxxxxxxxxxxxxxx", endpoint: "https://api.tracelog.io/v1/events" });
  // Captura solo con consentimiento: llama a TraceLog.consent.grant() cuando se haya concedido.
</script>

La versión queda fijada, así que tú decides cuándo actualizarla.

Concede el consentimiento

Mientras no haya una decisión de consentimiento, el código de captura no crea identificadores, no guarda nada en el navegador y no envía solicitudes. Una negativa se recuerda en una sola clave y nada más; la aceptación no se recuerda. La captura empieza al llamar a grant:

TraceLog.consent.grant();

Llámalo cuando el visitante acepte y otra vez en cada carga de página mientras su consentimiento siga vigente: conéctalo a la función que tu plataforma de consentimiento ejecuta siempre que hay consentimiento, no solo al clic en «aceptar». Si la normativa aplicable permite la captura propia sin aviso, llámalo en cada carga. En ningún caso TraceLog instala cookies de seguimiento ni cookies de ningún otro tipo; el identificador de sesión vive en el almacenamiento local del navegador.

Envía el recorrido declarado

El plan indica la conversión, el identificador estable que debe acompañarla y los pasos anteriores esperados. Envía cada paso cuando ocurra y la conversión al completarse:

TraceLog.step("begin_checkout");

TraceLog.conversion("purchase", {
  identifier: order.number,
  value: order.total,
  currency: "EUR",
});

Usa el identificador que ya tiene tu sistema: un número de pedido, de lead o de reserva. Con él, TraceLog cuenta cada conversión una sola vez. Si falta, la verificación se bloquea.

Con Google Tag Manager

Si tu web carga sus etiquetas con Google Tag Manager, TraceLog puede ir en el contenedor en lugar de en tus páginas: de una forma o de la otra, nunca de las dos. Todas las etiquetas de aquí son de tipo HTML personalizado.

La etiqueta de TraceLog lo carga una vez por página y avisa a Tag Manager de cuándo está listo. Instalación te da esta etiqueta con tu clave de navegador ya puesta; la clave de abajo es un marcador. Actívala con Inicialización: todas las páginas:

<script>
  (function () {
    var gtm = window.google_tag_manager[{{Container ID}}];
    var ready = function () {
      gtm.onHtmlSuccess({{HTML ID}});
    };
    if (window.TraceLog) return ready();
    var script = document.querySelector("script[data-tracelog]");
    if (!script) {
      script = document.createElement("script");
      script.src = "https://cdn.tracelog.io/v/2.1.0/tracelog.js";
      script.setAttribute("data-tracelog", "");
      script.addEventListener("load", function () {
        TraceLog.init({
          key: "tl_pk_xxxxxxxxxxxxxxxxxxxxxxxxxx",
          endpoint: "https://api.tracelog.io/v1/events",
        });
      });
      document.head.appendChild(script);
    }
    script.addEventListener("load", ready);
  })();
</script>

Concede el consentimiento desde una etiqueta que se active en cada página en la que el visitante haya dado su consentimiento —con el activador que ofrece tu plataforma de consentimiento para eso, no con uno que solo salte al hacer clic—, o con Inicialización: todas las páginas si no hace falta banner. Si tu banner no ofrece ese activador ni envía ningún evento a la capa de datos, haz que el código que ejecuta al recibir el consentimiento envíe uno —al aceptar y en cada carga de página mientras el consentimiento siga vigente— y activa la etiqueta con ese evento. La configuración de consentimiento de Tag Manager no sirve de activador: una etiqueta que retiene no se activa después en esa página.

<script>
  TraceLog.consent.grant();
</script>

Después, añade una etiqueta por cada llamada del código de tu plan en Instalación, con un activador de Evento personalizado sobre el evento que tu web envía a la capa de datos en ese momento: el mismo con el que ya se activa tu etiqueta de analítica. Los nombres de tu plan son tuyos y no tienen que coincidir con los de la capa de datos.

<script>
  TraceLog.step("add_to_cart");
</script>

En la etiqueta del consentimiento y en cada una de estas, abre Configuración avanzada, luego Secuenciación de etiquetas, y elige la etiqueta de TraceLog en Active una etiqueta antes de que se active esta etiqueta. Así ninguna llamada se ejecuta antes de que TraceLog esté cargado.

La conversión toma su identificador, su valor y su moneda de tres variables de tipo Capa de datos: las que ya lee tu etiqueta de compra. En una capa de datos con el formato de Google Analytics 4 —cuyos eventos de comercio electrónico, view_item, add_to_cart, begin_checkout y purchase, son los nombres de la plantilla de compra— son ecommerce.transaction_id, ecommerce.value y ecommerce.currency, llamadas aquí Order number, Order value y Order currency. El identificador va como texto, y String se asegura de ello:

<script>
  TraceLog.conversion("purchase", {
    identifier: String({{Order number}}),
    value: {{Order value}},
    currency: {{Order currency}},
  });
</script>

Verifica la instalación

Con Google Tag Manager, publica antes el contenedor: una etiqueta de un espacio de trabajo sin publicar no llega a ningún visitante.

Abre Instalación en el proyecto y empieza la prueba desde Abrir mi sitio. La pestaña que abre ese botón es la que TraceLog marca como tráfico de verificación. Acepta primero el banner de consentimiento en ella: desde ese momento, la pestaña sigue siendo una prueba al pasar de una página a otra y al volver de un pago hecho fuera de tu web. Una conversión que completes en cualquier otra pestaña cuenta como real y entra en tus cifras.

Recorre el camino hasta la conversión en esa pestaña y deja Instalación abierta al lado. La lista avanza a medida que TraceLog recibe cada evento declarado. El tráfico de verificación queda marcado, no cuenta para ningún límite y sigue visible después en el estado de los datos.

Si cierras esa pestaña, vuelve a abrir tu sitio desde Abrir mi sitio y repite el recorrido.

Si la lista no avanza

Si no llega ningún evento, las tres primeras filas se ven igual. En la pestaña que abre Abrir mi sitio, el código de captura informa de si está cargado, de su estado de consentimiento y de si su configuración es válida. Así Instalación puede distinguir cada caso.