<script>
document.addEventListener("DOMContentLoaded", function() {
  var trackableHeadings = document.querySelectorAll('[data-tracking-id]');

  var observer = new IntersectionObserver(function(entries, observer) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        var headingID = entry.target.getAttribute('data-tracking-id');
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
          'event': 'headingVisible',
          'headingID': headingID
        });

        // Optional: Unobserve the element after it's been reported
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: [0.5] }); // Trigger when 50% of the element is visible

  trackableHeadings.forEach(function(heading) {
    observer.observe(heading);
  });
});
</script>