Home / Log

Pirsch Analytics in Astro JS

How I use Pirsch Analytics in Astro JS with <ViewTransitions /> enabled.

<script>
  document.addEventListener("astro:page-load", function () {
  // Ensure any previously loaded analytics script is removed
  const existingScript = document.getElementById("pirschextendedjs");
  if (existingScript) {
    existingScript.remove();
  }

  // Create a new script element for Pirsch Analytics
  const script = document.createElement("script");
  script.defer = true;
  script.src = "https://api.pirsch.io/pirsch-extended.js";
  script.id = "pirschextendedjs";
  // Your Pirsch 'data-code' here
  script.setAttribute("data-code", "y0urRaNd0m1d");

  // Append the new script to the head, causing it to load and execute
  document.head.appendChild(script);

  // Optional: log a message to indicate the script has been reloaded
  console.log('Pirsch Analytics script loaded')
});

</script>

Updated in Astro 4.5.0 - see docs - data-astro-rerun.

<script
  defer
  src="https://api.pirsch.io/pirsch-extended.js"
  id="pirschextendedjs"
  data-code="y0urRaNd0m1d"
  is:inline
  data-astro-rerun
/>
Date
18.03.2024
Categories
  • Notes
Tags
  • Astro