Skip to content

Commit c61e158

Browse files
izadoesdevizadoesdev
committed
i hate cursor
1 parent 6d8ed70 commit c61e158

File tree

6 files changed

+71
-110
lines changed

6 files changed

+71
-110
lines changed

‎apps/docs/content/docs/Integrations/framer.mdx‎

Lines changed: 12 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ title: Framer
33
description: Add privacy-first analytics to your Framer site
44
---
55

6-
import { CodeBlock } from "@/components/docs";
7-
86
Databuddy enables you to gather privacy-first analytics on user behavior, capture custom events, track performance metrics, and more within your Framer site - all while maintaining GDPR compliance without cookies.
97

108
> TL;DR: Paste the inline loader below into Framer → Site Settings → General → Custom Code (Start of <head> tag). Replace `YOUR_CLIENT_ID` with your client ID. Publish, then check the dashboard.
@@ -15,10 +13,8 @@ Databuddy enables you to gather privacy-first analytics on user behavior, captur
1513

1614
Navigate to your [Databuddy dashboard](https://app.databuddy.cc) and copy your tracking code snippet:
1715

18-
<CodeBlock
19-
language="html"
20-
filename="Databuddy Tracking Script"
21-
code={`<script>
16+
```html
17+
<script>
2218
(function () {
2319
var script = document.createElement("script");
2420
script.async = true;
@@ -29,8 +25,8 @@ Navigate to your [Databuddy dashboard](https://app.databuddy.cc) and copy your t
2925
script.setAttribute("data-track-errors", "true");
3026
document.head.appendChild(script);
3127
})();
32-
</script>`}
33-
/>
28+
</script>
29+
```
3430

3531
### 2. Add the Script to Your Framer Project
3632

@@ -55,26 +51,22 @@ Once published, you can verify that Databuddy is working by:
5551

5652
Track custom interactions in your Framer components using data attributes:
5753

58-
<CodeBlock
59-
language="html"
60-
filename="Custom Event Tracking"
61-
code={`<!-- Track button clicks -->
54+
```html
55+
<!-- Track button clicks -->
6256
<button data-track="cta_clicked" data-button-type="primary">Get Started</button>
6357

6458
<!-- Track form submissions -->
6559
<form data-track="newsletter_signup" data-form-location="header">
6660
<!-- form content -->
67-
</form>`}
68-
/>
61+
</form>
62+
```
6963

7064
### Performance Monitoring
7165

7266
Enable performance tracking by updating your script configuration:
7367

74-
<CodeBlock
75-
language="html"
76-
filename="Performance Tracking Script"
77-
code={`<script>
68+
```html
69+
<script>
7870
(function () {
7971
var script = document.createElement("script");
8072
script.async = true;
@@ -86,8 +78,8 @@ Enable performance tracking by updating your script configuration:
8678
script.setAttribute("data-track-errors", "true");
8779
document.head.appendChild(script);
8880
})();
89-
</script>`}
90-
/>
81+
</script>
82+
```
9183

9284
## Benefits for Framer Sites
9385

‎apps/docs/content/docs/Integrations/gtm.mdx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ title: Google Tag Manager
33
description: Add Databuddy analytics through Google Tag Manager
44
---
55

6-
import { CodeBlock } from "@/components/docs";
7-
86
Integrate Databuddy with Google Tag Manager for centralized tag management while maintaining privacy-first analytics. Perfect for teams managing multiple tracking tools.
97

108
> TL;DR: In GTM, create a Custom HTML tag with an inline loader that appends `https://cdn.databuddy.cc/databuddy.js` and sets `data-client-id`. Enable desired flags (e.g., `data-track-screen-views`, `data-track-attributes`, `data-track-errors`). Trigger on All Pages and publish.
@@ -27,10 +25,8 @@ Integrate Databuddy with Google Tag Manager for centralized tag management while
2725

2826
> **Important**: GTM sanitizes HTML and removes non-standard attributes like `data-client-id`. Always use `createElement()` and `setAttribute()` as shown below:
2927
30-
<CodeBlock
31-
language="html"
32-
filename="GTM Custom HTML Tag"
33-
code={`<script>
28+
```html
29+
<script>
3430
(function () {
3531
var el = document.createElement("script");
3632
el.src = "https://cdn.databuddy.cc/databuddy.js";
@@ -41,8 +37,8 @@ Integrate Databuddy with Google Tag Manager for centralized tag management while
4137
el.setAttribute("data-track-errors", "true");
4238
document.head.appendChild(el);
4339
})();
44-
</script>`}
45-
/>
40+
</script>
41+
```
4642

4743
4. Name your tag "Databuddy - Analytics Script"
4844

‎apps/docs/content/docs/Integrations/nextjs.mdx‎

Lines changed: 32 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,29 @@ title: Next.js
33
description: Add privacy-first analytics to your Next.js application
44
---
55

6-
import { CodeBlock } from "@/components/docs";
7-
86
Integrate Databuddy with your Next.js application for server-side rendering support, automatic page tracking, and optimal performance.
97

108
## Installation
119

1210
Install the Databuddy SDK:
1311

14-
<CodeBlock
15-
language="bash"
16-
code="npm install @databuddy/sdk"
17-
/>
12+
```bash
13+
npm install @databuddy/sdk
14+
```
1815

1916
or with yarn:
2017

21-
<CodeBlock
22-
language="bash"
23-
code="yarn add @databuddy/sdk"
24-
/>
18+
```bash
19+
yarn add @databuddy/sdk
20+
```
2521

2622
## App Router Setup (Next.js 13+)
2723

2824
### 1. Add Script Component to Layout
2925

30-
<CodeBlock
31-
language="tsx"
32-
filename="app/layout.tsx"
33-
code={`import { Databuddy } from '@databuddy/sdk';
26+
```tsx
27+
// app/layout.tsx
28+
import { Databuddy } from '@databuddy/sdk';
3429

3530
export default function RootLayout({
3631
children,
@@ -50,17 +45,16 @@ export default function RootLayout({
5045
</body>
5146
</html>
5247
);
53-
}`}
54-
/>
48+
}
49+
```
5550

5651
### 2. Track Route Changes (Optional)
5752

5853
If you need custom route tracking:
5954

60-
<CodeBlock
61-
language="tsx"
62-
filename="app/analytics.tsx"
63-
code={`'use client';
55+
```tsx
56+
// app/analytics.tsx
57+
'use client';
6458

6559
import { useEffect } from 'react';
6660
import { usePathname, useSearchParams } from 'next/navigation';
@@ -80,15 +74,14 @@ export function Analytics() {
8074
}, [pathname, searchParams]);
8175

8276
return null;
83-
}`}
84-
/>
77+
}
78+
```
8579

8680
Then add to your root layout:
8781

88-
<CodeBlock
89-
language="tsx"
90-
filename="app/layout.tsx"
91-
code={`import { Databuddy } from '@databuddy/sdk';
82+
```tsx
83+
// app/layout.tsx
84+
import { Databuddy } from '@databuddy/sdk';
9285
import { Analytics } from './analytics';
9386

9487
export default function RootLayout({
@@ -108,17 +101,16 @@ export default function RootLayout({
108101
</body>
109102
</html>
110103
);
111-
}`}
112-
/>
104+
}
105+
```
113106

114107
## Pages Router Setup (Next.js 12 and below)
115108

116109
### 1. Add to _app.tsx
117110

118-
<CodeBlock
119-
language="tsx"
120-
filename="pages/_app.tsx"
121-
code={`import type { AppProps } from 'next/app';
111+
```tsx
112+
// pages/_app.tsx
113+
import type { AppProps } from 'next/app';
122114
import { Databuddy } from '@databuddy/sdk';
123115
import { useRouter } from 'next/router';
124116
import { useEffect } from 'react';
@@ -153,8 +145,8 @@ function MyApp({ Component, pageProps }: AppProps) {
153145
);
154146
}
155147

156-
export default MyApp;`}
157-
/>
148+
export default MyApp;
149+
```
158150

159151
### Alternative: Manual Script in _document.tsx
160152

@@ -188,19 +180,15 @@ export default function Document() {
188180

189181
Add to your `.env.local`:
190182

191-
<CodeBlock
192-
language="bash"
193-
filename=".env.local"
194-
code="NEXT_PUBLIC_DATABUDDY_CLIENT_ID=your_client_id_here"
195-
/>
183+
```tsx
184+
NEXT_PUBLIC_DATABUDDY_CLIENT_ID=your_client_id_here
185+
```
196186

197187
For production, add to your deployment environment:
198188

199-
<CodeBlock
200-
language="bash"
201-
filename="Production Environment"
202-
code="NEXT_PUBLIC_DATABUDDY_CLIENT_ID=your_production_client_id"
203-
/>
189+
```tsx
190+
NEXT_PUBLIC_DATABUDDY_CLIENT_ID=your_production_client_id
191+
```
204192

205193
## Tracking Events
206194

‎apps/docs/content/docs/Integrations/react.mdx‎

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,32 @@
22
title: React
33
description: Integrate privacy-first analytics in your React application
44
---
5-
6-
import { CodeBlock } from "@/components/docs";
75

86
Add Databuddy's privacy-first analytics to your React application with TypeScript support and modern best practices.
97

108
## Installation
119

1210
Install the Databuddy SDK:
1311

14-
<CodeBlock
15-
language="bash"
16-
code="npm install @databuddy/sdk"
17-
/>
12+
```bash
13+
npm install @databuddy/sdk
14+
```
1815

1916
or with yarn:
2017

21-
<CodeBlock
22-
language="bash"
23-
code="yarn add @databuddy/sdk"
24-
/>
18+
```bash
19+
yarn add @databuddy/sdk
20+
```
2521

2622
## Basic Setup
2723

2824
### 1. Add the Script Component
2925

3026
Add the `<Databuddy />` component to inject the tracking script:
3127

32-
<CodeBlock
33-
language="tsx"
34-
filename="App.tsx"
35-
code={`import { Databuddy } from '@databuddy/sdk';
28+
```tsx
29+
// App.tsx
30+
import { Databuddy } from '@databuddy/sdk';
3631

3732
function App() {
3833
return (
@@ -47,8 +42,8 @@ function App() {
4742
);
4843
}
4944

50-
export default App;`}
51-
/>
45+
export default App;
46+
```
5247

5348
### 2. Track Page Views
5449

‎apps/docs/content/docs/Integrations/shopify.mdx‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ title: Shopify
33
description: Add privacy-first analytics to your Shopify store
44
---
55

6-
import { CodeBlock } from "@/components/docs";
7-
86
Add Databuddy's privacy-first analytics to your Shopify store to track customer behavior, e-commerce events, and improve conversion rates while maintaining GDPR compliance.
97

108
## Installation Methods
@@ -18,18 +16,16 @@ Add Databuddy directly to your Shopify theme:
1816
3. Open `theme.liquid` in the Layout folder
1917
4. Add your Databuddy script before the closing `</head>` tag:
2018

21-
<CodeBlock
22-
language="html"
23-
filename="theme.liquid"
24-
code={`<script
19+
```html
20+
<script
2521
src="https://cdn.databuddy.cc/databuddy.js"
2622
data-client-id="YOUR_SITE_ID"
2723
data-track-screen-views="true"
2824
data-track-attributes="true"
2925
data-track-outgoing-links="true"
3026
async
31-
></script>`}
32-
/>
27+
></script>
28+
```
3329

3430
### Method 2: Google Tag Manager
3531

@@ -38,10 +34,8 @@ If you're using Google Tag Manager:
3834
1. In GTM, create a new **Custom HTML** tag
3935
2. Add the Databuddy script:
4036

41-
<CodeBlock
42-
language="html"
43-
filename="GTM Custom HTML Tag"
44-
code={`<script>
37+
```html
38+
<script>
4539
(function() {
4640
var script = document.createElement('script');
4741
script.src = 'https://cdn.databuddy.cc/databuddy.js';
@@ -51,8 +45,8 @@ If you're using Google Tag Manager:
5145
script.async = true;
5246
document.head.appendChild(script);
5347
})();
54-
</script>`}
55-
/>
48+
</script>
49+
```
5650

5751
3. Set trigger to **All Pages**
5852
4. Publish the container

0 commit comments

Comments
 (0)