Loamly Documentation

Framer makes it easy to add custom code to your site. This guide walks you through adding Loamly tracking to any Framer project.

Add the tracking script

Open your Framer project
Click the Settings icon (gear) in the top right
Go to General tab
Scroll down to Custom Code
In the Start of <head> tag section, paste:

<script
  src="https://app.loamly.ai/t.js?d=yourdomain.com"
  defer
></script>

Replace yourdomain.com with your actual domain
Click Save
Publish your site to apply the changes

Custom domains

If you use a custom domain, use that domain in the script. If you are using a Framer subdomain (yoursite.framer.website), use that instead.

Verify installation

Wait for your site to finish publishing
Visit your published Framer site in a new browser tab
Open your Loamly dashboard
Check the real-time visitors section
Your visit should appear within seconds

Troubleshooting

Issue	Solution
Not seeing visits	Make sure the site is published and you are viewing the live version, not the editor preview
Domain mismatch	Ensure the domain in your script matches exactly (no www vs non-www mismatch)
Ad blocker	Try disabling ad blockers temporarily to verify

Track Framer forms

Loamly automatically tracks Framer form submissions. No additional configuration is needed. When a visitor submits a form, you will see:

The form submission event in the visitor timeline
Submitted field values
Email capture (if the form has an email field)
Conversion attribution to the original traffic source

Automatic email capture

If your Framer form has an email field, Loamly captures it and associates it with the visitor. This enables revenue attribution if you connect Stripe.

Custom events

To track custom events in Framer, you can use Code Overrides or add custom code embeds.

Using a code embed

Add a Code Embed component to your page
Add tracking code for specific actions:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Track CTA button clicks
  document.querySelectorAll('[data-cta]').forEach(function(btn) {
    btn.addEventListener('click', function() {
      if (window.loamly) {
        window.loamly.event('cta_clicked', {
          button: this.textContent,
          page: window.location.pathname
        });
      }
    });
  });
});
</script>

Using Code Overrides

For more advanced tracking, create a Code Override that tracks interactions:

// In your overrides file
import { Override } from "framer"

export function TrackClick(): Override {
  return {
    onClick: () => {
      if (typeof window !== 'undefined' && window.loamly) {
        window.loamly.event('button_clicked', {
          component: 'Hero CTA'
        })
      }
    }
  }
}

Then apply the override to any button or component you want to track.