# WordPress

> Add cookieless product analytics to your WordPress site


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

Add Databuddy's cookieless product analytics to your WordPress site with an asynchronous tracker. The tracker uses browser storage instead of analytics cookies. Review your [privacy and consent configuration](/docs/compliance/gdpr-compliance-guide) before enabling collection.

## Installation Methods

Choose one installation method. WordPress.com requires a plan that supports plugins and custom JavaScript; see its [custom code requirements](https://wordpress.com/support/code/). Self-hosted WordPress supports the methods below.

<Tabs items={['Plugin Method', 'functions.php Method', 'header.php Method']}>
  <Tab>
    **Using a Plugin (Recommended)**

    The safest and easiest way to add Databuddy to WordPress is using a plugin that allows you to inject scripts without modifying theme files. Use a plugin-enabled WordPress.com plan or a self-hosted installation.

    <Steps>
      <Step title="Install a Script Injection Plugin">
        Install a plugin like [Insert Headers and Footers](https://wordpress.org/plugins/insert-headers-and-footers/) from the WordPress plugin directory. This plugin lets you add scripts to your site's header or footer without touching theme files.
      </Step>
      <Step title="Add Your Databuddy Script">
        In the plugin settings, paste your Databuddy tracking script in the header section:

        <CodeBlock
          language="html"
          code={`<script
  src="https://cdn.databuddy.cc/databuddy.js"
  data-client-id="YOUR_CLIENT_ID"
  crossorigin="anonymous"
  async
></script>`}
        />
      </Step>
      <Step title="Save and Verify">
        Save your changes and wait a few minutes, then check your [Databuddy dashboard](https://app.databuddy.cc) to confirm tracking is working.

        **Tip**: If the script doesn't load in the header, try adding it to the footer section instead. Some WordPress configurations work better with scripts in the body.
      </Step>
    </Steps>
  </Tab>

  <Tab>
    **Using functions.php**

    For self-hosted WordPress sites, you can add Databuddy directly through your theme's `functions.php` file. This method uses WordPress hooks, which is cleaner than editing HTML directly.

    <Steps>
      <Step title="Access Your Theme Files">
        Navigate to **Appearance > Theme File Editor** in your WordPress dashboard. For safer editing, consider using FTP/SFTP or your hosting control panel's file manager instead.
      </Step>
      <Step title="Open functions.php">
        Open your active theme's `functions.php` file. **Important**: If you're using a parent theme, create a child theme first to prevent losing changes when the theme updates.
      </Step>
      <Step title="Add the Tracking Function">
        Add this code at the end of your `functions.php` file:

        <CodeBlock
          language="php"
          filename="functions.php"
          code={`function add_databuddy_analytics() {
  ?>
  <script
    src="https://cdn.databuddy.cc/databuddy.js"
    data-client-id="YOUR_CLIENT_ID"
    crossorigin="anonymous"
    async
  ></script>
  <?php
}
add_action('wp_head', 'add_databuddy_analytics');`}
        />

        Replace `YOUR_CLIENT_ID` with your actual Client ID from your Databuddy dashboard.
      </Step>
      <Step title="Save and Test">
        Save the file and visit your site. Check the browser console for any errors and verify tracking in your Databuddy dashboard.
      </Step>
    </Steps>
  </Tab>

  <Tab>
    **Using header.php**

    You can also add the script directly to your theme's `header.php` file. This method works but is less flexible than using `functions.php` since it requires direct HTML editing.

    <Steps>
      <Step title="Access Theme Editor">
        Go to **Appearance > Theme File Editor** and select `header.php`. Again, using FTP or a file manager is safer if you're not comfortable editing files directly.
      </Step>
      <Step title="Find the Closing Head Tag">
        Locate the closing `</head>` tag in your `header.php` file. You'll add the script just before this tag.
      </Step>
      <Step title="Insert the Script">
        Add your Databuddy script right before `</head>`:

        <CodeBlock
          language="html"
          filename="header.php"
          code={`<script
  src="https://cdn.databuddy.cc/databuddy.js"
  data-client-id="YOUR_CLIENT_ID"
  crossorigin="anonymous"
  async
></script>
</head>`}
        />
      </Step>
      <Step title="Save Changes">
        Save the file and test your site. Remember to replace `YOUR_CLIENT_ID` with your actual Client ID.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Configuration Options

### Basic Tracking Setup

Enable essential tracking features for most WordPress sites:

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

### Enhanced Tracking Setup

For more detailed analytics, enable additional tracking options:

<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>`}
/>

## WordPress-Specific Integrations

### Form Submission Tracking

Track form submission attempts with a submit handler. To measure successful submissions, use your form plugin’s success callback instead:

<CodeBlock
  language="html"
  code={`<script>
document.addEventListener('submit', function (event) {
  var form = event.target.closest('.wpcf7-form, .gform_wrapper form, .wpforms-form');
  if (form && window.databuddy) {
    databuddy.track('form_submit', {
      form_id: form.id || 'unknown',
      page_path: window.location.pathname
    });
  }
});
</script>`}
/>

## Performance Benefits

Databuddy is designed to have minimal impact on your WordPress site's performance:

- **Asynchronous loading**: Does not block HTML parsing; measure the script’s runtime impact
- **Core Web Vitals**: Can collect field performance data when enabled

## Common Use Cases

### Membership Sites

Track premium content engagement:

<CodeBlock
  language="html"
  code={`<button 
  data-track="premium_content_view" 
  data-content-type="video"
>
  Watch Premium Video
</button>`}
/>

### Blog Analytics

Track clicks anywhere inside an article (the `data-track` attribute fires on click, not on view):

<CodeBlock
  language="html"
  code={`<article 
  data-track="article_click" 
  data-category="tutorials" 
  data-author="author-name"
>
  <!-- Your article content -->
</article>`}
/>

### Lead Generation

Track conversion events and CTA clicks:

<CodeBlock
  language="html"
  code={`<a 
  href="/contact" 
  data-track="cta_click" 
  data-cta-type="contact"
>
  Get Quote
</a>`}
/>

## Troubleshooting

### Script Not Loading

If Databuddy isn't tracking:

1. **Check the Network Tab**: Open developer tools and confirm the script loads from `cdn.databuddy.cc` and requests are sent to `basket.databuddy.cc`
2. **Verify Script Placement**: Ensure the script is in the `<head>` or before `</body>`
3. **Clear Cache**: Clear your WordPress cache (WP Rocket, W3 Total Cache, etc.) and browser cache
4. **Test in Incognito**: Use incognito/private browsing to avoid cache issues

### Plugin Conflicts

If you're experiencing issues:

- Temporarily deactivate other analytics plugins to identify conflicts
- Check if your security plugin is blocking the script
- Verify your theme includes `wp_head()` in `header.php` if using the functions.php method

### Verification

After installation, verify tracking is working:

1. Visit your site and navigate through a few pages
2. Wait 2-3 minutes for data to process
3. Check your [Databuddy dashboard](https://app.databuddy.cc) for page views
4. Use browser dev tools Network tab to confirm requests are being sent

## WordPress Multisite

For WordPress multisite networks:

1. **Individual Site Configuration**: Add the Databuddy script to each site individually using one of the methods above
2. **Unique Client IDs**: Each site should have its own Client ID for separate analytics
3. **Plugin Management**: Consider using the Insert Headers and Footers plugin for easier management across multiple sites

## Related Integrations

<Cards>
  <Card title="Wix" href="/docs/Integrations/wix">
    Simple setup for Wix websites.
  </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 WordPress integration? Contact us at [support@databuddy.cc](mailto:support@databuddy.cc).