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 + 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..cc4ff0a0c --- /dev/null +++ b/fern/products/docs/pages/integrations/analytics/heap.mdx @@ -0,0 +1,63 @@ +--- +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 `123456789`). + +### 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. + +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. + +### 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.