Skip to content

Commit ad23e3d

Browse files
Update integration pages to use Steps component
1 parent b549597 commit ad23e3d

File tree

6 files changed

+245
-217
lines changed

6 files changed

+245
-217
lines changed

fern/products/docs/pages/integrations/analytics/fullstory.mdx

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,39 @@ title: Fullstory
33
description: Learn how to integrate Fern Docs with Fullstory to track user behavior and analytics.
44
---
55

6-
## Add Fullstory to your Docs
7-
86
To add Fullstory to your Docs, you need to add your Fullstory `orgId` to your `docs.yml` file.
97

10-
### Get your Fullstory Org ID
8+
<Steps>
9+
<Step title="Get your Fullstory Org ID">
10+
11+
When you log in to your Fullstory account, your Org ID can be found in the URL of your browser:
12+
13+
```
14+
https://app.fullstory.com/ui/<ORG_ID>/home
15+
```
1116

12-
When you login to your Fullstory account, your Org ID can be found in the URL of your browser.
17+
Alternatively, 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) inside the Fullstory snippet:
1318

14-
```
15-
https://app.fullstory.com/ui/<ORG_ID>/home
16-
```
19+
1. Log in to your Fullstory account.
20+
2. Find **Settings** in a dropdown by clicking your organization's name or logo in the top left.
21+
3. Navigate the sidebar to the Data Capture and Privacy section. Click on **Fullstory Setup**, located under the heading.
22+
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>'`.
1723

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:
24+
See [Fullstory's guide](https://help.fullstory.com/hc/en-us/articles/360047075853-How-do-I-find-my-Fullstory-Org-Id) for visual instructions.
2025

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>'`.
26+
</Step>
2527

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.
28+
<Step title="Add Fullstory to docs.yml">
2829

29-
### Integrate Fullstory with your Docs
30+
In your `docs.yml` file, add your Fullstory Org ID:
3031

31-
In your `docs.yml` file, add your Fullstory Org ID:
32+
<CodeBlock title="docs.yml">
33+
```yaml
34+
analytics:
35+
fullstory:
36+
org-id: ${FULLSTORY_ORG_ID} # reads your org id from environment variables
37+
```
38+
</CodeBlock>
3239

33-
<CodeBlock title="docs.yml">
34-
```yaml
35-
analytics:
36-
fullstory:
37-
org-id: ${FULLSTORY_ORG_ID} # reads your org id from environment variables
38-
```
39-
</CodeBlock>
40+
</Step>
41+
</Steps>

fern/products/docs/pages/integrations/analytics/google.mdx

Lines changed: 52 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,69 +3,76 @@ title: Google Analytics
33
subtitle: Learn how to add Google Analytics to your Fern Docs for tracking and insights.
44
---
55

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/).
77

88
## Google Analytics 4
99

10-
### Prerequisites
11-
1210
Before you begin, ensure you have a Google Analytics 4 property ID. This ID is typically in the format `G-XXXXXXXXXX`.
1311

14-
### Integration steps
12+
<Steps>
13+
<Step title="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+
<CodeBlock title="docs.yml">
18+
```yaml
19+
analytics:
20+
ga4:
21+
measurement-id: G-12345678
22+
```
23+
</CodeBlock>
1524

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:
1926

20-
Example configuration:
27+
<CodeBlock title="docs.yml">
28+
```yaml
29+
analytics:
30+
ga4:
31+
measurement-id: ${GA4_MEASUREMENT_ID} # scans for GA4_MEASUREMENT_ID environment variable
32+
```
33+
</CodeBlock>
2134

22-
<CodeBlock title="docs.yml">
23-
```yaml
24-
analytics:
25-
ga4:
26-
measurement-id: G-12345678
27-
```
28-
</CodeBlock>
35+
</Step>
2936

30-
You can optionally add the ID as an environment variable:
37+
<Step title="Verify your integration">
3138

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.
3940

41+
</Step>
42+
</Steps>
4043

4144
## Google Tag Manager
4245

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+
<Step title="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:
4452

45-
To use Google Tag Manager, obtain a container ID from your Google Tag Manager account. This ID follows the format `GTM-XXXXXX`.
53+
<CodeBlock title="docs.yml">
54+
```yaml
55+
analytics:
56+
gtm:
57+
container-id: GTM-NS32L7KR
58+
```
59+
</CodeBlock>
4660

47-
### Integration steps
61+
You can optionally add the ID as an environment variable:
4862

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+
<CodeBlock title="docs.yml">
64+
```yaml
65+
analytics:
66+
gtm:
67+
container-id: ${GTM_CONTAINER_ID} # scans for GTM_CONTAINER_ID environment variable
68+
```
69+
</CodeBlock>
5270

53-
Example configuration:
71+
</Step>
5472

55-
<CodeBlock title="docs.yml">
56-
```yaml
57-
analytics:
58-
gtm:
59-
container-id: GTM-NS32L7KR
60-
```
61-
</CodeBlock>
73+
<Step title="Verify your integration">
6274

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.
6476

65-
<CodeBlock title="docs.yml">
66-
```yaml
67-
analytics:
68-
gtm:
69-
container-id: ${GTM_CONTAINER_ID} # scans for GTM_CONTAINER_ID environment variable
70-
```
71-
</CodeBlock>
77+
</Step>
78+
</Steps>

0 commit comments

Comments
 (0)