Merge pull request #153 from vechain/jennifer/78-request---setup-analytics

Setup Analytics

Author: Agilulfo1820

examples/homepage/package.json

@@ -5,7 +5,8 @@
     "scripts": {
         "build": "next build",
         "clean": "rm -rf .next dist .turbo",
-        "dev": "next dev"
+        "dev": "next dev",
+        "start": "next start"
     },
     "dependencies": {
         "@chakra-ui/react": "2.8.2",

examples/homepage/src/app/components/features/Introduction/Introduction.tsx

@@ -20,9 +20,19 @@ import { CiLogin } from 'react-icons/ci';
 import { SiNpm, SiFarcaster } from 'react-icons/si';
 import { FcGoogle } from 'react-icons/fc';
 import { FaSquareXTwitter } from 'react-icons/fa6';
+import { trackEvent } from '@/app/lib/mixpanelClient';
 
 export function Introduction() {
     const { connection } = useWallet();
+
+    const trackExternalLink = (destination: string) => {
+        trackEvent('External Link Click', {
+            destination,
+            isConnected: connection.isConnected,
+            source: 'Introduction',
+        });
+    };
+
     const basePath = process.env.basePath ?? '';
     return (
         <Box
@@ -68,6 +78,9 @@ export function Introduction() {
                                 colorScheme="gray"
                                 size="lg"
                                 width="100%"
+                                onClick={() =>
+                                    trackExternalLink('documentation')
+                                }
                             >
                                 Get Started with our Docs
                             </Button>
@@ -85,6 +98,7 @@ export function Introduction() {
                                 rel="noopener noreferrer"
                                 colorScheme="red"
                                 width="100%"
+                                onClick={() => trackExternalLink('npm')}
                             >
                                 View Package on NPM
                             </Button>
@@ -96,6 +110,7 @@ export function Introduction() {
                                 rel="noopener noreferrer"
                                 colorScheme="gray"
                                 width="100%"
+                                onClick={() => trackExternalLink('github')}
                             >
                                 View GitHub Repository
                             </Button>
@@ -114,6 +129,9 @@ export function Introduction() {
                                 rel="noopener noreferrer"
                                 variant="outline"
                                 width="100%"
+                                onClick={() =>
+                                    trackExternalLink('smart-accounts')
+                                }
                             >
                                 Learn about Smart Accounts
                             </Button>
@@ -273,6 +291,11 @@ export function Introduction() {
                             as={Link}
                             href={app.href}
                             isExternal
+                            onClick={() =>
+                                trackExternalLink(
+                                    `example-app-${app.name.toLowerCase()}`,
+                                )
+                            }
                         >
                             <HStack
                                 align="start"

examples/homepage/src/app/constants.ts

@@ -24,3 +24,19 @@ export const b3trAbi = [
         type: 'function',
     },
 ] as const;
+
+export const ENV = {
+    isDevelopment: process.env.NEXT_PUBLIC_NETWORK_TYPE === 'test',
+    isProduction: process.env.NEXT_PUBLIC_NETWORK_TYPE === 'main',
+};
+
+export const PROJECT_TOKENS = {
+    development: process.env.NEXT_PUBLIC_MIXPANEL_TOKEN,
+    production: process.env.NEXT_PUBLIC_MIXPANEL_TOKEN,
+};
+
+export const HOMEPAGE_MIXPANEL_PROJECT_TOKEN = ENV.isProduction
+    ? PROJECT_TOKENS.production
+    : PROJECT_TOKENS.development;
+
+export const HOMEPAGE_MIXPANEL_PROJECT_NAME = 'homepage';

examples/homepage/src/app/lib/mixpanelClient.ts

@@ -0,0 +1,28 @@
+import mixpanel from 'mixpanel-browser';
+import {
+    ENV,
+    HOMEPAGE_MIXPANEL_PROJECT_NAME,
+    HOMEPAGE_MIXPANEL_PROJECT_TOKEN,
+} from '../constants';
+
+let homepageInstance: any;
+
+if (typeof window !== 'undefined' && HOMEPAGE_MIXPANEL_PROJECT_TOKEN) {
+    homepageInstance = mixpanel.init(
+        HOMEPAGE_MIXPANEL_PROJECT_TOKEN,
+        {
+            debug: !ENV.isProduction,
+        },
+        HOMEPAGE_MIXPANEL_PROJECT_NAME,
+    );
+}
+
+const trackEvent = (event: string, properties: Record<string, any> = {}) => {
+    homepageInstance?.track(event, properties);
+};
+
+const resetUser = () => {
+    homepageInstance?.reset();
+};
+
+export { trackEvent, resetUser };

examples/homepage/src/app/lib/types/mixPanel.ts

@@ -0,0 +1,12 @@
+export type ExternalLinkDestination =
+    | 'documentation'
+    | 'npm'
+    | 'github'
+    | 'smart-accounts'
+    | `example-app-${string}`;
+
+export interface ExternalLinkProperties {
+    destination: ExternalLinkDestination;
+    isConnected: boolean;
+    source: string;
+}

examples/homepage/src/app/pages/Home.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { type ReactElement, useRef, useState } from 'react';
+import { type ReactElement, useEffect, useRef, useState } from 'react';
 import {
     Container,
     VStack,
@@ -24,6 +24,7 @@ import { DataReadingExample } from '../components/features/DataReading';
 import { VechainLogo } from '@vechain/vechain-kit/assets';
 import { LoginUIControl } from '../components/features/LoginUIControl/LoginUIControl';
 import { LoginToContinueBox } from '../components/features/LoginToContinueBox';
+import { trackEvent } from '@/app/lib/mixpanelClient';
 
 export default function Home(): ReactElement {
     const { account } = useWallet();
@@ -37,6 +38,10 @@ export default function Home(): ReactElement {
         setHasScrolled(true);
     };
 
+    useEffect(() => {
+        trackEvent('Home Page Viewed');
+    }, []);
+
     if (!account) {
         return (
             <Container

examples/next-template/src/app/pages/Home.tsx

@@ -11,6 +11,7 @@ import { LanguageSelector } from '@/app/components/features/LanguageSelector';
 import { TransactionExamples } from '@/app/components/features/TransactionExamples';
 import { SigningExample } from '@/app/components/features/SigningExample/SigningExample';
 import { WelcomeSection } from '../components/features/WelcomeSection';
+import mixpanelClient from '@/lib/mixpanelClient';
 
 export default function Home(): ReactElement {
     const { account, connection } = useWallet();
@@ -27,6 +28,8 @@ export default function Home(): ReactElement {
         );
     }
 
+    mixpanelClient.trackEvent('Home Page Viewed');
+
     return (
         <Container
             height={'full'}

examples/next-template/src/lib/mixpanelClient.js

@@ -0,0 +1,24 @@
+import mixpanel from 'mixpanel-browser';
+
+const MIXPANEL_PROJECT_TOKEN = process.env.NEXT_PUBLIC_MIXPANEL_TOKEN || '';
+
+// Ensure Mixpanel is initialized only once
+if (!MIXPANEL_PROJECT_TOKEN) {
+    mixpanel.init(MIXPANEL_PROJECT_TOKEN, { debug: true });
+}
+
+// **Core Function to Track Events**
+const trackEvent = (event, properties = {}) => {
+    mixpanel.track(event, properties);
+};
+
+// **Reset User Data (For Logout)**
+const resetUser = () => {
+    mixpanel.reset();
+};
+
+// **Exporting All Tracking Methods**
+export default {
+    trackEvent,
+    resetUser,
+};

examples/next-template/tsconfig.json

@@ -21,16 +21,16 @@
         ],
         "paths": {
             "@/*": ["./src/*"],
-            "@vechain-kit/*": ["../../packages/vechain-kit/src/*"],
+            "@vechain-kit/*": ["../../packages/vechain-kit/src/*"]
         }
     },
     "include": [
         "next-env.d.ts",
         "**/*.ts",
         "**/*.tsx",
         ".next/types/**/*.ts",
-        "dist/types/**/*.ts"
+        "dist/types/**/*.ts",
+        "src/lib/mixpanelClient.js"
     ],
-    "exclude": ["node_modules"],
-    
+    "exclude": ["node_modules"]
 }

packages/vechain-kit/eslint.config.mjs

@@ -7,7 +7,7 @@ export default tseslint.config({
     rules: {
         '@typescript-eslint/no-explicit-any': 'off',
         '@typescript-eslint/ban-ts-comment': 'off',
-        'no-console': ['error', { allow: ['error'] }],
+        'no-console': ['error', { allow: ['error', 'info', 'warn'] }],
         'eslint-comments/no-unused-disable': 'off',
         'import/no-anonymous-default-export': 'off',
         '@typescript-eslint/no-unused-vars': [