From 874ecbaf4994f1bbe60ea09d1cc8b37bb31d2424 Mon Sep 17 00:00:00 2001 From: Fern Support <126544928+fern-support@users.noreply.github.com> Date: Tue, 5 Aug 2025 17:10:01 -0400 Subject: [PATCH 1/5] Added a page on Heap integration I mimicked the page for Mixpanel --- fern/heap.mdx | 73 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 fern/heap.mdx diff --git a/fern/heap.mdx b/fern/heap.mdx new file mode 100644 index 000000000..21002cc6b --- /dev/null +++ b/fern/heap.mdx @@ -0,0 +1,73 @@ +--- +title: Heap +description: >- + Learn how to integrate Fern Docs with Heap to track user behavior and + analytics. +--- + +## Add Heap to your Docs + +To add Heap to your Docs, you need to create a custom JavaScript file and configure it in your `docs.yml` file using your Heap environment ID. + +### Get your Heap Environment ID + +1. Log in to your Heap account. +2. Navigate to the project you want to track. +3. Go to **Install Heap** > **Web Installation**. +4. Copy your **Environment ID** from the installation snippet (it will look like a numeric ID such as `358239876`). + +### Integration Steps + +1. **Create a scripts folder**: Under your `fern` directory, create a `scripts` folder if it doesn't already exist. + +2. **Create the Heap script**: In the `scripts` folder, create a file named `heap.js`. + +3. **Add the Heap tracking code**: In your `heap.js` file, add the following script (replace `YOUR_ENVIRONMENT_ID` with your actual environment ID): + + +```js +// Heap Analytics Integration +window.heapReadyCb=window.heapReadyCb||[],window.heap=window.heap||[],heap.load=function(e,t){window.heap.envId=e,window.heap.clientConfig=t=t||{},window.heap.clientConfig.shouldFetchServerConfig=!1;var a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src="https://cdn.us.heap-api.com/config/"+e+"/heap_config.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(a,r);var n=["init","startTracking","stopTracking","track","resetIdentity","identify","getSessionId","getUserId","getIdentity","addUserProperties","addEventProperties","removeEventProperty","clearEventProperties","addAccountProperties","addAdapter","addTransformer","addTransformerFn","onReady","addPageviewProperties","removePageviewProperty","clearPageviewProperties","trackPageview"],i=function(e){return function(){var t=Array.prototype.slice.call(arguments,0);window.heapReadyCb.push({name:e,fn:function(){heap[e]&&heap[e].apply(heap,t)}})}};for(var p=0;p + +4. **Configure your docs.yml**: In your `docs.yml` file, add the JavaScript file configuration: + + +```yaml +js: + - path: ./scripts/heap.js + strategy: beforeInteractive +``` + + +### Security Considerations + +Since Heap tracking is implemented using client-side JavaScript, your environment ID will be visible in the browser's source code. This is normal and expected behavior for client-side analytics implementations. Heap environment IDs are designed to be publicly visible and are safe to expose on the client side. + +### Testing Your Integration + +1. **Start your development server**: Run `fern docs dev` to build and start your Fern docs locally (typically on `http://localhost:3000`). + +2. **Verify script loading**: Open your browser's developer tools and check the Console and Network tabs to confirm the Heap script is loading correctly. Look for successful requests to `heap-api.com`. + +3. **Test event tracking**: Navigate through your docs site and verify that events are being tracked. Heap automatically captures page views, clicks, and form interactions. + +4. **Check Heap dashboard**: Go to your Heap project dashboard to verify that events are being received correctly. The setup page should indicate when data is being received. + +### What Heap Automatically Tracks + +Once integrated, Heap will automatically capture: + +- **Page views**: Every page visit with full URL information +- **Click events**: All button clicks, link clicks, and interactive elements +- **Form interactions**: Form submissions and field changes +- **Session data**: User sessions, return visits, and session duration +- **User behavior**: Scroll depth, time on page, and navigation patterns + +### Additional Resources + +For more information on Heap's JavaScript SDK and advanced configuration options, visit the [Heap JavaScript SDK documentation](https://developers.heap.io/reference/web). You can also explore [Heap's getting started guide](https://help.heap.io/hc/en-us/categories/13662488537116-Getting-Started) for more comprehensive setup instructions. \ No newline at end of file From 60e7051daec772a014914dbe71eee4a0e7c68f02 Mon Sep 17 00:00:00 2001 From: Fern Support <126544928+fern-support@users.noreply.github.com> Date: Tue, 5 Aug 2025 17:12:41 -0400 Subject: [PATCH 2/5] Update docs.yml --- fern/products/docs/docs.yml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/fern/products/docs/docs.yml b/fern/products/docs/docs.yml index 835af3ef3..4ee84dbf1 100644 --- a/fern/products/docs/docs.yml +++ b/fern/products/docs/docs.yml @@ -203,6 +203,8 @@ navigation: path: ./pages/integrations/analytics/segment.mdx - page: Mixpanel path: ./pages/integrations/analytics/mixpanel.mdx + - page: Heap + path: ./pages/integrations/analytics/heap.mdx - section: Support contents: - page: Intercom @@ -224,4 +226,4 @@ navigation: path: ./pages/developer-tools/view-markdown.mdx - changelog: ./pages/changelog icon: fa-regular fa-clock-rotate-left - \ No newline at end of file + From d68389a639d94428c59b6e1de3b3f3449e8badf3 Mon Sep 17 00:00:00 2001 From: Fern Support <126544928+fern-support@users.noreply.github.com> Date: Tue, 5 Aug 2025 17:18:39 -0400 Subject: [PATCH 3/5] Delete fern/heap.mdx Added to the wrong location --- fern/heap.mdx | 73 --------------------------------------------------- 1 file changed, 73 deletions(-) delete mode 100644 fern/heap.mdx diff --git a/fern/heap.mdx b/fern/heap.mdx deleted file mode 100644 index 21002cc6b..000000000 --- a/fern/heap.mdx +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Heap -description: >- - Learn how to integrate Fern Docs with Heap to track user behavior and - analytics. ---- - -## Add Heap to your Docs - -To add Heap to your Docs, you need to create a custom JavaScript file and configure it in your `docs.yml` file using your Heap environment ID. - -### Get your Heap Environment ID - -1. Log in to your Heap account. -2. Navigate to the project you want to track. -3. Go to **Install Heap** > **Web Installation**. -4. Copy your **Environment ID** from the installation snippet (it will look like a numeric ID such as `358239876`). - -### Integration Steps - -1. **Create a scripts folder**: Under your `fern` directory, create a `scripts` folder if it doesn't already exist. - -2. **Create the Heap script**: In the `scripts` folder, create a file named `heap.js`. - -3. **Add the Heap tracking code**: In your `heap.js` file, add the following script (replace `YOUR_ENVIRONMENT_ID` with your actual environment ID): - - -```js -// Heap Analytics Integration -window.heapReadyCb=window.heapReadyCb||[],window.heap=window.heap||[],heap.load=function(e,t){window.heap.envId=e,window.heap.clientConfig=t=t||{},window.heap.clientConfig.shouldFetchServerConfig=!1;var a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src="https://cdn.us.heap-api.com/config/"+e+"/heap_config.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(a,r);var n=["init","startTracking","stopTracking","track","resetIdentity","identify","getSessionId","getUserId","getIdentity","addUserProperties","addEventProperties","removeEventProperty","clearEventProperties","addAccountProperties","addAdapter","addTransformer","addTransformerFn","onReady","addPageviewProperties","removePageviewProperty","clearPageviewProperties","trackPageview"],i=function(e){return function(){var t=Array.prototype.slice.call(arguments,0);window.heapReadyCb.push({name:e,fn:function(){heap[e]&&heap[e].apply(heap,t)}})}};for(var p=0;p - -4. **Configure your docs.yml**: In your `docs.yml` file, add the JavaScript file configuration: - - -```yaml -js: - - path: ./scripts/heap.js - strategy: beforeInteractive -``` - - -### Security Considerations - -Since Heap tracking is implemented using client-side JavaScript, your environment ID will be visible in the browser's source code. This is normal and expected behavior for client-side analytics implementations. Heap environment IDs are designed to be publicly visible and are safe to expose on the client side. - -### Testing Your Integration - -1. **Start your development server**: Run `fern docs dev` to build and start your Fern docs locally (typically on `http://localhost:3000`). - -2. **Verify script loading**: Open your browser's developer tools and check the Console and Network tabs to confirm the Heap script is loading correctly. Look for successful requests to `heap-api.com`. - -3. **Test event tracking**: Navigate through your docs site and verify that events are being tracked. Heap automatically captures page views, clicks, and form interactions. - -4. **Check Heap dashboard**: Go to your Heap project dashboard to verify that events are being received correctly. The setup page should indicate when data is being received. - -### What Heap Automatically Tracks - -Once integrated, Heap will automatically capture: - -- **Page views**: Every page visit with full URL information -- **Click events**: All button clicks, link clicks, and interactive elements -- **Form interactions**: Form submissions and field changes -- **Session data**: User sessions, return visits, and session duration -- **User behavior**: Scroll depth, time on page, and navigation patterns - -### Additional Resources - -For more information on Heap's JavaScript SDK and advanced configuration options, visit the [Heap JavaScript SDK documentation](https://developers.heap.io/reference/web). You can also explore [Heap's getting started guide](https://help.heap.io/hc/en-us/categories/13662488537116-Getting-Started) for more comprehensive setup instructions. \ No newline at end of file From f87fb65f071acec44e064a3e73d521539c60ebf8 Mon Sep 17 00:00:00 2001 From: Fern Support <126544928+fern-support@users.noreply.github.com> Date: Tue, 5 Aug 2025 17:19:34 -0400 Subject: [PATCH 4/5] Added Heap page --- .../pages/integrations/analytics/heap.mdx | 73 +++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 fern/products/docs/pages/integrations/analytics/heap.mdx diff --git a/fern/products/docs/pages/integrations/analytics/heap.mdx b/fern/products/docs/pages/integrations/analytics/heap.mdx new file mode 100644 index 000000000..21002cc6b --- /dev/null +++ b/fern/products/docs/pages/integrations/analytics/heap.mdx @@ -0,0 +1,73 @@ +--- +title: Heap +description: >- + Learn how to integrate Fern Docs with Heap to track user behavior and + analytics. +--- + +## Add Heap to your Docs + +To add Heap to your Docs, you need to create a custom JavaScript file and configure it in your `docs.yml` file using your Heap environment ID. + +### Get your Heap Environment ID + +1. Log in to your Heap account. +2. Navigate to the project you want to track. +3. Go to **Install Heap** > **Web Installation**. +4. Copy your **Environment ID** from the installation snippet (it will look like a numeric ID such as `358239876`). + +### Integration Steps + +1. **Create a scripts folder**: Under your `fern` directory, create a `scripts` folder if it doesn't already exist. + +2. **Create the Heap script**: In the `scripts` folder, create a file named `heap.js`. + +3. **Add the Heap tracking code**: In your `heap.js` file, add the following script (replace `YOUR_ENVIRONMENT_ID` with your actual environment ID): + + +```js +// Heap Analytics Integration +window.heapReadyCb=window.heapReadyCb||[],window.heap=window.heap||[],heap.load=function(e,t){window.heap.envId=e,window.heap.clientConfig=t=t||{},window.heap.clientConfig.shouldFetchServerConfig=!1;var a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src="https://cdn.us.heap-api.com/config/"+e+"/heap_config.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(a,r);var n=["init","startTracking","stopTracking","track","resetIdentity","identify","getSessionId","getUserId","getIdentity","addUserProperties","addEventProperties","removeEventProperty","clearEventProperties","addAccountProperties","addAdapter","addTransformer","addTransformerFn","onReady","addPageviewProperties","removePageviewProperty","clearPageviewProperties","trackPageview"],i=function(e){return function(){var t=Array.prototype.slice.call(arguments,0);window.heapReadyCb.push({name:e,fn:function(){heap[e]&&heap[e].apply(heap,t)}})}};for(var p=0;p + +4. **Configure your docs.yml**: In your `docs.yml` file, add the JavaScript file configuration: + + +```yaml +js: + - path: ./scripts/heap.js + strategy: beforeInteractive +``` + + +### Security Considerations + +Since Heap tracking is implemented using client-side JavaScript, your environment ID will be visible in the browser's source code. This is normal and expected behavior for client-side analytics implementations. Heap environment IDs are designed to be publicly visible and are safe to expose on the client side. + +### Testing Your Integration + +1. **Start your development server**: Run `fern docs dev` to build and start your Fern docs locally (typically on `http://localhost:3000`). + +2. **Verify script loading**: Open your browser's developer tools and check the Console and Network tabs to confirm the Heap script is loading correctly. Look for successful requests to `heap-api.com`. + +3. **Test event tracking**: Navigate through your docs site and verify that events are being tracked. Heap automatically captures page views, clicks, and form interactions. + +4. **Check Heap dashboard**: Go to your Heap project dashboard to verify that events are being received correctly. The setup page should indicate when data is being received. + +### What Heap Automatically Tracks + +Once integrated, Heap will automatically capture: + +- **Page views**: Every page visit with full URL information +- **Click events**: All button clicks, link clicks, and interactive elements +- **Form interactions**: Form submissions and field changes +- **Session data**: User sessions, return visits, and session duration +- **User behavior**: Scroll depth, time on page, and navigation patterns + +### Additional Resources + +For more information on Heap's JavaScript SDK and advanced configuration options, visit the [Heap JavaScript SDK documentation](https://developers.heap.io/reference/web). You can also explore [Heap's getting started guide](https://help.heap.io/hc/en-us/categories/13662488537116-Getting-Started) for more comprehensive setup instructions. \ No newline at end of file From 005731eac14916748a743be87b936ea75ee0658c Mon Sep 17 00:00:00 2001 From: Fern Support <126544928+fern-support@users.noreply.github.com> Date: Tue, 5 Aug 2025 17:26:48 -0400 Subject: [PATCH 5/5] Update heap.mdx Updated the information --- .../docs/pages/integrations/analytics/heap.mdx | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/fern/products/docs/pages/integrations/analytics/heap.mdx b/fern/products/docs/pages/integrations/analytics/heap.mdx index 21002cc6b..cc4ff0a0c 100644 --- a/fern/products/docs/pages/integrations/analytics/heap.mdx +++ b/fern/products/docs/pages/integrations/analytics/heap.mdx @@ -14,7 +14,7 @@ To add Heap to your Docs, you need to create a custom JavaScript file and config 1. Log in to your Heap account. 2. Navigate to the project you want to track. 3. Go to **Install Heap** > **Web Installation**. -4. Copy your **Environment ID** from the installation snippet (it will look like a numeric ID such as `358239876`). +4. Copy your **Environment ID** from the installation snippet (it will look like a numeric ID such as `123456789`). ### Integration Steps @@ -52,22 +52,12 @@ Since Heap tracking is implemented using client-side JavaScript, your environmen 1. **Start your development server**: Run `fern docs dev` to build and start your Fern docs locally (typically on `http://localhost:3000`). -2. **Verify script loading**: Open your browser's developer tools and check the Console and Network tabs to confirm the Heap script is loading correctly. Look for successful requests to `heap-api.com`. +2. **Verify script loading**: Open your browser's developer tools and check the Console and Network tabs to confirm the Heap script is loading correctly. 3. **Test event tracking**: Navigate through your docs site and verify that events are being tracked. Heap automatically captures page views, clicks, and form interactions. 4. **Check Heap dashboard**: Go to your Heap project dashboard to verify that events are being received correctly. The setup page should indicate when data is being received. -### What Heap Automatically Tracks - -Once integrated, Heap will automatically capture: - -- **Page views**: Every page visit with full URL information -- **Click events**: All button clicks, link clicks, and interactive elements -- **Form interactions**: Form submissions and field changes -- **Session data**: User sessions, return visits, and session duration -- **User behavior**: Scroll depth, time on page, and navigation patterns - ### Additional Resources -For more information on Heap's JavaScript SDK and advanced configuration options, visit the [Heap JavaScript SDK documentation](https://developers.heap.io/reference/web). You can also explore [Heap's getting started guide](https://help.heap.io/hc/en-us/categories/13662488537116-Getting-Started) for more comprehensive setup instructions. \ No newline at end of file +For more information on Heap's JavaScript SDK and advanced configuration options, visit the [Heap JavaScript SDK documentation](https://developers.heap.io/reference/web). You can also explore [Heap's getting started guide](https://help.heap.io/hc/en-us/categories/13662488537116-Getting-Started) for more comprehensive setup instructions.