Analytics

BaseHub Analytics provides a simple, yet powerful, way to know more about how your content is performing. The unique thing about it is that Events that occur throughout your website can be tied directly to a Block—therefore keeping it in context.

Analyitcs can be used for tracking things like:

• Page views (internal and user facing)

• Feedback forms

• Button/Link Clicks

Or anything you want, really.

Send an Event

In order to send an event, you’ll need to first get the _analyticsKey of a block from the GraphQL API. Let’s imagine we have a Posts collection and we’re rendering a specific post. Once we get the post data and its _analyticsKey, we’ll import { sendEvent } from "basehub/analytics" and run it on mount:

import { Pump } from "basehub/react-pump"
import { notFound } from "next/navigation"
import { draftMode } from "next/headers"

const Page = () => {
  return (
    <Pump
      next={{ revalidate: 30 }}
      draft={draftMode().isEnabled}
      queries={[
        {
          posts: {
            __args: { filter: { _slug: { eq: "some-post" } } },
            items: {
              _title: true,
              _analyticsKey: true,
            },
          },
        },
      ]}
    >
      {async ([data]) => {
        "use server"
        const post = data.posts.items[0]
        if (!post) notFound()

        return (
          <div>
            <PageView _analyticsKey={page._analyticsKey} />
            <h1>{post._title}</h1>
          </div>
        )
      }}
    </Pump>
  )
}

"use client"
import * as React from "react"
import { sendEvent } from "basehub/analytics"

export const PageView = ({
  _analyticsKey,
}: {
  _analyticsKey: string
}) => {

  // On mount, send the event
  React.useEffect(() => {
    sendEvent({ _analyticsKey, name: "view" }) 
  }, [])

  return <></>
}

Get an Event

In case you want to show the Event Count in your website—for example, to render a “view count”—, well, you can! Following up from the <PageView /> component we built previously, we can update it so that it runs getEventCount and renders it:

"use client"
import * as React from "react"
import { sendEvent, getEventCount } from "basehub/analytics"

export const PageView = ({
  _analyticsKey,
}: {
  _analyticsKey: string
}) => {
  const [count, setCount] = React.useState() 

  // On mount, send the event
  React.useEffect(() => {
    sendEvent({ _analyticsKey, name: "page_view" })
  }, [])

  // We also get the event count so we can render it
  React.useEffect(() => { 
    getEventCount({ _analyticsKey, name: "page_view" }).then( 
      (count) => { 
        setCount(count) 
      },
    ) 
  }, []) 

  return <div>Views: {count ?? "Loading..."}</div> 
}

See Events in Dashboard

Now that you have the integration done, it’s time to see how those events come in. In order to do so, you’ll need to:

1. Select the Block you want to see Analytics for.

2. Click on “Analytics” in the Block Panel (top right next to “Properties”).