# Wix

> Add cookieless product analytics to your Wix website


import { Steps, Step } from "@/components/docs";
import { Callout } from "@/components/docs";
import { CodeBlock } from "@/components/docs";
import { Card, Cards } from "@/components/docs";

Add Databuddy's cookieless product analytics to your Wix website to track page views, user interactions, and gather insights about your visitors.

## How to Add Databuddy to Wix

<Steps>
  <Step title="Get Your Tracking Script">
    Get your Databuddy tracking script from your [Databuddy dashboard](https://app.databuddy.cc). It will look like this:

    <CodeBlock
      language="html"
      code={`<script
  src="https://cdn.databuddy.cc/databuddy.js"
  data-client-id="YOUR_CLIENT_ID"
  crossorigin="anonymous"
  async
></script>`}
    />

    Replace `YOUR_CLIENT_ID` with your actual Client ID from your Databuddy dashboard.
  </Step>

  <Step title="Go to Wix Dashboard">
    Log in to your Wix account and select the site you want to track.

    From your site's dashboard, navigate to **Settings** (usually in the left-hand sidebar).
  </Step>

  <Step title="Access Tracking Tools">
    In the Settings menu, look for a section related to tracking or advanced settings. This is often called:

    - **Tracking Tools & Analytics** (under "Marketing & SEO" or a similar category)
    - Or, **Custom Code** (sometimes under "Advanced Settings")

    <Callout type="info">
      To add custom code, you'll need a Wix Premium plan and a connected domain. This feature is typically not available on free Wix plans.
    </Callout>
  </Step>

  <Step title="Add New Custom Code">
    Once in the Tracking Tools or Custom Code section:

    - Click on **+ New Tool** or **+ Add Custom Code**
    - Choose **Custom** from the list of options if prompted
  </Step>

  <Step title="Configure the Custom Code">
    You'll be presented with a form to add your code:

    - **Paste your Databuddy tracking script** into the main code snippet box
    - **Name your code:** Give it a recognizable name, like "Databuddy Analytics"
    - **Add Code to Pages:** Select **All pages** to track your entire site
      - You might have an option to **Load code once** or **Load code on each new page**. Choose the option that loads the script on every page view
    - **Place Code in:** Choose **Body - end**. This is recommended for analytics scripts to avoid impacting perceived page load speed. Some Wix versions might offer "Head" or "Body - start" as well. "Body - end" is usually the best choice
  </Step>

  <Step title="Apply Changes">
    Click **Apply** or **Save** to add the custom code to your site.
  </Step>

  <Step title="Verify Integration">
    After applying the changes, Databuddy should start tracking visitors on your Wix site.

    - Open your Wix website in a new browser tab or incognito window
    - Navigate through a few pages
    - Check your [Databuddy dashboard](https://app.databuddy.cc) for incoming data. It might take a few minutes for the first events to appear
  </Step>
</Steps>

## Configuration Options

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

<CodeBlock
  language="html"
  code={`<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-web-vitals
  data-track-errors
  crossorigin="anonymous"
  async
></script>`}
/>

## Custom Event Tracking in Wix

Track custom events in Wix by adding JavaScript code through the Custom Code section or using Wix's built-in code elements.

### Using Data Attributes

Enable automatic tracking with data attributes:

<CodeBlock
  language="html"
  code={`<script
  src="https://cdn.databuddy.cc/databuddy.js"
  data-client-id="YOUR_CLIENT_ID"
  data-track-attributes
  crossorigin="anonymous"
  async
></script>`}
/>

Then add `data-track` attributes directly to elements in Wix:

<CodeBlock
  language="html"
  code={`<!-- 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>`}
/>

### Tracking Button Clicks with Custom Code

Add custom JavaScript to track specific button interactions:

<CodeBlock
  language="javascript"
  code={`<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
  // Wait for Wix to fully load
  setTimeout(function() {
    var button = document.getElementById('your-button-id');
    if (button && window.databuddy) {
      button.addEventListener('click', function() {
        window.databuddy.track('button_click', {
          button_id: 'your-button-id',
          button_text: button.textContent || button.innerText,
          page_path: window.location.pathname
        });
      });
    }
  }, 1000); // Adjust delay if needed for Wix to initialize
});
</script>`}
/>

### Tracking Form Submissions

Track form submissions from Wix forms:

<CodeBlock
  language="javascript"
  code={`<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
  setTimeout(function() {
    var form = document.querySelector('form[data-name="ContactForm"]');
    if (form && window.databuddy) {
      form.addEventListener('submit', function() {
        window.databuddy.track('form_submit', {
          form_type: 'contact',
          page_path: window.location.pathname
        });
      });
    }
  }, 1000);
});
</script>`}
/>

<Callout type="warn">
  **Important Notes**:

  - Wix may require a Premium plan to add custom code
  - Use `setTimeout` to ensure Wix has fully loaded before attaching event listeners
  - Always check if `window.databuddy` exists before calling tracking methods
  - Test thoroughly as Wix's page structure may vary
</Callout>

## Common Use Cases

### E-commerce Tracking

Track product views and purchases:

<CodeBlock
  language="javascript"
  code={`// Track product view
if (window.databuddy) {
  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:

<CodeBlock
  language="javascript"
  code={`document.addEventListener('DOMContentLoaded', function() {
  setTimeout(function() {
    var newsletterForm = document.querySelector('form[data-name="NewsletterForm"]');
    if (newsletterForm && window.databuddy) {
      newsletterForm.addEventListener('submit', function() {
        window.databuddy.track('newsletter_signup', {
          form_location: 'footer',
          page_path: window.location.pathname
        });
      });
    }
  }, 1000);
});`}
/>

## Troubleshooting

### Script Not Loading

- Verify the script is in the **Body - end** section of Custom Code
- Check browser console for errors
- Ensure your Client ID is correct
- Confirm you have a Wix Premium plan with custom code enabled

### Events Not Tracking

- Confirm `window.databuddy` exists before calling tracking methods
- Use `setTimeout` to wait for Wix to fully initialize
- Check that elements exist before attaching event listeners
- Verify events appear in your Databuddy dashboard after 2-3 minutes

### Wix-Specific Issues

- Wix may load pages dynamically, so ensure scripts run after page load
- Some Wix elements may have dynamically generated IDs
- Test in different browsers and devices
- Clear Wix cache and republish your site if needed

## Related Integrations

<Cards>
  <Card title="WordPress" href="/docs/Integrations/wordpress">
    Plugin or manual setup for WordPress sites.
  </Card>
  <Card title="Squarespace" href="/docs/Integrations/squarespace">
    Code injection setup for Squarespace sites.
  </Card>
  <Card title="Webflow" href="/docs/Integrations/webflow">
    Visual builder integration for Webflow sites.
  </Card>
</Cards>

Need help with your Wix integration? Contact us at [support@databuddy.cc](mailto:support@databuddy.cc).