Script Extensions

Enable extra tracking features with data attributes on the script.

Quick Overview

Attribute	Function
`data-outbound-links`	Track clicks on external links
`data-file-downloads`	Track file downloads
`data-forms`	Track form submissions
`data-scroll-depth`	Track scroll depth (25%, 50%, 75%, 100%)
`<meta name="va-404">`	Track 404 errors

Base Script

Start with the base script and add the attributes you want to use:

<!-- Base script -->
<script defer
  data-site-id="din-sajt-id"
  data-api="https://savri.io"
  src="https://savri.io/script.js">
</script>

<!-- With all extensions -->
<script defer
  data-site-id="din-sajt-id"
  data-api="https://savri.io"
  data-outbound-links
  data-file-downloads
  data-forms
  data-scroll-depth
  src="https://savri.io/script.js">
</script>

Outbound Links

When data-outbound-links is enabled, all clicks on links to other domains are tracked.

<script defer
  data-site-id="din-sajt-id"
  data-api="https://savri.io"
  data-outbound-links
  src="https://savri.io/script.js">
</script>

Event sent

Event name: Outbound Link: Click
Property: url - Full URL to the destination

docs.scriptExtensions.outboundLinks.example

File Downloads

When data-file-downloads is enabled, clicks on links to files are tracked.

<script defer
  data-site-id="din-sajt-id"
  data-api="https://savri.io"
  data-file-downloads
  src="https://savri.io/script.js">
</script>

Event sent

Event name: File Download
Property: file - The filename

Files tracked automatically:

.pdf, .zip, .rar, .7z, .tar, .gz, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .csv, .exe, .dmg, .pkg, .msi, .apk, .ipa

Forms

When data-forms is enabled, all form submissions on the page are tracked.

<script defer
  data-site-id="din-sajt-id"
  data-api="https://savri.io"
  data-forms
  src="https://savri.io/script.js">
</script>

Event sent

Event name: Form Submit
Properties:
form - The form's ID or name
action - The form's action URL

Tip

Give your forms an id or name attribute to easily distinguish them in your statistics.

<!-- Good: Form with ID -->
<form id="contact-form" action="/submit">
  ...
</form>

<!-- Event: { form: "contact-form", action: "/submit" } -->

Scroll Depth

When data-scroll-depth is enabled, how far down visitors scroll on the page is tracked. Events are sent at 25%, 50%, 75%, and 100%.

<script defer
  data-site-id="din-sajt-id"
  data-api="https://savri.io"
  data-scroll-depth
  src="https://savri.io/script.js">
</script>

Event sent

Event name: Scroll Depth
Property: depth - Percent scrolled (25, 50, 75, or 100)

Each milestone is only sent once per pageview. If a visitor scrolls down to 75% and then back up, no new event is sent.

Use cases

• See if visitors read entire articles
• Measure content engagement
• Optimize page length and content placement

404 Tracking

404 tracking is automatic and requires no extra attribute. Just add a meta tag to your 404 page:

<!-- On your 404 page -->
<head>
  <meta name="va-404">
  <!-- ... other head content ... -->
</head>

Event sent

Event name: 404
Property: path - The path that resulted in 404

This lets you see which broken links visitors are trying to access, so you can fix them or add redirects.

Next.js example

// app/not-found.tsx
export default function NotFound() {
  return (
    <>
      <head>
        <meta name="va-404" />
      </head>
      <div>
        <h1>404 - Page not found</h1>
      </div>
    </>
  );
}

Complete Example

Here is a complete example with all extensions enabled:

<!DOCTYPE html>
<html>
<head>
  <title>My site</title>

  <!-- Savri with all extensions -->
  <script defer
    data-site-id="abc123"
    data-api="https://savri.io"
    data-outbound-links
    data-file-downloads
    data-forms
    data-scroll-depth
    src="https://savri.io/script.js">
  </script>
</head>
<body>
  <!-- External links tracked automatically -->
  <a href="https://partner.com">Our partner</a>

  <!-- File downloads tracked automatically -->
  <a href="/files/rapport.pdf">Download report</a>

  <!-- Forms tracked automatically -->
  <form id="newsletter" action="/subscribe">
    <input type="email" name="email" required>
    <button type="submit">Subscribe</button>
  </form>
</body>
</html>

Performance

All extensions use event delegation and add minimal overhead. The script remains under 2KB with all extensions enabled.

Prompt Your AI

Copy the prompt below and paste it into your favorite AI (ChatGPT, Claude, etc.) to get help choosing the right script extensions for your site.

AI prompt for script extensions

docs.scriptExtensions.aiPrompt.prompt

Custom events →Goals & conversions →Integration guides →