Install with a script tag

The script tag works on any site you can add HTML to. Copy it from Installation in your project and add it to every page of your site. It comes filled in with your browser key and a fixed version.

Paste the snippet

The version and key below are placeholders; Installation gives you the real ones.

<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" });
  // Keep capture behind consent; call TraceLog.consent.grant() only after consent is granted.
</script>

The version is fixed, so you choose when to update it.

Grant consent

Before a consent decision the capture code creates no identifier, writes nothing to storage and sends no request. A denial is remembered in one key and nothing else; a grant is not remembered. Nothing is captured until you call grant:

TraceLog.consent.grant();

Call it when the visitor accepts, and again on every page load while their consent stands: wire it to the callback your consent platform runs whenever consent is present, not only to the click on accept. If your market lets you run first-party measurement without a banner, call it on every load. TraceLog itself sets no tracking cookie either way, and no cookie of any kind: the session identifier lives in the browser's own local storage.

Send the declared path

Your tracking plan names the conversion, the stable identifier that must accompany it, and the steps expected before it. Send each step where it happens, and the conversion where it completes:

TraceLog.step("begin_checkout");

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

Use the identifier your own system already has: an order number, a lead id, a booking reference. It lets TraceLog count each conversion once. A conversion that arrives without it blocks verification.

With Google Tag Manager

If Google Tag Manager loads the tags on your site, TraceLog can go in its container instead of in your pages: one way or the other, never both. Every tag here is a Custom HTML tag.

The TraceLog tag loads TraceLog once per page and tells Tag Manager when it is ready. Installation gives you this tag with your browser key filled in; the key below is a placeholder. Fire it on Initialization - All Pages:

<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>

Grant consent from a tag fired on every page where the visitor has consented — the trigger your consent platform provides for that, not one that fires only on the click — or on Initialization - All Pages where no banner is needed. Where your banner offers no such trigger and pushes no event to the data layer, have the code it runs on consent push one — on the accept and on every later page load while the consent stands — and fire the tag on that event. Tag Manager's own consent settings do not stand in for the trigger: a tag they hold back is not fired later on that page.

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

Then add one tag for each call in the code of your plan on Installation, fired by a Custom Event trigger on the event your site pushes to the data layer at that moment — the one your analytics tag for that moment already fires on. The names in your plan are your own: they need not match the data layer's.

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

In the consent tag and in each of these, open Advanced Settings, then Tag Sequencing, and choose the TraceLog tag under Fire a setup tag before this tag fires. No call then runs before TraceLog has loaded.

The conversion takes its identifier, value and currency from three Data Layer Variables: the ones your purchase tag already reads. On a data layer shaped for Google Analytics 4 — whose ecommerce events, view_item, add_to_cart, begin_checkout and purchase, are the purchase template's names — they are ecommerce.transaction_id, ecommerce.value and ecommerce.currency, named here Order number, Order value and Order currency. The identifier goes in as text, which String makes sure of:

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

Verify it

With Google Tag Manager, publish the container first: a tag in an unpublished workspace reaches no visitor.

Open Installation in the project and start the test from Open my site. The tab that button opens is the one TraceLog marks as verification traffic. Accept your consent banner in it first: from then on the tab stays a test across your pages and through a payment that leaves your site and comes back. A conversion you complete in any other tab counts as real and reaches your figures.

Walk the path through to the conversion in that tab, and leave Installation open beside it. The checklist ticks as TraceLog receives each declared event. Verification traffic is marked, counts towards no limit, and stays visible in data health afterwards.

If you close that tab, open your site from Open my site again and walk the path once more.

If it does not tick

With no events arriving, the first three rows look the same. In the tab opened from Open my site, the capture code reports whether it is loaded, its consent state and whether its configuration is valid. That lets Installation tell the rows apart.