From f1b328f2eba899491d6ac876af6db40bf7d76c11 Mon Sep 17 00:00:00 2001 From: Kiran K Date: Wed, 30 Jul 2025 19:07:30 +0530 Subject: [PATCH 1/2] Enhance client-side click tracking documentation with examples for using `useAnalytics()` and `trackClick()` functions, including code snippets for React and other frameworks. --- .../features/client-side-click-tracking.mdx | 135 ++++++++++++++---- 1 file changed, 106 insertions(+), 29 deletions(-) diff --git a/sdks/client-side/features/client-side-click-tracking.mdx b/sdks/client-side/features/client-side-click-tracking.mdx index 049a484a..fe69fad5 100644 --- a/sdks/client-side/features/client-side-click-tracking.mdx +++ b/sdks/client-side/features/client-side-click-tracking.mdx @@ -143,33 +143,56 @@ This data will be stored as a JSON-stringified object in the `dub_partner_data` } ``` - - The `name` and `image` fields in the partner data are URL-encoded when stored - in the cookie. Make sure to decode these values using `decodeURIComponent()` - when accessing them from the cookie. However, if you're using `js-cookie` as - shown in the example below, the decoding is handled automatically for you. - - -To access this cookie data, we recommend using a cookie library like [`js-cookie`](https://github.com/js-cookie/js-cookie) – here's an example: - -```js -import Cookies from "js-cookie"; - -const dubPartnerData = Cookies.get("dub_partner_data"); -const { partner, discount } = dubPartnerData ? JSON.parse(dubPartnerData) : {}; - -// Display a banner that says: _"John referred you to Acme and gave you 25% off"_ - -return ( -
- {name} -

- {name} referred you to Acme and gave you {amount} {type} off -

-
-); +You can access partner and discount data in your application code using the `useAnalytics()` hook. If you’re working in a non-React environment, you can use the `DubAnalytics` object directly. + +Here is a quick example of how you can display a discount banner using the `useAnalytics()` hook: + + + +```typescript React/Next.js +import { useAnalytics } from "@dub/analytics/react"; + +function DiscountBanner() { + const { partner, discount } = useAnalytics(); + + if (!partner || !discount) { + return null; + } + + return ( +
+ {partner.name} +

+ {partner.name} referred you to Acme and gave you {discount.amount}{" "} + {discount.type} off +

+
+ ); +} ``` +```javascript Other Frameworks +dubAnalytics("ready", function () { + if (DubAnalytics.partner && DubAnalytics.discount) { + const banner = document.createElement("div"); + + banner.innerHTML = ` +
+ ${DubAnalytics.partner.name} +

${DubAnalytics.partner.name} referred you to Acme and gave you ${DubAnalytics.discount.amount} ${DubAnalytics.discount.type} off

+
+ `; + document.body.appendChild(banner); + } +}); +``` + + + Here's an example of how the discount banner will look like: @@ -189,10 +212,64 @@ This is helpful for tracking clicks on: - Cal.com's booking pages (e.g. [cal.com/steven](https://cal.com/steven)) - Tella's video pages (e.g. [tella.tv/video/:slug](https://www.tella.tv/video/cluvcfcfi00tw0fjrgizr4pw2)) - - This feature is coming soon. If you'd like early access, please [contact - us](https://dub.co/contact/support). - +The `trackClick()` function allows you to manually trigger click events from your application code. This is useful when you want to track clicks that happen programmatically. + +The `trackClick()` function accepts an object with the following parameters: + + + The domain of the short link (e.g. `getacme.link`) + + + + The short link slug (e.g. `john`) + + +Here's how you can use the `trackClick()` function in your application: + + + +```typescript React/Next.js +import { useAnalytics } from "@dub/analytics/react"; +import { useRouter } from "next/router"; + +function BookingPage() { + const router = useRouter(); + const { trackClick } = useAnalytics(); + + // Extract the key from the URL path (e.g., /john -> john) + const { slug: key } = router.query; + + useEffect(() => { + if (key) { + trackClick({ + domain: "getacme.link", + key, + }); + } + }, [key, trackClick]); + + return <>; +} +``` + +```javascript Other Frameworks +document.addEventListener("DOMContentLoaded", function () { + // Extract the key from the URL path (e.g., /john -> john) + const pathSegments = window.location.pathname.split("/"); + const key = pathSegments[1]; + + if (key) { + dubAnalytics.trackClick({ + domain: "getacme.link", + key, + }); + } +}); + +// This will track clicks for URLs like cal.com/john +``` + + ## Differences from server-side click-tracking From d352e83bd0cb54d09f80a1e769d0c4fd46bade4c Mon Sep 17 00:00:00 2001 From: Kiran K Date: Wed, 30 Jul 2025 19:08:23 +0530 Subject: [PATCH 2/2] Update client-side-click-tracking.mdx --- sdks/client-side/features/client-side-click-tracking.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/sdks/client-side/features/client-side-click-tracking.mdx b/sdks/client-side/features/client-side-click-tracking.mdx index fe69fad5..77119182 100644 --- a/sdks/client-side/features/client-side-click-tracking.mdx +++ b/sdks/client-side/features/client-side-click-tracking.mdx @@ -150,6 +150,7 @@ Here is a quick example of how you can display a discount banner using the `useA ```typescript React/Next.js +// Display a banner that says: _"John referred you to Acme and gave you 25% off"_ import { useAnalytics } from "@dub/analytics/react"; function DiscountBanner() { @@ -176,6 +177,7 @@ function DiscountBanner() { ``` ```javascript Other Frameworks +// Display a banner that says: _"John referred you to Acme and gave you 25% off"_ dubAnalytics("ready", function () { if (DubAnalytics.partner && DubAnalytics.discount) { const banner = document.createElement("div");