Webflow

Name: Rybbit
Author: Rybbit

Rybbit enables you to collect analytics, capture custom events, and more on your Webflow site.

How to Add Rybbit to Webflow

1. Retrieve Your Tracking Script

Navigate to your Rybbit dashboard to obtain your code snippet.


<script
  src="https://app.rybbit.io/api/script.js"
  data-site-id="YOUR_SITE_ID"
  async
  defer
></script>

2. Add the Snippet to Your Webflow Project

In your Webflow project, go to Site settings > Custom code.
Paste your snippet into the Head code section.
Save and publish your changes.

Page View Tracking in Webflow:

Standard Navigation: For standard page-to-page navigation in Webflow, Rybbit will track each new page load automatically.
Interactions & Animations: If you use Webflow interactions that change content significantly without changing the URL (e.g., showing/hiding sections to simulate tabs or multi-step forms on a single page), Rybbit will only track the initial page load. For these “virtual” page views, you would need to use custom event tracking to mark those interactions.
Single-Page Sites: If your Webflow site is 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

You can track custom events in Webflow by adding custom JavaScript code, either in the Custom Code section of your site settings (for global scripts) or within an Embed element on a specific page.

Example: Tracking a button click

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., my-special-button).

Add Custom JavaScript: You can add this script in Site Settings > Custom Code > Footer Code to make it available globally, or in an Embed element on the page where the button exists.


<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
  var specialButton = document.getElementById('my-special-button');
  if (specialButton) {
    specialButton.addEventListener('click', function() {
      if (typeof window.rybbit !== 'undefined') {
        window.rybbit.trackEvent('webflow_button_click', {
          button_id: 'my-special-button',
          button_text: specialButton.textContent || specialButton.innerText,
          page_path: window.location.pathname
        });
      }
    });
  }
});
</script>

Example: Tracking a form submission

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 (in Footer Code or Embed):


<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
  var contactForm = document.getElementById('contact-form');
  if (contactForm) {
    contactForm.addEventListener('submit', function() {
      // It's often good to track *after* successful submission if Webflow provides a callback.
      // For a simple submit click, this is how you'd do it.
      // For Webflow's native form handling, you might need to hook into its success state if possible,
      // or track the click on the submit button itself.
      if (typeof window.rybbit !== 'undefined') {
        window.rybbit.trackEvent('webflow_form_submit', {
          form_id: 'contact-form',
          // You can try to get form field values here if needed, but be mindful of PII.
        });
      }
    });
  }
});
</script>

⚠️

When adding custom JavaScript in Webflow, ensure it’s placed correctly (usually in the Footer Code for scripts that need the DOM to be ready) and test thoroughly. Webflow’s own interactions might sometimes conflict or require specific timing for custom scripts.

By using these methods, you can enhance Rybbit’s tracking on your Webflow site beyond basic page views.