Integrations

Analytics

Analytics Integrations

Integrate an analytics platform to track events

Automatically send analytics data about your documentation engagement to your third party analytics providers.

All integrations

- LiveSession
  Learn how to add send analytics events to LiveSession

Enable Analytics

Set your analytics keys in docs.json under the integrations.analytics section:

docs.json

{
    "integrations": {
        "analytics": {
            "livesession": {
                "trackId": "required"
            }
        }
    }
}

Tip

Demo

Welcome to the analytics demo!

This is a demo of the analytics integration.

Analytics APIExperimental

You can use analytics API in your custom MDX components:


export function MyComponent() {
    function handleClick() {
        analytics.track(
            "event_name",
            {
                key: "value"
            }
        )
    }

    return  (
        <div className="mycomponent">
            <Button 
                kind="secondary" 
                onClick={handleClick}
            >
                Get Started
            </Button>
        </div>
    )
}

<MyComponent/>

Info

Note that analytics refers to a global variable.

Analytics Events

We send the following events to your analytics provider.

Event name	Custom properties	Description
`docs.copy_page`	`{ location: string }`	When a page is copied.
`docs.anchor.click`	`{ id: string location: string }`	When a heading anchor is clicked.
`docs.code.copy`	`{ code: string tab: string example: string location: string }`	When code is copied.
`docs.code.example_change`	`{ example: string location: string }`	When a code example is changed.
`docs.code.scroll_100`	`{ location: string }`	Triggers when a scroll of codeblock reached at bottom.
`docs.code.scroll_depth`	`{ example: string depth: 25 / 50 / 75 /100 }`	Triggers when a specific depth of codeblock scroll reached out.
`docs.code.tab_change`	`{ tab: string example: string location: string }`	When a code tab is changed.
`docs.details.open`	`{ label: string location: string }`	When a user opens a details.
`docs.details.close`	`{ label: string location: string }`	When a user closes a details.
`docs.search.open`	`-`	When a user clicks on search.
`docs.search.result_click`	`{ title: string description: string }`	When a user click a search result.
`docs.search.query_change`	`{ term: string }`	When a user change query on search input.

More powerful analytics events coming soon.

OpenSDK LiveSession