Engineering

Building a Product Discovery Platform with Real-time Analytics using the Dub API

Learn how we built OSS Gallery – a crowdsourced list of the best open-source projects on the web – using Dub's API for real-time click analytics.

Building a Product Discovery Platform with Real-time Analytics using the Dub API

Product discovery platforms like Product Hunt and Betalist have become popular destinations for tech enthusiasts to discover new tools and resources. Every day, thousands of new products are submitted to these platforms, which in turn generates millions of outbound clicks to the products' websites.

Usually, these platforms rely on product analytics tools like Segment, Amplitude, or Mixpanel to track these clicks and other user interactions. However, there are several limitations with these tools:

  1. Latency: These tools are more suited for generating data reports for internal use and are not optimized for user-facing analytics. As a result, their APIs have painstakingly slow response times.
  2. No real-time support: Most analytics tools have a delay of a few minutes to a few hours before the data is available via their API.
  3. Poor DX: These tools are generally not developer friendly – poor documentation, little to no code samples, and lack of support for modern frameworks like React or TypeScript.

In this article, we'll show you how you can leverage Dub's API to integrate real-time user-facing analytics into your products – using OSS Gallery as a real-world example.

OSS Gallery is a crowdsourced list of the best open-source projects on the web. It's a platform for you to discover new open-source tools, libraries, and resources that can help you build better software.

We built OSS Gallery to showcase the capabilities of Dub's API for building real-time user-facing analytics. With Dub's API, we were able to track outgoing clicks from OSS Gallery to a project's GitHub repository + website and display those clicks in real-time on the project page.

Here's an example of how this works on our very own OSS Gallery page:

As you can see, clicks to our website are tracked and displayed in real-time in a nice time-series chart. This provides users with instant feedback on the popularity of a project and helps developers understand how their projects are being discovered.

Here's a high-level overview of the tech stack we used:

  1. Dub's TypeScript SDK: Link creation, click tracking, and real-time analytics.
  2. Tremor: Beautiful time-series charts
  3. Next.js: Server Actions + Form Actions (zero API routes)
  4. Vercel: Serverless Postgres + Deployment

The codebase is fully open-source as well – feel free to take a look at our implementation:

Prefer using a REST API instead? Check out the Dub API reference for more information.

Part 1: Get your Dub API key

To get started, you'll need to sign up for a Dub account and create a workspace.

Then, generate a Dub API key and save it in your .env file as DUB_API_KEY.

With your Dub API key, you can now start creating and editing links programmatically via the Dub API. Here's a simple example using Dub's TypeScript SDK:

create-link.ts
const { shortLink } = await dub.links.create({
  url: "https://github.com/dubinc/dub",
  // here, we pass the unique link ID from our database as the external ID
  // to let us easily update / retrieve analytics for the link later
  externalId: "lnk_xxxxxxxxxxxx",
});
 
console.log(shortLink); // https://go.oss.gallery/kj23naD

You can view the full code snippet above on GitHub.

You might've noticed that we're passing an externalId to the dub.links.create method. This is a unique identifier that you can use to associate the generated short link with an entity inside your database – in our case, a project's link on OSS Gallery.

By setting the externalId, we can then easily update the link or retrieve analytics for it (more on this in Part 3).

Let's take a look at how we can edit the link using the dub.links.update method:

update-link.ts
// updating the link's URL using the link's unique ID from our database
await dub.links.update(`ext_${link.id}`, {
  url: "https://github.com/dubinc/dub-node",
});

As you can see here, we are passing the link's unique ID from our database as the external ID to the dub.links.update method. This allows us to update the link's URL whenever the user updates it in their project settings.

When passing the external ID to the dub.links.update method, make sure to prefix it with ext_ to signify that it's an external ID.

Part 3: Tracking clicks and displaying real-time analytics

Now that we've created and edited links programmatically, the next step is to track clicks and display real-time analytics on the project page.

Thanks to the Dub API, all clicks to the short link are automatically tracked and stored in Dub's database. All we need to do is retrieve these analytics using the dub.analytics.retrieve method:

retrieve-analytics.ts
const data = await dub.analytics.retrieve({
  groupBy: "timeseries",
  externalId: `ext_${link.id}`,
  interval: "30d",
});

Then, we can use a library like Tremor to display the analytics in a beautiful time-series chart:

analytics-chart.tsx
import { AreaChart } from "@tremor/react";
 
export default function AnalyticsChart({
  data,
}: {
  data: { start: string; clicks: number }[];
}) {
  return (
    <AreaChart
      className="-ml-4 h-80"
      data={data}
      index="start"
      categories={["GitHub"]}
      colors={["rose"]}
      valueFormatter={nFormatter} // simple number formatter to
      yAxisWidth={60}
      showAnimation // animate the chart on load
      onValueChange={(v) => console.log(v)}
    />
  );
}

You can view the full code snippet above on GitHub.


To learn more about Dub's Analytics API, you can check out the API reference or the SDK docs.

And that's it! With just a few lines of code, we've integrated real-time user-facing analytics into our product discovery platform, providing valuable insights to the project creators on how their projects are being discovered.

Start building with the Dub API

We hope this article has inspired you to start building real-time analytics experiences with the Dub API. Whether you're building a product discovery platform like OSS Gallery or a simple link shortening service, Dub's API can help you track clicks and display real-time analytics with ease.

Not sure where to start? Check out our TypeScript SDK docs and API reference to get started. We've also created a lightweight example project – affectionately dubbed dublet – to help you get up and running quickly:

Have any questions? Feel free to send us an email or tweet at us – we'd love to help!

Supercharge
your marketing efforts

See why Dub.co is the link management infrastructure of choice for modern marketing teams.