DEV Community

Kumar Kislay
Kumar Kislay

Posted on Originally published at forg.to

DataFast Charges $39/Month for This. I Made Free & Open-source Alternative.

#analytics #opensource #react #webdev

I just launched Pixelmoth, an open-source analytics tool that shows you which traffic sources actually make you money.

You shouldn't have to pay $39/month, or $468/year, just to understand your own traffic.

So I built an alternative. Pixelmoth runs on Cloudflare's free plan, keeps your data in your own account, and is licensed under MIT.

Here's what it does and how to get started.

What Is Pixelmoth?

Pixelmoth is a self-hosted web analytics tool built with Cloudflare Workers, D1 (SQLite), and React.

Deploy your own instance, add a tracking script to your website, and see which sources bring visitors who actually pay.

That means going beyond pageviews to answer a more useful question:

Which tweet, article, search result, newsletter, or AI assistant brought me paying customers?

Pixelmoth vs. DataFast

Feature DataFast Pixelmoth
Software cost Around $39/month Free
Hosting Included Cloudflare
Setup Sign up and go Around 10 minutes
Data ownership Hosted platform Your Cloudflare account
Source code Closed source MIT licensed
Per-site fees Subscription-based No per-site fees
Support Managed service Community and self-service

DataFast is a polished, managed product. You don't need to worry about infrastructure, and that convenience has value.

Pixelmoth is for people who prefer owning their data and avoiding another subscription.

It runs within Cloudflare's free-plan limits, which are sufficient for many side projects. If you outgrow them, Cloudflare Workers Paid starts at $5/month.

What Can You Track?

Pixelmoth covers the core features you'd expect from a paid analytics tool.

1. Traffic and Revenue

Track the metrics that matter:

  • Visitors
  • Revenue
  • Conversion rate
  • Revenue per visitor
  • Bounce rate
  • Session duration
  • Real-time visitors

Each metric includes a comparison with the previous period.

2. Charts and Date Ranges

View visitors as a line chart and revenue as bars.

Switch between hourly, daily, weekly, and monthly views. Choose preset ranges, including the last 24 hours, 7, 30, or 90 days, the last 12 months, all time, or a custom period.

You can also move between periods without resetting your filters.

3. Traffic Sources

Find out where your visitors come from:

  • Channels and referrers, including X, Google, ChatGPT, and Reddit
  • UTM campaigns
  • UTM keywords
  • Custom ?ref= tags

For example, tag a launch post with ?ref=launch-tweet to measure its performance.

4. Visitor Details

Understand your audience by country, region, city, browser, operating system, and device.

5. Pages, Clicks, and Funnels

Track:

  • Pageviews and entry pages
  • Exit pages
  • Outbound link clicks
  • Button clicks
  • Custom goals
  • Conversion funnels

For example, build a funnel like this:

Landing page → Pricing page → Checkout

You'll be able to see where visitors drop off.

6. Customer Journeys

The Journey tab connects traffic to individual payments.

For each customer, you can see their source, payment amount, time to conversion, and visitor timeline.

Follow the path from the first visit to pageviews, clicks, and payment to understand what led to a sale.

7. Flexible Filters and Multiple Sites

Click any dashboard row to filter your analytics by that value. You can isolate a campaign, page, country, or other dimension.

You can also manage multiple websites from a single dashboard.

Revenue Attribution: The Main Feature

Most analytics tools tell you where visitors came from. Pixelmoth helps you connect those visits to actual revenue.

Built-In Dodo Payments Integration

If you use Dodo Payments, setup is straightforward:

  1. Add your Pixelmoth webhook URL in Dodo Payments.
  2. Subscribe to payment.succeeded and refund.succeeded.
  3. Add your whsec_... signing secret to your site settings.
  4. Pass visitor cookies as metadata when creating checkout sessions.

Pixelmoth uses this information to match payments with visitors.

If metadata is missing, it can try alternative matching methods, including payment return URLs, previous payments from the same customer, identified email addresses, and checkout-click timing when there's exactly one eligible visitor.

Refunds are deducted from revenue. The Journey tab also shows how each payment was matched, and you can retry matching older payments.

Credit the Source That Brought the Customer

Pixelmoth uses last non-direct attribution.

Suppose someone clicks your launch tweet, returns directly 17 days later, and purchases your product. Pixelmoth credits the tweet because it was the customer's last visit from a non-direct source.

This helps you measure the long-term value of your marketing.

Other Payment Providers

You can also send payment events through the generic API from Stripe, Paddle, Lemon Squeezy, PayPal, or your own billing system.

Example request:

curl -X POST https://YOUR-HOST/api/v1/payments \
  -H "Authorization: Bearer pm_..." \
  -H "Content-Type: application/json" \
  -d '{"transaction_id":"txn_1","amount":29.99,"currency":"USD","visitor_id":"<pm_vid cookie>","email":"jane@acme.com"}'
Enter fullscreen mode Exit fullscreen mode

The same attribution rules apply.

How to Set Up Pixelmoth

You need a free Cloudflare account, Node.js 20+, and Git.

Step 1: Deploy Your Instance

Clone the repository and install dependencies:

git clone https://github.com/iKislay/pixelmoth.git
cd pixelmoth
npm install
npx wrangler login
Enter fullscreen mode Exit fullscreen mode

Create the database:

npx wrangler d1 create pixelmoth
Enter fullscreen mode Exit fullscreen mode

