BlogPricingDashboardGitHubGitHub★ 841

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

1

Get Your Tracking Script

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

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

Add to Your Webflow Project

In your Webflow project:

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

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:

  1. 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)

  2. Add Custom JavaScript: Add this script in Site Settings > Custom Code > Footer Code for global availability, or in an Embed element on the page:

Footer Code or Embedhtml
<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:

  1. Give your form an ID:

    • Select the Form Block element
    • Go to the Settings panel
    • Set a unique ID (e.g., contact-form)

  2. Add Custom JavaScript:

Footer Code or Embedhtml
<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:

Footer Codehtml
<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:

html
<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:

html
<!-- 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>

Configuration Options

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

html
<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
data-track-scroll-depth
async
></script>

Common Use Cases

E-commerce Tracking

Track product views and add-to-cart events:

javascript
// 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
});

Newsletter Signups

Track newsletter subscriptions:

javascript
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:

javascript
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

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

How is this guide?

Edit on GitHub