Documentation

Getting Started

Integration Guides

Platform Features

HTML / Script Tag Integration

The fastest way to add analytics to any website — static sites, WordPress, Webflow, or anything that lets you edit HTML.

Step 1: Get your snippet

After creating a project in your dashboard, copy your unique snippet. It will include your data-website-id, data-domain, and data-api-key — all three are required for tracking to work.

HTML
<script
  defer
  data-website-id="YOUR_WEBSITE_ID"
  data-domain="YOUR_DOMAIN"
  data-api-key="YOUR_API_KEY"
  src="https://your-analytics-domain.com/js/script.js">
</script>

Step 2: Add it to your HTML

Paste the snippet into the <head> of your HTML document. That's it! Pageviews will immediately start flowing into your dashboard.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My Awesome Website</title>

    <!-- Paste your analytics snippet here -->
    <script
      defer
      data-website-id="YOUR_WEBSITE_ID"
      data-domain="YOUR_DOMAIN"
      data-api-key="YOUR_API_KEY"
      src="https://your-analytics-domain.com/js/script.js">
    </script>

  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

ℹ️ Note

The script uses the defer attribute, meaning it won't block the rendering of your page. It's incredibly lightweight — around ~6kb gzipped.

Tracking Custom Events (Click)

Track button clicks or any element interactions by adding a data-ezlytics-goal attribute. No JavaScript required — the script handles it automatically.

HTML
<!-- Track a button click -->
<button data-ezlytics-goal="signup-clicked">
  Sign Up
</button>

<!-- Track a link click with extra metadata -->
<a
  href="/pricing"
  data-ezlytics-goal="pricing-clicked"
  data-ezlytics-goal-plan="pro"
>
  View Pro Plan
</a>

💡 Goal name format

Goal names must be lowercase letters, numbers, hyphens, or underscores — max 64 characters. Example: signup-clicked, lead_captured.

Tracking Scroll Depth

Fire an event when a user scrolls to a specific section of your page using the data-ezlytics-scroll attribute.

HTML
<!-- Fire "reached-pricing" when this section enters the viewport -->
<section
  data-ezlytics-scroll="reached-pricing"
  data-ezlytics-scroll-threshold="0.5"
  data-ezlytics-scroll-delay="500"
>
  <h2>Pricing</h2>
  ...
</section>

data-ezlytics-scroll-threshold (0–1, default 0.5) controls how much of the element must be visible before firing. data-ezlytics-scroll-delay adds a millisecond delay before the event fires.