Skip to content

Commit f0e44e8

Browse files
steven-teysteven-tey
authored
Merge pull request #227 from dubinc/client-tracking-lead-sale
Client side lead & sale tracking
2 parents d3d16c7 + 2fb9244 commit f0e44e8

17 files changed

+469
-70
lines changed

‎conversions/leads/client-side.mdx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: Client-side tracking
3+
og:title: Client-side lead tracking with Dub
4+
description: Learn how to track lead conversion events with Dub using client-side tracking
5+
---
6+
7+
import LeadsIntro from "/snippets/leads-intro.mdx";
8+
import ClientSideLeadTracking from "/snippets/client-side-lead-tracking.mdx";
9+
import ClientSideTrackingInstall from "/snippets/client-side-tracking-install.mdx";
10+
import LeadsOutro from "/snippets/leads-outro.mdx";
11+
12+
<LeadsIntro />
13+
14+
## Prerequisites
15+
16+
Before you get started, make sure you follow the [Dub Conversions quickstart guide](/conversions/quickstart) to get Dub Conversions set up for your links:
17+
18+
1. [Enable conversion tracking for your links](/conversions/quickstart#step-1%3A-enable-conversion-tracking-for-your-links)
19+
20+
<ClientSideTrackingInstall />
21+
22+
## Client-side lead tracking
23+
24+
<ClientSideLeadTracking />
25+
26+
<Warning>
27+
Client-side conversion tracking comes with some limitations: - **Ad
28+
blockers**: Users with ad blockers may prevent tracking scripts from loading -
29+
**JavaScript disabled**: Events won't be tracked if users have JavaScript
30+
disabled - **Network issues**: Failed network requests won't retry
31+
automatically - **Privacy concerns**: Some users may block client-side
32+
tracking for privacy reasons For more accurate conversion tracking, consider
33+
using [server-side conversion tracking](/api-reference/endpoint/track-lead).
34+
</Warning>
35+
36+
<LeadsOutro />

‎conversions/leads/introduction.mdx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
---
2-
title: "Introduction"
3-
og:title: "How to track lead conversion events with Dub"
4-
description: "Learn how to track lead conversion events with Dub"
2+
title: Server-side tracking
3+
sidebarTitle: Server-side tracking (recommended)
4+
og:title: Server-side lead tracking with Dub
5+
description: Learn how to track lead conversion events with Dub using server-side tracking
56
---
67

78
import LeadsIntro from "/snippets/leads-intro.mdx";

‎conversions/quickstart.mdx‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,14 @@ import DubClientInstall from "/snippets/dub-client-install.mdx";
88
import DubClientInstallVerify from "/snippets/dub-client-install-verify.mdx";
99
import InstallServerSdksTrackConversions from "/snippets/install-server-sdks-track-conversions.mdx";
1010
import ViewConversions from "/snippets/view-conversions.mdx";
11+
import DubConversionTrackingDemoApps from "/snippets/dub-conversion-tracking-demo-apps.mdx";
1112

1213
<Note>
1314
Conversion tracking require a [Business plan](https://dub.co/pricing)
1415
subscription or higher.
1516
</Note>
1617

17-
[Dub Conversions](https://dub.co/help/article/dub-conversions) is a powerful tool that lets you turn any [short link you create on Dub](https://dub.co/help/article/how-to-create-link) into a full attribution engine. This allows you to understand how well your links are translating to actual users and revenue dollars.
18+
Dub's powerful [attribution platform](https://dub.co/analytics) lets you understand how well your links are translating to actual users and revenue dollars.
1819

1920
<Frame>
2021
<img
@@ -23,7 +24,7 @@ import ViewConversions from "/snippets/view-conversions.mdx";
2324
/>
2425
</Frame>
2526

26-
In this guide, we'll walk you through the steps to get started with Dub Conversions:
27+
In this guide, we'll walk you through the steps to get started with [conversion tracking on Dub](https://dub.co/help/article/dub-conversions):
2728

2829
1. [Enable conversion tracking for your links](#step-1%3A-enable-conversion-tracking-for-your-links)
2930
2. [Install the `@dub/analytics` client-side SDK](#step-2-install-the-dub-analytics-client-side-sdk)
@@ -32,6 +33,11 @@ In this guide, we'll walk you through the steps to get started with Dub Conversi
3233

3334
## Step 1: Enable conversion tracking for your links
3435

36+
<Tip>
37+
If you're using [Dub Partners](/partners/quickstart), you can skip this step
38+
since partner links will have conversion tracking enabled by default.
39+
</Tip>
40+
3541
First, you'll need to enable conversion tracking for your Dub links to be able to start tracking conversions.
3642

3743
There are a few ways to do this:
@@ -139,13 +145,4 @@ Once you've enabled conversion tracking for your links, all your tracked convers
139145

140146
## Example Apps
141147

142-
<CardGroup cols={2}>
143-
<Card
144-
title="Dub Conversions Demo App"
145-
icon="github"
146-
href="https://github.com/dubinc/examples/tree/main/conversions/stripe"
147-
color="#333333"
148-
>
149-
See the full example on GitHub.
150-
</Card>
151-
</CardGroup>
148+
<DubConversionTrackingDemoApps />

‎conversions/sales/client-side.mdx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
title: Client-side tracking
3+
og:title: Client-side sale tracking with Dub
4+
description: Learn how to track sales conversion events with Dub on the client-side
5+
---
6+
7+
import ClientSideTrackingInstall from "/snippets/client-side-tracking-install.mdx";
8+
import ViewConversions from "/snippets/view-conversions.mdx";
9+
import ClientSideSaleTracking from "/snippets/client-side-sale-tracking.mdx";
10+
11+
When it comes to [conversion tracking](/conversions/quickstart), a `sale` event happens when a user purchases your product or service. Examples include:
12+
13+
- Subscribing to a paid plan
14+
- Usage expansion (upgrading from one plan to another)
15+
16+
## Prerequisites
17+
18+
Before you get started, make sure you follow the [Dub Conversions quickstart guide](/conversions/quickstart) to get Dub Conversions set up for your links:
19+
20+
1. [Enable conversion tracking for your links](/conversions/quickstart#step-1%3A-enable-conversion-tracking-for-your-links)
21+
22+
<ClientSideTrackingInstall />
23+
24+
## Client-side sale tracking
25+
26+
<ClientSideSaleTracking />
27+
28+
<Warning>
29+
Client-side conversion tracking comes with some limitations: - **Ad
30+
blockers**: Users with ad blockers may prevent tracking scripts from loading -
31+
**JavaScript disabled**: Events won't be tracked if users have JavaScript
32+
disabled - **Network issues**: Failed network requests won't retry
33+
automatically - **Privacy concerns**: Some users may block client-side
34+
tracking for privacy reasons For more accurate conversion tracking, consider
35+
using [server-side conversion tracking](/api-reference/endpoint/track-sale).
36+
</Warning>
37+
38+
## View conversion results
39+
40+
And that's it – you're all set! You can now sit back, relax, and watch your conversion revenue grow. We provide 3 different views to help you understand your conversions:
41+
42+
<ViewConversions />

‎conversions/sales/introduction.mdx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
---
2-
title: "Introduction"
3-
og:title: "How to track sale conversion events with Dub"
4-
description: "Learn how to track sales conversion events with Dub"
2+
title: Server-side tracking
3+
sidebarTitle: Server-side tracking (recommended)
4+
og:title: Server-side sale tracking with Dub
5+
description: Learn how to track sales conversion events with Dub using server-side tracking
56
---
67

78
import SalesPrerequisites from "/snippets/sales-prerequisites.mdx";

‎docs.json‎

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -61,24 +61,29 @@
6161
"group": "Tracking lead events",
6262
"pages": [
6363
"conversions/leads/introduction",
64-
"conversions/leads/clerk",
65-
"conversions/leads/better-auth",
66-
"conversions/leads/next-auth",
67-
"conversions/leads/supabase",
68-
"conversions/leads/auth0",
69-
"conversions/leads/appwrite",
70-
"conversions/leads/segment",
71-
"conversions/leads/google-tag-manager"
64+
"conversions/leads/client-side",
65+
{
66+
"group": "Auth providers",
67+
"pages": [
68+
"conversions/leads/clerk",
69+
"conversions/leads/better-auth",
70+
"conversions/leads/next-auth",
71+
"conversions/leads/supabase",
72+
"conversions/leads/auth0",
73+
"conversions/leads/appwrite"
74+
]
75+
},
76+
"conversions/leads/segment"
7277
]
7378
},
7479
{
7580
"group": "Tracking sale events",
7681
"pages": [
7782
"conversions/sales/introduction",
83+
"conversions/sales/client-side",
7884
"conversions/sales/stripe",
7985
"conversions/sales/shopify",
80-
"conversions/sales/segment",
81-
"conversions/sales/google-tag-manager"
86+
"conversions/sales/segment"
8287
]
8388
}
8489
]
@@ -153,8 +158,8 @@
153158
{
154159
"group": "Features",
155160
"pages": [
161+
"sdks/client-side/features/click-tracking",
156162
"sdks/client-side/features/conversion-tracking",
157-
"sdks/client-side/features/client-side-click-tracking",
158163
"sdks/client-side/features/cross-domain-tracking",
159164
"sdks/client-side/features/reverse-proxy-support"
160165
]
@@ -227,6 +232,16 @@
227232
"api-reference/endpoint/update-a-commission"
228233
]
229234
},
235+
{
236+
"group": "Domains API",
237+
"pages": [
238+
"api-reference/endpoint/create-a-domain",
239+
"api-reference/endpoint/update-a-domain",
240+
"api-reference/endpoint/delete-a-domain",
241+
"api-reference/endpoint/register-a-domain",
242+
"api-reference/endpoint/check-a-domain-availability"
243+
]
244+
},
230245
{
231246
"group": "Folders API",
232247
"pages": [
@@ -243,16 +258,6 @@
243258
"api-reference/endpoint/retrieve-a-list-of-tags",
244259
"api-reference/endpoint/update-a-tag"
245260
]
246-
},
247-
{
248-
"group": "Domains API",
249-
"pages": [
250-
"api-reference/endpoint/create-a-domain",
251-
"api-reference/endpoint/update-a-domain",
252-
"api-reference/endpoint/delete-a-domain",
253-
"api-reference/endpoint/register-a-domain",
254-
"api-reference/endpoint/check-a-domain-availability"
255-
]
256261
}
257262
]
258263
}
@@ -322,6 +327,10 @@
322327
"source": "/sdks/js-client/overview",
323328
"destination": "/sdks/client-side/installation-guides/react"
324329
},
330+
{
331+
"source": "/sdks/client-side/features/client-side-click-tracking",
332+
"destination": "/sdks/client-side/features/click-tracking"
333+
},
325334
{
326335
"source": "/self-hosting/guide",
327336
"destination": "/self-hosting"

‎examples.mdx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ title: "What can you build with Dub?"
33
description: "Explore ideas and examples of what you can build with the Dub API"
44
---
55

6+
import DubConversionTrackingDemoApps from "/snippets/dub-conversion-tracking-demo-apps.mdx";
7+
68
## Dub Links
79

810
With Dub's [API](/api-reference/introduction), you can integrate Dub's link infrastructure into your application. This includes use cases like:
@@ -57,14 +59,4 @@ You can also combine Dub Conversions with [Webhooks](/concepts/webhooks/introduc
5759
- give both the referrer and referee 1 month free of your product
5860
- send a swag link when a user reaches 5 referrals
5961

60-
<CardGroup cols={2}>
61-
<Card
62-
title="Dub Conversions Demo App"
63-
icon="github"
64-
href="https://github.com/dubinc/examples/tree/main/conversions/stripe"
65-
color="#333333"
66-
>
67-
Example app that shows how to use Dub Conversions with the Dub Typescript
68-
SDK
69-
</Card>
70-
</CardGroup>
62+
<DubConversionTrackingDemoApps />

‎images/conversions/allowed-hostnames.png‎

183 KB
Loading

‎images/conversions/publishable-key.png‎

255 KB
Loading

‎sdks/client-side/features/client-side-click-tracking.mdx‎ renamed to ‎sdks/client-side/features/click-tracking.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Client-side click-tracking
2+
title: Client-side click tracking
33
description: Track clicks on the client-side using query parameters
44
---
55

0 commit comments

Comments
 (0)