feat: add all page views (#5154)

10 months ago · 714ca8c49f
parent 63c3850f0e
commit 714ca8c49f
6 changed files with 42 additions and 29 deletions
--- a/src/components/CustomRoadmap/CustomRoadmap.tsx
+++ b/src/components/CustomRoadmap/CustomRoadmap.tsx
@ -101,22 +101,10 @@ export function CustomRoadmap(props: CustomRoadmapProps) {
    setIsLoading(false);
  }

-  async function trackVisit() {
-    if (!isLoggedIn() || isEmbed) {
-      return;
-    }
-
-    await httpPost(`${import.meta.env.PUBLIC_API_URL}/v1-visit`, {
-      resourceId: id,
-      resourceType: 'roadmap',
-    });
-  }
-
  useEffect(() => {
    getRoadmap().finally(() => {
      hideRoadmapLoader();
    });
-    trackVisit().then();
  }, []);

  if (isLoading) {
--- a/src/components/FrameRenderer/renderer.ts
+++ b/src/components/FrameRenderer/renderer.ts
@ -117,19 +117,6 @@ export class Renderer {
      });
  }

-  trackVisit() {
-    if (!isLoggedIn()) {
-      return;
-    }
-
-    window.setTimeout(() => {
-      httpPost(`${import.meta.env.PUBLIC_API_URL}/v1-visit`, {
-        resourceId: this.resourceId,
-        resourceType: this.resourceType,
-      }).then(() => null);
-    }, 0);
-  }
-
  onDOMLoaded() {
    if (!this.prepareConfig()) {
      return;
@ -138,8 +125,6 @@ export class Renderer {
    const urlParams = new URLSearchParams(window.location.search);
    const roadmapType = urlParams.get('r');

-    this.trackVisit();
-
    if (roadmapType) {
      this.switchRoadmap(`/${roadmapType}.json`);
    } else {
--- a/src/components/PageVisit/PageVisit.tsx
+++ b/src/components/PageVisit/PageVisit.tsx
@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import { isLoggedIn } from '../../lib/jwt';
+import { httpPost } from '../../lib/http';
+import type { ResourceType } from '../../lib/resource-progress';
+
+type PageVisitProps = {
+  resourceId?: string;
+  resourceType?: ResourceType;
+};
+
+export function PageVisit(props: PageVisitProps) {
+  const { resourceId, resourceType } = props;
+
+  useEffect(() => {
+    if (!isLoggedIn()) {
+      return;
+    }
+
+    httpPost(`${import.meta.env.PUBLIC_API_URL}/v1-visit`, {
+      ...(resourceType && { resourceType, resourceId }),
+    }).finally(() => {});
+  }, []);
+
+  return null;
+}
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@ -11,6 +11,8 @@ import { Toaster } from '../components/Toast';
 import { PageSponsor } from '../components/PageSponsor';
 import { siteConfig } from '../lib/config';
 import '../styles/global.css';
+import { PageVisit } from '../components/PageVisit/PageVisit';
+import type { ResourceType } from '../lib/resource-progress';

 export interface Props {
  title: string;
@ -25,6 +27,8 @@ export interface Props {
  initialLoadingMessage?: string;
  permalink?: string;
  jsonLd?: Record<string, unknown>[];
+  resourceId?: string;
+  resourceType?: ResourceType;
 }

 const {
@ -39,6 +43,8 @@ const {
  jsonLd = [],
  redirectUrl = '',
  initialLoadingMessage = '',
+  resourceId,
+  resourceType,
 } = Astro.props;

 // Remove trailing slashes to consider the page as canonical
@ -55,7 +61,7 @@ const gaPageIdentifier = Astro.url.pathname
  .replace(/\//g, ':');
 ---

-<!DOCTYPE html>
+<!doctype html>
 <html lang='en'>
  <head>
    <meta charset='UTF-8' />
@ -171,5 +177,10 @@ const gaPageIdentifier = Astro.url.pathname
    <slot name='after-footer' />

    <Analytics />
+    <PageVisit
+      resourceId={resourceId}
+      resourceType={resourceType}
+      client:load
+    />
  </body>
 </html>
--- a/src/pages/[roadmapId]/index.astro
+++ b/src/pages/[roadmapId]/index.astro
@ -67,6 +67,8 @@ if (roadmapFAQs.length) {
  keywords={roadmapData.seo.keywords}
  noIndex={roadmapData.isUpcoming}
  jsonLd={jsonLdSchema}
+  resourceId={roadmapId}
+  resourceType='roadmap'
 >
  <!-- Preload the font being used in the renderer -->
  <link
--- a/src/pages/best-practices/[bestPracticeId]/index.astro
+++ b/src/pages/best-practices/[bestPracticeId]/index.astro
@ -49,7 +49,7 @@ if (bestPracticeData.schema) {
      datePublished: bestPracticeSchema.datePublished,
      dateModified: bestPracticeSchema.dateModified,
      imageUrl: bestPracticeSchema.imageUrl,
-    })
+    }),
  );
 }
 ---
@ -62,6 +62,8 @@ if (bestPracticeData.schema) {
  keywords={bestPracticeData.seo.keywords}
  noIndex={bestPracticeData.isUpcoming}
  jsonLd={jsonLdSchema}
+  resourceId={bestPracticeId}
+  resourceType='best-practice'
 >
  <!-- Preload the font being used in the renderer -->
  <link