Sleeknote

We support a Sleeknote integration out of the box that tracks when Sleeknote popups are opened.

Requirements

Sleeknote must already be integrated on your website before the Dreamdata Analytics script can track Sleeknote popups.

Setting it up

Use the Dreamdata Analytics wizard to easily enable Sleeknote. You can access the setup wizard from the following URL app.dreamdata.io/<SLUG>/setup inside the Dreamdata app.

For reference, this will add a sleekNote field into your load call, similar to below:

<script id="init-dreamdata">
  ...
  formTracking: {
    sleeknote: {
      eventName: "Opened popup",
    },
  },
  ...
</script>

Sleeknote Tracking on SPAs

Option 1: Use Built-in Automatic Tracking

For SPAs using the NPM package, you can enable Sleeknote tracking directly in the load configuration:

import { AnalyticsBrowser } from "@dreamdata/analytics-next";

export const dreamdata = AnalyticsBrowser.load(
  {
    writeKey: "<YOUR_WRITE_KEY>",
  },
  {
    formTracking: {
      sleeknote: {
        eventName: "Opened popup", // Optional: customize the event name
      },
    },
  }
);

The event listener is registered once when analytics loads and persists across route changes.

Option 2: Manual Implementation

If you need more control or want to implement it yourself, Sleeknote emits a custom DOM event called sleekNote when a popup form is submitted. Here's how to manually track it:

import { AnalyticsBrowser } from "@dreamdata/analytics-next";

export const dreamdata = AnalyticsBrowser.load({
  writeKey: "<YOUR_WRITE_KEY>",
});

// Manual Sleeknote tracking
interface SleeknoteEvent extends Event {
  data: {
    email: string;
    type: string;
  };
}

document.addEventListener(
  "sleekNote",
  async (rawEvent) => {
    const event = rawEvent as unknown as SleeknoteEvent;

    if (event.data.type === "submit") {
      // Identify the user by their email
      await dreamdata.identify(null, {
        email: event.data.email,
      });

      // Track the popup event
      await dreamdata.track("Sleeknote popup", { source: "sleeknote" });
    }
  },
  false
);

Key Points for SPAs

1.One-time registration

The event listener only needs to be registered once (not on each route change) since it's a DOM-level listener that persists.

2.Place in a top-level component

Add this listener in your app's entry point or a top-level component that mounts once (e.g., App.tsx or a dedicated analytics initialization file).