twobucks.ai logoTwoBucks
Back to Installation

Webflow Installation Guide

Step-by-step guide to install TwoBucks Analytics on Webflow.

Quick Start

Method 1: Site Settings (Recommended)

  1. Go to Project Settings → Custom Code
  2. Add the script to the Head Code section:
<script
  src="https://twobucks.ai/script.js"
  data-website-id="your-website-id"
  async
></script>

Method 2: Page Settings

For page-specific tracking:

  1. Go to Page Settings → Custom Code
  2. Add the script to the Head Code section

Track Webflow Interactions

Button Clicks

Use Webflow Interactions with custom code:

  1. Select your button element
  2. Add an Interaction → Click trigger
  3. Add Custom Code action:
if (window.twobucks) {
  window.twobucks('button_click', {
    button_text: 'Get Started',
    page: window.location.pathname
  });
}

Form Submissions

Track form submissions:

  1. Select your form element
  2. Add Interaction → Form Success trigger
  3. Add Custom Code action:
if (window.twobucks) {
  window.twobucks('form_submit', {
    form_name: 'Contact Form',
    page: window.location.pathname
  });
}

CMS Collections

Track CMS item views:

// Add to CMS Collection Page
if (window.twobucks) {
  window.twobucks('cms_item_view', {
    item_id: '{{item._id}}',
    item_name: '{{item.name}}',
    collection: 'products'
  });
}

Common Issues

Script Not Loading

  1. Ensure script is in Project Settings → Custom Code → Head Code
  2. Check that script is not in page-specific code (unless intended)
  3. Verify data-website-id is correct

Interactions Not Firing

  1. Ensure custom code is added to the correct interaction trigger
  2. Check browser console for errors
  3. Verify script loads before interaction code runs

Published vs. Designer

  • Custom code in Project Settings applies to published site
  • Custom code in Page Settings applies to that specific page
  • Test on published site, not just in designer

Next Steps