Skip to main content
Add DATALYR to your Framer site to track visitors, conversions, and revenue from ads.

​
Use Cases

Landing Pages Track ad campaign performance for product launches, waitlists, and marketing campaigns. Portfolios & Agency Sites Monitor visitor behavior, traffic sources, and contact form conversions. SaaS Marketing Sites Track signups, demo requests, and trial conversions from paid ads. Product Pages See which ads drive the most engagement and conversions on product pages.

​
Before You Start

  • You have a DATALYR account
  • You’ve created a workspace
  • You have a Framer site (free or paid plan)
  • You have edit access to your Framer project

​
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 Framer Site Settings

  1. Open your Framer project
  2. Click the Settings icon (gear) in the top toolbar
  3. Go to the General tab
  4. Scroll down to Custom Code
  5. In the Start of <head> tag section, paste your DATALYR tracking script
  6. Click outside the text area to save

​
Step 3: Publish Your Site

The tracking script only runs on your published site, not in the Framer editor preview.
  1. Click Publish in the top right
  2. Confirm your site settings
  3. Click Publish

​
Step 4: Verify Tracking Works

  1. Visit your published Framer site in a new browser tab
  2. Go back to your DATALYR dashboard
  3. Click Events in the sidebar
  4. 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 Framer Form Submissions

To track form submissions, add a custom code component to your form’s success state:

​
Using Framer’s Built-in Forms

  1. Select your form element in Framer
  2. Add a Custom Code component below the form
  3. Paste this code:
<script>
  // Listen for Framer form submission
  document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    if (form) {
      form.addEventListener('submit', function(e) {
        if (window.datalyr) {
          datalyr.track('form_submission', {
            form_name: 'Contact Form',
            page: window.location.pathname
          });
        }
      });
    }
  });
</script>
  1. Replace 'Contact Form' with your actual form name
  2. Publish your site

​
Track Button Clicks

Track specific button clicks or interactions: 
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Track demo request button
    const demoButton = document.querySelector('[data-framer-name="DemoButton"]');
    if (demoButton) {
      demoButton.addEventListener('click', function() {
        if (window.datalyr) {
          datalyr.track('demo_request', {
            button_location: 'hero_section'
          });
        }
      });
    }
  });
</script>
Replace [data-framer-name="DemoButton"] with your actual button’s data attribute.

​
Track Page-Specific Events

Add custom code to individual pages:
  1. Select the page in your Framer project
  2. Click Page Settings (gear icon)
  3. Go to Custom Code
  4. Add your tracking code in End of <body> tag:
<script>
  if (window.datalyr) {
    datalyr.track('pricing_page_view', {
      plan_interest: 'unknown'
    });
  }
</script>
Track when users click links to external sites: 
<script>
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('a[href^="http"]').forEach(function(link) {
      link.addEventListener('click', function() {
        if (window.datalyr) {
          datalyr.track('external_link_click', {
            link_url: this.href,
            link_text: this.textContent
          });
        }
      });
    });
  });
</script>

​
Identify Users

If you collect email addresses or user IDs, identify users for cross-device tracking: 
<script>
  if (window.datalyr) {
    // After form submission or signup
    datalyr.identify('user_12345', {
      email: '[email protected]',
      name: 'John Doe'
    });
  }
</script>

​
Troubleshooting

Not seeing events? Check that:
  • Your tracking script is in Start of <head> tag (not End of <body>)
  • You’ve published your site (tracking doesn’t work in editor preview)
  • Your workspace ID is correct
  • Ad blockers are disabled
Custom code not working? Make sure:
  • Your code is wrapped in <script> tags
  • You’re testing on the published site, not the preview
  • There are no JavaScript errors in the browser console (F12)
Form tracking not firing? Framer forms use different structures. Inspect your form with browser dev tools (F12) to find the correct selectors.

​
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?

Can’t get tracking working on Framer? Check our troubleshooting guide or contact support.