Call trackViewInSiteById API endpoint when tracking view for sites (#2350)

Author: spastorelli

src/app/(space)/(content)/[[...pathname]]/page.tsx

@@ -23,8 +23,15 @@ export default async function Page(props: { params: PagePathParams }) {
  const { params } = props;
 
  const rawPathname = getPathnameParam(params);
- const { contentTarget, space, customization, pages, page, document } =
- await fetchPageData(params);
+ const {
+ content: contentPointer,
+ contentTarget,
+ space,
+ customization,
+ pages,
+ page,
+ document,
+ } = await fetchPageData(params);
  const linksContext: PageHrefContext = {};
 
  if (!page) {
@@ -63,6 +70,7 @@ export default async function Page(props: { params: PagePathParams }) {
  <div className={tcls('flex', 'flex-row')}>
  <PageBody
  space={space}
+ contentPointer={contentPointer}
  contentTarget={contentTarget}
  customization={customization}
  context={contentRefContext}

src/components/PageBody/PageBody.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 
 import { getSpaceLanguage } from '@/intl/server';
 import { t } from '@/intl/translate';
-import { ContentTarget, api } from '@/lib/api';
+import { ContentPointer, ContentTarget, SiteContentPointer, api } from '@/lib/api';
 import { hasFullWidthBlock, isNodeEmpty } from '@/lib/document';
 import { ContentRefContext, resolveContentRef } from '@/lib/references';
 import { tcls } from '@/lib/tailwind';
@@ -25,20 +25,33 @@ import { DateRelative } from '../primitives';
 
 export function PageBody(props: {
  space: Space;
+ contentPointer: ContentPointer | SiteContentPointer;
  contentTarget: ContentTarget;
  customization: CustomizationSettings | SiteCustomizationSettings;
  page: RevisionPageDocument;
  document: JSONDocument | null;
  context: ContentRefContext;
  withPageFeedback: boolean;
 }) {
- const { space, contentTarget, customization, context, page, document, withPageFeedback } =
- props;
+ const {
+ space,
+ contentPointer,
+ contentTarget,
+ customization,
+ context,
+ page,
+ document,
+ withPageFeedback,
+ } = props;
 
  const asFullWidth = document ? hasFullWidthBlock(document) : false;
  const language = getSpaceLanguage(customization);
  const updatedAt = page.updatedAt ?? page.createdAt;
  const shouldHighlightCode = createHighlightingContext();
+ const sitePointer =
+ 'siteId' in contentPointer
+ ? { organizationId: contentPointer.organizationId, siteId: contentPointer.siteId }
+ : undefined;
 
  return (
  <>
@@ -129,7 +142,12 @@ export function PageBody(props: {
  </div>
  </main>
  <React.Suspense fallback={null}>
- <TrackPageView spaceId={space.id} pageId={page.id} apiHost={api().endpoint} />
+ <TrackPageView
+ sitePointer={sitePointer}
+ spaceId={space.id}
+ pageId={page.id}
+ apiHost={api().endpoint}
+ />
  </React.Suspense>
  </>
  );

src/components/PageBody/TrackPageView.tsx

@@ -1,36 +1,80 @@
 'use client';
 
-import type { RequestSpaceTrackPageView } from '@gitbook/api';
+import type { RequestSiteTrackPageView, RequestSpaceTrackPageView } from '@gitbook/api';
 import cookies from 'js-cookie';
 import * as React from 'react';
 
 import { getVisitorId } from '@/lib/analytics';
+import { SiteContentPointer } from '@/lib/api';
 
 /**
  * Track the page view for the current page to integrations.
  */
 export function TrackPageView(props: {
  apiHost: string;
+ sitePointer?: Pick<SiteContentPointer, 'siteId' | 'organizationId'>;
  spaceId: string;
  pageId: string | undefined;
 }) {
- const { apiHost, spaceId, pageId } = props;
+ const { apiHost, sitePointer, spaceId, pageId } = props;
 
  React.useEffect(() => {
- trackPageView(apiHost, spaceId, pageId);
- }, [apiHost, spaceId, pageId]);
+ trackPageView({ apiHost, sitePointer, spaceId, pageId });
+ }, [apiHost, spaceId, pageId, sitePointer]);
 
  return null;
 }
 
+async function sendSpaceTrackPageViewRequest(args: {
+ apiHost: string;
+ spaceId: string;
+ body: RequestSpaceTrackPageView;
+}) {
+ const { apiHost, spaceId, body } = args;
+ const url = new URL(apiHost);
+ url.pathname = `/v1/spaces/${spaceId}/insights/track_view`;
+
+ await fetch(url, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(body),
+ });
+}
+
+async function sendSiteTrackPageViewRequest(args: {
+ apiHost: string;
+ sitePointer: Pick<SiteContentPointer, 'siteId' | 'organizationId'>;
+ body: RequestSiteTrackPageView;
+}) {
+ const { apiHost, sitePointer, body } = args;
+ const url = new URL(apiHost);
+ url.pathname = `/v1/orgs/${sitePointer.organizationId}/sites/${sitePointer.siteId}/insights/track_view`;
+
+ await fetch(url, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(body),
+ });
+}
+
 let latestPageId: string | undefined | null = null;
 
 /**
  * Track the page view for the current page to GitBook.
  * We don't use the API client to avoid shipping 80kb of JS to the client.
  * And instead use a simple fetch.
  */
-async function trackPageView(apiHost: string, spaceId: string, pageId: string | undefined) {
+async function trackPageView(args: {
+ apiHost: string;
+ sitePointer?: Pick<SiteContentPointer, 'siteId' | 'organizationId'>;
+ spaceId: string;
+ pageId: string | undefined;
+}) {
+ const { apiHost, sitePointer, pageId, spaceId } = args;
  if (pageId === latestPageId) {
  // The hook can be called multiple times, we only want to track once.
  return;
@@ -39,7 +83,7 @@ async function trackPageView(apiHost: string, spaceId: string, pageId: string |
  latestPageId = pageId;
 
  const visitorId = await getVisitorId();
- const body: RequestSpaceTrackPageView = {
+ const sharedTrackedProps = {
  url: window.location.href,
  pageId,
  visitor: {
@@ -51,17 +95,17 @@ async function trackPageView(apiHost: string, spaceId: string, pageId: string |
  referrer: document.referrer,
  };
 
- const url = new URL(apiHost);
- url.pathname = `/v1/spaces/${spaceId}/insights/track_view`;
-
  try {
- await fetch(url, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify(body),
- });
+ sitePointer
+ ? await sendSiteTrackPageViewRequest({
+ apiHost,
+ sitePointer,
+ body: {
+ ...sharedTrackedProps,
+ spaceId,
+ },
+ })
+ : await sendSpaceTrackPageViewRequest({ apiHost, spaceId, body: sharedTrackedProps });
  } catch (error) {
  console.error('Failed to track page view', error);
  }