Webflow

Add Databuddy's privacy-first analytics to your Webflow site to track page views, capture custom events, and gather insights about your visitors.

How to Add Databuddy to Webflow

Get Your Tracking Script

Navigate to your Databuddy dashboard to get your tracking code snippet.

<script
src="https://cdn.databuddy.cc/databuddy.js"
data-client-id="YOUR_CLIENT_ID"
async
></script>

Add to Your Webflow Project

In your Webflow project:

Go to Site settings > Custom code
Paste your Databuddy snippet into the Head code section
Save and publish your changes

Page View Tracking in Webflow:

Standard Navigation: Databuddy automatically tracks each page load when users navigate between pages in Webflow
Interactions & Animations: Webflow interactions that change content without changing the URL (like tabs or multi-step forms on a single page) won't trigger automatic page views. Use custom event tracking to track these interactions
Single-Page Sites: If your Webflow site uses a single-page design with sections, only one page view will be tracked unless you implement custom event tracking for section views

Custom Event Tracking in Webflow

Track custom events in Webflow by adding JavaScript code. You can add this in Site Settings > Custom Code (for global scripts) or within an Embed element on specific pages.

Tracking Button Clicks

Track when users click specific buttons:

Give your button an ID:
- Select the button element in the Webflow Designer
- Go to the Settings panel (cog icon)
- Under General, set a unique ID for the button (e.g., cta-button)
Add Custom JavaScript: Add this script in Site Settings > Custom Code > Footer Code for global availability, or in an Embed element on the page:

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var button = document.getElementById('cta-button');
if (button && window.databuddy) {
  button.addEventListener('click', function() {
    window.databuddy.track('button_click', {
      button_id: 'cta-button',
      button_text: button.textContent || button.innerText,
      page_path: window.location.pathname
    });
  });
}
});
</script>

Tracking Form Submissions

Track form submissions from Webflow forms:

Give your form an ID:
- Select the Form Block element
- Go to the Settings panel
- Set a unique ID (e.g., contact-form)
Add Custom JavaScript:

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var form = document.getElementById('contact-form');
if (form && window.databuddy) {
  form.addEventListener('submit', function() {
    window.databuddy.track('form_submit', {
      form_id: 'contact-form',
      form_type: 'contact',
      page_path: window.location.pathname
    });
  });
}
});
</script>

Note: For Webflow's native form handling, you may want to track the submit button click instead, or hook into Webflow's form success state if available.

Tracking Section Views

Track when users view specific sections on a single-page site:

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
if (!window.databuddy) return;

// Track when a section comes into view
var observer = new IntersectionObserver(function(entries) {
  entries.forEach(function(entry) {
    if (entry.isIntersecting) {
      var sectionId = entry.target.id || entry.target.className;
      window.databuddy.track('section_view', {
        section_id: sectionId,
        page_path: window.location.pathname
      });
      // Unobserve after tracking to avoid duplicate events
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.5 });

// Observe sections with data-track-section attribute
document.querySelectorAll('[data-track-section]').forEach(function(section) {
  observer.observe(section);
});
});
</script>

Then add data-track-section attribute to sections you want to track in the Webflow Designer.

Using Data Attributes

Enable automatic tracking with data attributes by adding this to your script tag:

<script
src="https://cdn.databuddy.cc/databuddy.js"
data-client-id="YOUR_CLIENT_ID"
data-track-attributes
async
></script>

Then add data-track attributes directly to elements in Webflow:

<!-- Button with automatic tracking -->
<button data-track="cta_click" data-button-type="primary">
Get Started
</button>

<!-- Link with tracking -->
<a href="/pricing" data-track="pricing_link_click" data-link-location="header">
View Pricing
</a>

Important Notes:

Place custom JavaScript in Footer Code for scripts that need the DOM to be ready
Test thoroughly as Webflow's interactions might require specific timing
Always check if window.databuddy exists before calling tracking methods
Use DOMContentLoaded event listener to ensure elements are available before attaching event listeners

Configuration Options

Enable additional tracking features by adding data attributes to your script tag:

<script
src="https://cdn.databuddy.cc/databuddy.js"
data-client-id="YOUR_CLIENT_ID"
data-track-attributes
data-track-outgoing-links
data-track-interactions
data-track-performance
data-track-web-vitals
data-track-errors
async
></script>

Common Use Cases

E-commerce Tracking

Track product views and add-to-cart events:

// Track product view
window.databuddy.track('product_view', {
product_id: 'product-123',
product_name: 'Example Product',
price: 29.99
});

// Track add to cart
window.databuddy.track('add_to_cart', {
product_id: 'product-123',
quantity: 1
});

Track newsletter subscriptions:

var newsletterForm = document.getElementById('newsletter-form');
if (newsletterForm && window.databuddy) {
newsletterForm.addEventListener('submit', function() {
  window.databuddy.track('newsletter_signup', {
    form_location: 'footer',
    page_path: window.location.pathname
  });
});
}

Video Engagement

Track video plays and completions:

var video = document.getElementById('hero-video');
if (video && window.databuddy) {
video.addEventListener('play', function() {
  window.databuddy.track('video_play', {
    video_id: 'hero-video',
    video_title: 'Product Demo'
  });
});

video.addEventListener('ended', function() {
  window.databuddy.track('video_complete', {
    video_id: 'hero-video'
  });
});
}

Troubleshooting

Script Not Loading

Verify the script is in the Head code section of Site Settings
Check browser console for errors
Ensure your Client ID is correct
Clear Webflow cache and republish

Events Not Tracking

Confirm window.databuddy exists before calling tracking methods
Check that elements exist before attaching event listeners
Use DOMContentLoaded to ensure DOM is ready
Verify events appear in your Databuddy dashboard after 2-3 minutes

Webflow Interactions

Custom scripts may need to wait for Webflow interactions to initialize
Consider using setTimeout for timing-sensitive tracking
Test in different browsers and devices

Framer

No-code integration for Framer websites.

Wix

Simple setup for Wix websites.

Squarespace

Code injection setup for Squarespace sites.

Need help with your Webflow integration? Contact us at help@databuddy.cc.