You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: fern/products/docs/pages/integrations/analytics/fullstory.mdx
+21-24Lines changed: 21 additions & 24 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,37 +3,34 @@ title: Fullstory
3
3
description: Learn how to integrate Fern Docs with Fullstory to track user behavior and analytics.
4
4
---
5
5
6
-
## Add Fullstory to your Docs
6
+
Integrate Fullstory to capture session replays and user interactions in your documentation.
7
7
8
-
To add Fullstory to your Docs, you need to add your Fullstory `orgId` to your `docs.yml` file.
8
+
<Steps>
9
+
<Steptitle="Get your Fullstory Org ID">
9
10
10
-
### Get your Fullstory Org ID
11
+
Your Org ID appears in the URL when you log in to Fullstory:
11
12
12
-
When you login to your Fullstory account, your Org ID can be found in the URL of your browser.
13
+
```
14
+
https://app.fullstory.com/ui/<ORG_ID>/home
15
+
```
13
16
14
-
```
15
-
https://app.fullstory.com/ui/<ORG_ID>/home
16
-
```
17
+
Alternatively, find it in **Settings > Data Capture and Privacy > Fullstory Setup** in the snippet code as `window['_fs_org']`.
17
18
18
-
Additionally, you can find your Org ID in [Settings > Data Capture and Privacy > Fullstory Setup](https://help.fullstory.com/hc/en-us/articles/360047075853-How-do-I-find-my-Fullstory-Org-Id#:~:text=You%20can%20find%20your%20Org,embedded%20in%20the%20Fullstory%20snippet.&text=More%20information%20about%20installation%20and,the%20URL%20of%20your%20browser.)
19
-
inside the Fullstory snippet:
19
+
See [Fullstory's guide](https://help.fullstory.com/hc/en-us/articles/360047075853-How-do-I-find-my-Fullstory-Org-Id) for more details.
20
20
21
-
1. Log in to your Fullstory account.
22
-
2. Find **Settings** in a dropdown by clicking your organization's name or logo in the top left.
23
-
3. Navigate the sidebar to the Data Capture and Privacy section. Click on "Fullstory Setup", located under the heading.
24
-
4. Retrieve the Org Id from the snippet, where it is assigned to `window['_fs_org']`. It will appear as `window['_fs_org'] = '<ORG_ID>'`.
21
+
</Step>
25
22
26
-
You can find visual instructions in [Fullstory's guide](https://help.fullstory.com/hc/en-us/articles/360047075853-How-do-I-find-my-Fullstory-Org-Id#:~:text=You%20can%20find%20your%20Org,embedded%20in%20the%20Fullstory%20snippet.&text=More%20information%20about%20installation%20and,the%20URL%20of%20your%20browser.)
27
-
about this topic.
23
+
<Steptitle="Add Fullstory to `docs.yml`">
28
24
29
-
### Integrate Fullstory with your Docs
25
+
In your `docs.yml` file, add your Fullstory Org ID:
30
26
31
-
In your `docs.yml` file, add your Fullstory Org ID:
27
+
<CodeBlocktitle="docs.yml">
28
+
```yaml
29
+
analytics:
30
+
fullstory:
31
+
org-id: ${FULLSTORY_ORG_ID} # reads your org id from environment variables
32
+
```
33
+
</CodeBlock>
32
34
33
-
<CodeBlocktitle="docs.yml">
34
-
```yaml
35
-
analytics:
36
-
fullstory:
37
-
org-id: ${FULLSTORY_ORG_ID} # reads your org id from environment variables
Copy file name to clipboardExpand all lines: fern/products/docs/pages/integrations/analytics/google.mdx
+52-45Lines changed: 52 additions & 45 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,69 +3,76 @@ title: Google Analytics
3
3
subtitle: Learn how to add Google Analytics to your Fern Docs for tracking and insights.
4
4
---
5
5
6
-
Fern supports integrating with both [Google Analytics 4](https://developers.google.com/analytics) and [Google Tag Manager](https://tagmanager.google.com/). Follow the steps below to configure these services.
6
+
Fern supports integrating with both [Google Analytics 4](https://developers.google.com/analytics) and [Google Tag Manager](https://tagmanager.google.com/).
7
7
8
8
## Google Analytics 4
9
9
10
-
### Prerequisites
11
-
12
10
Before you begin, ensure you have a Google Analytics 4 property ID. This ID is typically in the format `G-XXXXXXXXXX`.
13
11
14
-
### Integration steps
12
+
<Steps>
13
+
<Steptitle="Add GA4 to `docs.yml`">
14
+
15
+
Open your `docs.yml` file and add your Google Analytics 4 property ID under the `measurement-id` key:
16
+
17
+
<CodeBlocktitle="docs.yml">
18
+
```yaml
19
+
analytics:
20
+
ga4:
21
+
measurement-id: G-12345678
22
+
```
23
+
</CodeBlock>
15
24
16
-
1. Open your `docs.yml` file.
17
-
2. Add your Google Analytics 4 property ID under the `measurement-id` key.
18
-
3. Verify data in Google Analytics. Note that it may take 24–48 hours for website traffic data to start appearing. You can check your browser's developer tools or the network tab to confirm that the analytics script is loading correctly.
25
+
You can optionally add the ID as an environment variable:
19
26
20
-
Example configuration:
27
+
<CodeBlocktitle="docs.yml">
28
+
```yaml
29
+
analytics:
30
+
ga4:
31
+
measurement-id: ${GA4_MEASUREMENT_ID} # scans for GA4_MEASUREMENT_ID environment variable
32
+
```
33
+
</CodeBlock>
21
34
22
-
<CodeBlocktitle="docs.yml">
23
-
```yaml
24
-
analytics:
25
-
ga4:
26
-
measurement-id: G-12345678
27
-
```
28
-
</CodeBlock>
35
+
</Step>
29
36
30
-
You can optionally add the ID as an environment variable:
37
+
<Steptitle="Verify your integration">
31
38
32
-
<CodeBlock title="docs.yml">
33
-
```yaml
34
-
analytics:
35
-
ga4:
36
-
measurement-id: ${GA4_MEASUREMENT_ID} # scans for GA4_MEASUREMENT_ID environment variable
37
-
```
38
-
</CodeBlock>
39
+
Check your browser's developer tools or the network tab to confirm that the analytics script is loading correctly. Note that it may take 24–48 hours for website traffic data to start appearing in Google Analytics.
39
40
41
+
</Step>
42
+
</Steps>
40
43
41
44
## Google Tag Manager
42
45
43
-
### Prerequisites
46
+
Before you begin, obtain a container ID from your Google Tag Manager account. This ID follows the format `GTM-XXXXXX`.
47
+
48
+
<Steps>
49
+
<Steptitle="Add GTM to `docs.yml`">
50
+
51
+
Open your `docs.yml` file and add your Google Tag Manager container ID under the `container-id` key:
44
52
45
-
To use Google Tag Manager, obtain a container ID from your Google Tag Manager account. This ID follows the format `GTM-XXXXXX`.
53
+
<CodeBlocktitle="docs.yml">
54
+
```yaml
55
+
analytics:
56
+
gtm:
57
+
container-id: GTM-NS32L7KR
58
+
```
59
+
</CodeBlock>
46
60
47
-
### Integration steps
61
+
You can optionally add the ID as an environment variable:
48
62
49
-
1. Open your `docs.yml` file.
50
-
2. Add your Google Tag Manager container ID under the container-id key.
51
-
3. Verify data in Google Analytics. Note that it may take 24–48 hours for website traffic data to start appearing. You can check your browser's developer tools or the network tab to confirm that the analytics script is loading correctly.
63
+
<CodeBlocktitle="docs.yml">
64
+
```yaml
65
+
analytics:
66
+
gtm:
67
+
container-id: ${GTM_CONTAINER_ID} # scans for GTM_CONTAINER_ID environment variable
68
+
```
69
+
</CodeBlock>
52
70
53
-
Example configuration:
71
+
</Step>
54
72
55
-
<CodeBlock title="docs.yml">
56
-
```yaml
57
-
analytics:
58
-
gtm:
59
-
container-id: GTM-NS32L7KR
60
-
```
61
-
</CodeBlock>
73
+
<Steptitle="Verify your integration">
62
74
63
-
You can optionally add the ID as an environment variable:
75
+
Check your browser's developer tools or the network tab to confirm that the analytics script is loading correctly. Note that it may take 24–48 hours for website traffic data to start appearing in Google Analytics.
64
76
65
-
<CodeBlock title="docs.yml">
66
-
```yaml
67
-
analytics:
68
-
gtm:
69
-
container-id: ${GTM_CONTAINER_ID} # scans for GTM_CONTAINER_ID environment variable
description: Learn how to integrate Fern Docs with Mixpanel to track user behavior and analytics.
4
4
---
5
5
6
-
## Add Mixpanel to your Docs
7
-
8
-
To add Mixpanel to your Docs, you need to create a custom JavaScript file and configure it in your `docs.yml` file using your Mixpanel project token.
9
-
10
-
### Get your Mixpanel Project Token
11
-
12
-
1. Log in to your Mixpanel account.
13
-
2. Navigate to the project you want to track.
14
-
3. Go to **Settings** > **Project Settings**.
15
-
4. Copy your **Project Token** from the project details.
16
-
17
-
### Integration Steps
18
-
19
-
1.**Create a scripts folder**: Under your `fern` directory, create a `scripts` folder if it doesn't already exist.
20
-
21
-
2.**Create the Mixpanel script**: In the `scripts` folder, create a file named `mixpanel.js`.
22
-
23
-
3.**Add the Mixpanel tracking code**: In your `mixpanel.js` file, add the following script (replace `YOUR_PROJECT_TOKEN` with your actual project token):
4.**Configure your docs.yml**: In your `docs.yml` file, add the JavaScript file configuration:
84
-
85
-
<CodeBlocktitle="docs.yml">
86
-
```yaml
87
-
js:
88
-
- path: ./scripts/mixpanel.js
89
-
strategy: beforeInteractive
90
-
```
91
-
</CodeBlock>
92
-
93
-
### Security Considerations
94
-
95
-
Since Mixpanel tracking is implemented using client-side JavaScript, your project token will be visible in the browser's source code. This is normal and expected behavior for client-side analytics implementations. Mixpanel project tokens are designed to be publicly visible and are safe to expose on the client side.
96
-
97
-
### Testing Your Integration
98
-
99
-
1. **Start your development server**: Run `fern docs dev` to build and start your Fern docs locally (typically on `http://localhost:3000`).
100
-
101
-
2. **Verify script loading**: Open your browser's developer tools and check the Console and Network tabs to confirm the Mixpanel script is loading correctly.
102
-
103
-
3. **Test event tracking**: Navigate through your docs site and verify that events are being tracked.
104
-
105
-
4. **Check Mixpanel dashboard**: Go to your Mixpanel project dashboard to verify that events are being received correctly.
106
-
107
-
### Additional Resources
108
-
109
-
For more information on Mixpanel's JavaScript SDK and advanced configuration options, visit the [Mixpanel JavaScript SDK documentation](https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript).
6
+
Integrate Mixpanel to track product analytics and user behavior in your documentation, including event tracking, funnel analysis, and user cohorts.
7
+
8
+
<Steps>
9
+
<Steptitle="Get your Mixpanel project token">
10
+
11
+
In your Mixpanel project, go to **Settings > Project Settings** and copy your **Project Token**.
12
+
13
+
<Note>
14
+
Your project token will be visible in the browser's source code. This is normal for client-side analytics and Mixpanel tokens are designed to be safely exposed on the client side.
15
+
</Note>
16
+
17
+
</Step>
18
+
19
+
<Steptitle="Create the Mixpanel script">
20
+
21
+
Under your `fern` directory, create a `scripts` folder if it doesn't already exist.
22
+
23
+
In the `scripts` folder, create a file named `mixpanel.js` and add the following script (replace `YOUR_PROJECT_TOKEN` with your actual project token):
In your `docs.yml` file, add the JavaScript file configuration:
88
+
89
+
<CodeBlocktitle="docs.yml">
90
+
```yaml
91
+
js:
92
+
- path: ./scripts/mixpanel.js
93
+
strategy: beforeInteractive
94
+
```
95
+
</CodeBlock>
96
+
97
+
</Step>
98
+
99
+
<Steptitle="Test your integration">
100
+
101
+
Run `fern docs dev` and check your browser's developer tools to confirm the Mixpanel script loads correctly. Navigate through your docs and verify events appear in your Mixpanel dashboard.
102
+
103
+
For advanced configuration options, see the [Mixpanel JavaScript SDK documentation](https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript).
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?v=4&size=40){kind=avatar}
![fern-api[bot]](https://avatars.githubusercontent.com/in/244756?v=4&size=40){kind=avatar}
0 commit comments