Copy the generated database_id into wrangler.jsonc.

Set your admin password and session secret:

npx wrangler secret put ADMIN_PASSWORD
npx wrangler secret put SESSION_SECRET
Enter fullscreen mode Exit fullscreen mode

Deploy:

npm run deploy
Enter fullscreen mode Exit fullscreen mode

Your dashboard will be available at a URL similar to:

https://pixelmoth.you.workers.dev

Log in and add your first website. You can also connect a custom domain, such as analytics.yourdomain.com.

Step 2: Install the Tracking Script

Add this snippet to the <head> of every page:

<script
  defer
  data-website-id="SITE_ID"
  src="https://YOUR-PIXELMOTH-HOST/js/script.js"
></script>
Enter fullscreen mode Exit fullscreen mode

Replace SITE_ID and YOUR-PIXELMOTH-HOST with your actual values.

Single-page apps built with Next.js and React Router are supported. Subdomains can share visitor identity through a root-domain cookie.

For Next.js, use the following snippet:

import Script from 'next/script';

<Script
  defer
  data-website-id="SITE_ID"
  src="https://YOUR-PIXELMOTH-HOST/js/script.js"
  strategy="afterInteractive"
/>
Enter fullscreen mode Exit fullscreen mode

Step 3: Track Goals and Identify Users

Track button clicks with an HTML attribute:

<button data-pm-goal="signup_click">
  Get started
</button>
Enter fullscreen mode Exit fullscreen mode

Or send a custom goal from JavaScript:

window.pixelmoth('goal', 'signup', { plan: 'pro' });
Enter fullscreen mode Exit fullscreen mode

Identify logged-in users to help match payments later:

window.pixelmoth('identify', {
  user_id: '123',
  email: 'jane@acme.com',
  name: 'Jane',
});
Enter fullscreen mode Exit fullscreen mode

Step 4: Exclude Your Own Traffic

Open the following URL once in each browser you use:

https://yoursite.com/?pm_ignore=true

This prevents your own visits from affecting your analytics.

Step 5: Track Marketing Campaigns

Use Pixelmoth's link builder or add tracking parameters manually:

https://yoursite.com/?utm_source=x&utm_medium=social&utm_campaign=launch-tweet
https://yoursite.com/?ref=launch-tweet
Enter fullscreen mode Exit fullscreen mode

Click the campaign or referral source in your dashboard to see its results.

Step 6: Work Around Ad Blockers

Some ad blockers block third-party analytics scripts and endpoints.

You can reduce this problem by proxying the tracking script and event endpoint through your own domain.

For Next.js, add these rewrites:

async rewrites() {
  return [
    {
      source: '/stats/script.js',
      destination: 'https://YOUR-PIXELMOTH-HOST/js/script.js',
    },
    {
      source: '/stats/event',
      destination: 'https://YOUR-PIXELMOTH-HOST/api/event',
    },
  ];
}
Enter fullscreen mode Exit fullscreen mode

Then load the script through your own domain:

<script
  defer
  data-website-id="SITE_ID"
  data-api="/stats/event"
  src="/stats/script.js"
></script>
Enter fullscreen mode Exit fullscreen mode

The Settings page includes instructions for this setup. It also has a Copy AI prompt button that you can use with Claude Code or Cursor to install the integration in your codebase.

Want to Try It Locally First?

You can run Pixelmoth locally before deploying it:

cp .dev.vars.example .dev.vars
npm run db:migrate:local
npm run build
npm run dev:api
Enter fullscreen mode Exit fullscreen mode

Open http://127.0.0.1:8787 and log in using the password configured in .dev.vars.

You can also load demo data:

npm run seed
Enter fullscreen mode Exit fullscreen mode

This generates 30 days of sample traffic so you can explore the dashboard without connecting a real website.

Limitations to Know

Pixelmoth is not perfect, and no analytics tool is completely accurate.

  • Ad blockers: Some tracking can still be blocked unless you proxy requests through your own domain.
  • Safari: JavaScript cookie restrictions can cause returning visitors to appear as new after about seven days.
  • Bots: User-agent and navigator.webdriver checks filter bots, but some may still get through.
  • Self-hosting: You manage deployment and maintenance yourself. There is no dedicated support team.
  • Cloudflare limits: The free plan supports roughly 100,000 tracked events per day and around 10,000 pageviews per day written to D1. Larger projects may need a paid plan.

Privacy

Pixelmoth does not store raw IP addresses. It uses Cloudflare edge headers to determine visitor location and strips sensitive URL parameters, such as emails, tokens, and keys, in the browser before sending events.

Who Should Use Pixelmoth?

Pixelmoth is built for indie hackers, developers, and small SaaS founders who want to:

  • Identify traffic sources that generate revenue
  • Avoid another monthly analytics subscription
  • Keep control of their data
  • Host their own analytics infrastructure

It may not be the right choice if you want a fully managed service with zero setup and dedicated support. In that case, a hosted product such as DataFast may be a better fit.

But if you want to know whether your launch tweet generated $49 in revenue without paying $39 every month for analytics, Pixelmoth is worth a look.

Try Pixelmoth

GitHub: https://github.com/iKislay/pixelmoth

Pixelmoth is free, open source, and MIT licensed. Deploy it, fork it, report issues, or contribute improvements.

Your money should come from your traffic, not from tracking it.

Top comments (0)