This repository contains two sample applications demonstrating how to integrate ThriveStack analytics into different types of web applications. These applications serve as reference implementations for developers looking to add analytics tracking to their projects.
Sample-Application-Analytics-NPM/
├── HTML-CSS(Script)/ # Vanilla HTML/CSS/JS application
│ ├── index.html # Landing page
│ ├── signup.html # Signup page
│ ├── dashboard.html # Analytics dashboard
│ ├── styles.css # Main stylesheet
│ ├── script.js # JavaScript functionality
│ └── README.md # Detailed documentation
├── NextJS(NPM)/ # Next.js React application
│ ├── app/ # Next.js app directory
│ ├── components/ # React components
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions
│ ├── package.json # Dependencies
│ └── ... # Next.js configuration files
└── README.md # This file
The HTML/CSS application is a complete marketing website with analytics integration that can be run directly in a browser without any build process.
-
Navigate to the HTML-CSS directory:
cd "HTML-CSS(Script)"
-
Open the application:
- Simply open
index.htmlin your web browser - Or serve it using a local server:
# Using Python python -m http.server 8000 # Using Node.js (if you have http-server installed) npx http-server # Using PHP php -S localhost:8000
- Simply open
-
Access the application:
- Open your browser and go to
http://localhost:8000 - Navigate through the pages: Landing → Signup → Dashboard
- Open your browser and go to
- Landing Page (
index.html): Modern marketing page with hero section, features, pricing, and contact form - Signup Page (
signup.html): Professional signup form with validation and analytics tracking - Dashboard (
dashboard.html): Analytics dashboard with charts and metrics - Responsive Design: Works perfectly on desktop, tablet, and mobile
- ThriveStack Integration: Analytics tracking for user interactions and conversions
Add ThriveStack Script to HTML Head
<!-- Add this in the <head> section of each HTML file -->
<script src="https://d3cgzwt0fb6o2k.cloudfront.net/latest/thrivestack.js"
api-key="{API_KEY}"
source="marketing,product">
</script>The Next.js application is a modern React-based dashboard with comprehensive analytics integration using the ThriveStack NPM package.
-
Navigate to the Next.js directory:
cd "NextJS(NPM)"
-
Install dependencies:
npm install
-
Set up environment variables: Create a
.env.localfile in the NextJS(NPM) directory:NEXT_PUBLIC_THRIVESTACK_API_KEY={API_KEY}
-
Run the development server:
npm run dev
-
Access the application:
- Open your browser and go to
http://localhost:3000 - The app will automatically redirect to the dashboard
- Open your browser and go to
- Modern React Dashboard: Built with Next.js 13+ and App Router
- UI Components: Comprehensive component library using Radix UI and Tailwind CSS
- Analytics Integration: ThriveStack analytics with browser and Node.js support
- TypeScript: Full type safety throughout the application
- Responsive Design: Mobile-first responsive layout
- Dark Mode Support: Built-in theme switching capability
-
Install ThriveStack NPM Package
npm install @thrivestack/analytics-browser @thrivestack/analytics-node
-
Create ThriveStack Provider Component
// components/ThriveStackProvider.tsx "use client"; import { useEffect } from "react"; import * as thrivestack from "@thrivestack/analytics-browser"; export default function ThriveStackProvider({ children, }: { children: React.ReactNode; }) { useEffect(() => { thrivestack.init( "{API_KEY}", "product" ); }, []); return <>{children}</>; }
-
Wrap Your App with the Provider
// app/layout.tsx import ThriveStackProvider from '@/components/ThriveStackProvider'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body> <ThriveStackProvider> {children} </ThriveStackProvider> </body> </html> ); }
-
Track User Signup
// Example: Track button clicks import { Button } from '@/components/ui/button'; import * as thrivestack from "@thrivestack/analytics-browser"; export function ActionButton() { const handleClick = () => { thriveStack.setUser("18f716ac-37a4-464f-adb7-3cc30032308c","john.doe@acme.xyz"); thriveStack.setGroup("ac8db7ba-5139-4911-ba6e-523fd9c4704b", "acme.com","Acme Corporation"); }; return ( <Button onClick={handleClick}> Signup </Button> ); }
- Choose your framework: Select either the HTML/CSS or Next.js approach based on your needs
- Copy the integration code: Use the ThriveStack initialization and tracking code as a template
- Customize the events: Modify the analytics events to match your application's needs
- Test thoroughly: Ensure all events are firing correctly in your ThriveStack dashboard
- Deploy: Once satisfied, deploy your application with analytics tracking
For questions about ThriveStack analytics integration:
- Check the ThriveStack Documentation
- Review the integration code in both applications
- Contact ThriveStack support for technical assistance
Built with ❤️ for the ThriveStack community