Skip to main content
Add DATALYR to any HTML website or static site to track visitors, conversions, and revenue from ads.

​
Use Cases

Static Websites Track landing pages, portfolios, and static marketing sites built with plain HTML, CSS, and JavaScript. Custom Web Applications Add tracking to custom-built web apps without frameworks or build tools. Legacy Sites Track older websites that don’t use modern frameworks or CMS platforms. HTML Email Landing Pages Track standalone landing pages linked from email campaigns.

​
Before You Start

  • You have a DATALYR account
  • You’ve created a workspace
  • You have access to edit your HTML files
  • Your site is hosted somewhere accessible

​
Step 1: Get Your Tracking Code

  1. Log in to your DATALYR dashboard
  2. Go to Settings → Tracking
  3. Copy your tracking script:
<script
  defer
  src="https://track.datalyr.com/dl.js"
  data-workspace-id="YOUR_WORKSPACE_ID">
</script>

​
Step 2: Add to Your HTML

Open your HTML file and paste the tracking script in the <head> section, before the closing </head> tag: 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Page Title</title>

  <!-- DATALYR Tracking -->
  <script
    defer
    src="https://track.datalyr.com/dl.js"
    data-workspace-id="YOUR_WORKSPACE_ID">
  </script>
</head>
<body>
  <!-- Your content here -->
</body>
</html>
Replace YOUR_WORKSPACE_ID with your actual workspace ID from DATALYR.

​
Step 3: Add to All Pages

If you have multiple HTML pages, add the same tracking script to each page’s <head> section:
  • index.html
  • about.html
  • contact.html
  • Any other pages
This ensures tracking works across your entire site.

​
Step 4: Upload and Test

  1. Upload your updated HTML files to your web host
  2. Visit your website in a new browser tab
  3. Go to your DATALYR dashboard
  4. Click Events in the sidebar
  5. You should see a page_view event within 10 seconds
If you see events, you’re done!

​
What Gets Tracked Automatically

Once installed, DATALYR automatically captures:
  • Page views on all pages
  • Visitor IDs (persistent across sessions)
  • UTM parameters from ad campaigns
  • Ad click IDs (fbclid, gclid, ttclid)
  • Referrer and traffic source
  • Device and browser information

​
Track Form Submissions

Track form submissions as conversion events: 
<form id="contact-form" action="/submit" method="POST">
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="email" name="email" placeholder="Your Email" required>
  <textarea name="message" placeholder="Your Message" required></textarea>
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('contact-form').addEventListener('submit', function(e) {
    if (window.datalyr) {
      datalyr.track('form_submission', {
        form_name: 'Contact Form',
        page: window.location.pathname
      });
    }
  });
</script>
Add this tracking code right after your form or in a <script> tag at the end of your page.

​
Track Button Clicks

Track specific button clicks or interactions: 
<button id="signup-button">Sign Up Free</button>

<script>
  document.getElementById('signup-button').addEventListener('click', function() {
    if (window.datalyr) {
      datalyr.track('button_clicked', {
        button_name: 'Sign Up Free',
        location: 'hero_section'
      });
    }
  });
</script>

​
Track Newsletter Signups

Track email capture for newsletter signups: 
<form id="newsletter-form" action="/subscribe" method="POST">
  <input type="email" name="email" placeholder="Enter your email" required>
  <button type="submit">Subscribe</button>
</form>

<script>
  document.getElementById('newsletter-form').addEventListener('submit', function(e) {
    const email = this.querySelector('input[name="email"]').value;

    if (window.datalyr) {
      datalyr.track('newsletter_signup', {
        email: email,
        source: 'homepage_footer'
      });
    }
  });
</script>
Track when users click links to external sites: 
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Track all external links
    document.querySelectorAll('a[href^="http"]').forEach(function(link) {
      // Skip internal links
      if (link.hostname !== window.location.hostname) {
        link.addEventListener('click', function() {
          if (window.datalyr) {
            datalyr.track('external_link_click', {
              link_url: this.href,
              link_text: this.textContent
            });
          }
        });
      }
    });
  });
</script>
Add this script to your <head> or before the closing </body> tag.

​
Track Downloads

Track file downloads (PDFs, images, etc.): 
<a href="/downloads/ebook.pdf" class="download-link">Download eBook</a>

<script>
  document.querySelectorAll('.download-link').forEach(function(link) {
    link.addEventListener('click', function() {
      if (window.datalyr) {
        datalyr.track('file_download', {
          file_name: this.href.split('/').pop(),
          file_url: this.href
        });
      }
    });
  });
</script>

​
Track Video Plays

Track when users play embedded videos: 
<video id="product-video" controls>
  <source src="/videos/demo.mp4" type="video/mp4">
</video>

<script>
  const video = document.getElementById('product-video');

  video.addEventListener('play', function() {
    if (window.datalyr) {
      datalyr.track('video_play', {
        video_title: 'Product Demo',
        video_duration: this.duration
      });
    }
  });

  video.addEventListener('ended', function() {
    if (window.datalyr) {
      datalyr.track('video_completed', {
        video_title: 'Product Demo'
      });
    }
  });
</script>

​
Identify Users

If you collect user information, identify users for cross-device tracking: 
<script>
  // After user signs up or logs in
  if (window.datalyr) {
    datalyr.identify('user_12345', {
      email: '[email protected]',
      name: 'John Doe',
      signup_date: '2025-09-29'
    });
  }
</script>
Add this after successful authentication or signup.

​
Using Template Files

If you use server-side includes or templates, add the tracking script to your header template once: header.html 
<head>
  <meta charset="UTF-8">
  <title>My Site</title>

  <!-- DATALYR Tracking -->
  <script
    defer
    src="https://track.datalyr.com/dl.js"
    data-workspace-id="YOUR_WORKSPACE_ID">
  </script>
</head>
Then include this header in all your pages. The tracking script will be automatically added to every page.

​
Troubleshooting

Not seeing events? Check that:
  • Your tracking script is in the <head> section of your HTML
  • You’ve uploaded the updated files to your web host
  • Your workspace ID is correct
  • Ad blockers are disabled
  • Your site is accessible via HTTPS (recommended)
Script not loading? Open browser dev tools (F12) and check the Network tab. Look for dl.js to see if it loaded successfully. Events firing multiple times? Make sure you only have one instance of the DATALYR script on each page. Search for track.datalyr.com in your HTML. TypeError: datalyr is undefined? The script hasn’t loaded yet. Wrap your tracking code in a check: 
if (window.datalyr) {
  datalyr.track('event_name', { ... });
} else {
  console.log('DATALYR not loaded yet');
}

​
Next Steps

Verify Tracking

Confirm events are coming through

Track Custom Events

Learn event tracking API

Connect Integrations

Link Meta Ads, Google Ads, TikTok

View Your Dashboard

See your tracking data

​
Need Help?

Having trouble with HTML tracking? Check our troubleshooting guide or contact support.