Antlytics logoAntlytics

Add Antlytics to Spring Boot

This guide covers Spring Boot applications using Thymeleaf templates.

Prerequisites

  • An Antlytics account (sign up free)
  • Your tracking ID from Settings → Tracking Snippet in your Antlytics dashboard

Install the snippet

Open your layout template — typically src/main/resources/templates/layout.html (or fragments/layout.html if you use Thymeleaf layout dialect) — and paste the snippet inside <head>:

<!-- src/main/resources/templates/layout.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:fragment="layout(content)">
<head>
  <meta charset="UTF-8" />
  <title th:text="${pageTitle}">My App</title>

  <script th:inline="none">
(function(){
  var t="YOUR-SITE-ID",
      u="https://www.antlytics.com/api/ingest/pageview",
      k="ant_sid";
  function sid(){
    try{var s=sessionStorage.getItem(k);if(s)return s;
      s=crypto.randomUUID();sessionStorage.setItem(k,s);return s;}
    catch(e){return crypto.randomUUID();}
  }
  function utm(){
    try{var p=new URLSearchParams(location.search),o={};
      ["utm_source","utm_medium","utm_campaign","utm_term","utm_content"]
        .forEach(function(k){var v=p.get(k);if(v)o[k]=v;});
      return o;}
    catch(e){return {};}
  }
  function send(){
    fetch(u,{method:"POST",headers:{"Content-Type":"application/json"},
      keepalive:true,
      body:JSON.stringify(Object.assign(
        {tracking_id:t,pathname:location.pathname,
         referrer:document.referrer||undefined,session_id:sid()},
        utm()))});
  }
  send();
  window.addEventListener("popstate",send);
})();
  </script>
</head>
<body>
  <div th:replace="${content}"><!-- page content --></div>
</body>
</html>

Note: Replace YOUR-SITE-ID with the tracking ID from your Antlytics dashboard.

th:inline="none" tells Thymeleaf not to process the JavaScript inside the <script> tag. This prevents Thymeleaf from misinterpreting the JavaScript syntax.

If you do not use a shared layout template, add the snippet to each page template's <head> section, or create a shared fragment:

<!-- src/main/resources/templates/fragments/analytics.html -->
<script th:fragment="analytics" th:inline="none">
(function(){
  var t="YOUR-SITE-ID",
      u="https://www.antlytics.com/api/ingest/pageview",
      k="ant_sid";
  function sid(){
    try{var s=sessionStorage.getItem(k);if(s)return s;
      s=crypto.randomUUID();sessionStorage.setItem(k,s);return s;}
    catch(e){return crypto.randomUUID();}
  }
  function utm(){
    try{var p=new URLSearchParams(location.search),o={};
      ["utm_source","utm_medium","utm_campaign","utm_term","utm_content"]
        .forEach(function(k){var v=p.get(k);if(v)o[k]=v;});
      return o;}
    catch(e){return {};}
  }
  function send(){
    fetch(u,{method:"POST",headers:{"Content-Type":"application/json"},
      keepalive:true,
      body:JSON.stringify(Object.assign(
        {tracking_id:t,pathname:location.pathname,
         referrer:document.referrer||undefined,session_id:sid()},
        utm()))});
  }
  send();
  window.addEventListener("popstate",send);
})();
</script>

Then include it in your layouts: <th:block th:replace="fragments/analytics :: analytics" />.

Verify installation

  1. Visit your site in a browser.
  2. Open your Antlytics dashboard → Overview.
  3. Your visit should appear within a few seconds.

If data does not appear after a few minutes, check the troubleshooting guide.

Optional: First-party proxy

To avoid ad blockers, set up a first-party proxy on your own domain.

Need help?

Email support@antlytics.com with your site ID and page URL.

Something missing? Get in touch and we will update these docs.