399 lines
17 KiB
TypeScript
399 lines
17 KiB
TypeScript
import React from 'react';
|
|
import type { Metadata } from 'next';
|
|
import Link from 'next/link';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Card } from '@/components/ui/Card';
|
|
import SeoJsonLd from '@/components/SeoJsonLd';
|
|
import Breadcrumbs, { BreadcrumbItem } from '@/components/Breadcrumbs';
|
|
import { breadcrumbSchema } from '@/lib/schema';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'QR Code Tracking & Analytics - Track Every Scan | QR Master',
|
|
description: 'Track QR code scans with real-time analytics. Monitor location, device, time, and user behavior. Free QR code tracking software with detailed reports.',
|
|
keywords: 'qr code tracking, qr code analytics, track qr scans, qr code statistics, free qr tracking, qr code monitoring',
|
|
alternates: {
|
|
canonical: 'https://www.qrmaster.net/qr-code-tracking',
|
|
languages: {
|
|
'x-default': 'https://www.qrmaster.net/qr-code-tracking',
|
|
en: 'https://www.qrmaster.net/qr-code-tracking',
|
|
},
|
|
},
|
|
openGraph: {
|
|
title: 'QR Code Tracking & Analytics - Track Every Scan | QR Master',
|
|
description: 'Track QR code scans with real-time analytics. Monitor location, device, time, and user behavior.',
|
|
url: 'https://www.qrmaster.net/qr-code-tracking',
|
|
type: 'website',
|
|
},
|
|
twitter: {
|
|
title: 'QR Code Tracking & Analytics - Track Every Scan | QR Master',
|
|
description: 'Track QR code scans with real-time analytics. Monitor location, device, time, and user behavior.',
|
|
},
|
|
};
|
|
|
|
export default function QRCodeTrackingPage() {
|
|
const trackingFeatures = [
|
|
{
|
|
icon: '📊',
|
|
title: 'Real-Time Analytics',
|
|
description: 'See scan data instantly as it happens. Monitor your QR code performance in real-time with live dashboards.',
|
|
},
|
|
{
|
|
icon: '🌍',
|
|
title: 'Location Tracking',
|
|
description: 'Know exactly where your QR codes are being scanned. Track by country, city, and region.',
|
|
},
|
|
{
|
|
icon: '📱',
|
|
title: 'Device Detection',
|
|
description: 'Identify which devices scan your codes. Track iOS, Android, desktop, and browser types.',
|
|
},
|
|
{
|
|
icon: '🕐',
|
|
title: 'Time-Based Reports',
|
|
description: 'Analyze scan patterns by hour, day, week, or month. Optimize your campaigns with timing insights.',
|
|
},
|
|
{
|
|
icon: '👥',
|
|
title: 'Unique vs Total Scans',
|
|
description: 'Distinguish between unique users and repeat scans. Measure true reach and engagement.',
|
|
},
|
|
{
|
|
icon: '📈',
|
|
title: 'Campaign Performance',
|
|
description: 'Track ROI with UTM parameters. Measure conversion rates and campaign effectiveness.',
|
|
},
|
|
];
|
|
|
|
const useCases = [
|
|
{
|
|
title: 'Marketing Campaigns',
|
|
description: 'Track print ads, billboards, and product packaging to measure marketing ROI.',
|
|
benefits: ['Measure ad performance', 'A/B test campaigns', 'Track conversions'],
|
|
},
|
|
{
|
|
title: 'Event Management',
|
|
description: 'Monitor event check-ins, booth visits, and attendee engagement in real-time.',
|
|
benefits: ['Live attendance tracking', 'Booth analytics', 'Engagement metrics'],
|
|
},
|
|
{
|
|
title: 'Product Labels',
|
|
description: 'Track product authenticity scans, manual downloads, and warranty registrations.',
|
|
benefits: ['Anti-counterfeiting', 'User registration tracking', 'Product analytics'],
|
|
},
|
|
{
|
|
title: 'Restaurant Menus',
|
|
description: 'See how many customers scan your menu QR codes and when peak times occur.',
|
|
benefits: ['Customer insights', 'Peak time analysis', 'Menu engagement'],
|
|
},
|
|
];
|
|
|
|
const comparisonData = [
|
|
{ feature: 'Real-Time Analytics', free: true, qrMaster: true },
|
|
{ feature: 'Location Tracking', free: false, qrMaster: true },
|
|
{ feature: 'Device Detection', free: false, qrMaster: true },
|
|
{ feature: 'Unlimited Scans', free: false, qrMaster: true },
|
|
{ feature: 'Historical Data', free: '7 days', qrMaster: 'Unlimited' },
|
|
{ feature: 'Export Reports', free: false, qrMaster: true },
|
|
{ feature: 'API Access', free: false, qrMaster: true },
|
|
];
|
|
|
|
const softwareSchema = {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'SoftwareApplication',
|
|
'@id': 'https://www.qrmaster.net/qr-code-tracking#software',
|
|
name: 'QR Master - QR Code Tracking & Analytics',
|
|
applicationCategory: 'BusinessApplication',
|
|
operatingSystem: 'Web Browser, iOS, Android',
|
|
offers: {
|
|
'@type': 'Offer',
|
|
price: '0',
|
|
priceCurrency: 'USD',
|
|
availability: 'https://schema.org/InStock',
|
|
},
|
|
aggregateRating: {
|
|
'@type': 'AggregateRating',
|
|
ratingValue: '4.8',
|
|
ratingCount: '1250',
|
|
},
|
|
description: 'Track QR code scans with real-time analytics. Monitor location, device, time, and user behavior with our free QR code tracking software.',
|
|
features: [
|
|
'Real-time analytics dashboard',
|
|
'Location tracking by country and city',
|
|
'Device detection (iOS, Android, Desktop)',
|
|
'Time-based scan reports',
|
|
'Unique vs total scan tracking',
|
|
'Campaign performance metrics',
|
|
'Unlimited scans',
|
|
'Export detailed reports',
|
|
],
|
|
};
|
|
|
|
const howToSchema = {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'HowTo',
|
|
'@id': 'https://www.qrmaster.net/qr-code-tracking#howto',
|
|
name: 'How to Track QR Code Scans',
|
|
description: 'Learn how to track and analyze QR code scans with real-time analytics',
|
|
totalTime: 'PT5M',
|
|
step: [
|
|
{
|
|
'@type': 'HowToStep',
|
|
position: 1,
|
|
name: 'Create QR Code',
|
|
text: 'Sign up for free and create a dynamic QR code with tracking enabled',
|
|
url: 'https://www.qrmaster.net/signup',
|
|
},
|
|
{
|
|
'@type': 'HowToStep',
|
|
position: 2,
|
|
name: 'Deploy QR Code',
|
|
text: 'Download and place your QR code on marketing materials, products, or digital platforms',
|
|
},
|
|
{
|
|
'@type': 'HowToStep',
|
|
position: 3,
|
|
name: 'Monitor Analytics',
|
|
text: 'View real-time scan data including location, device, and time patterns in your dashboard',
|
|
url: 'https://www.qrmaster.net/analytics',
|
|
},
|
|
{
|
|
'@type': 'HowToStep',
|
|
position: 4,
|
|
name: 'Optimize Campaigns',
|
|
text: 'Use insights to optimize placement, timing, and targeting of your QR code campaigns',
|
|
},
|
|
],
|
|
};
|
|
|
|
const breadcrumbItems: BreadcrumbItem[] = [
|
|
{ name: 'Home', url: '/' },
|
|
{ name: 'QR Code Tracking', url: '/qr-code-tracking' },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<SeoJsonLd data={[softwareSchema, howToSchema, breadcrumbSchema(breadcrumbItems)]} />
|
|
<div className="min-h-screen bg-white">
|
|
{/* Hero Section */}
|
|
<section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50 py-20">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
|
|
<Breadcrumbs items={breadcrumbItems} />
|
|
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
|
<div className="space-y-8">
|
|
<div className="inline-flex items-center space-x-2 bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-semibold">
|
|
<span>📊</span>
|
|
<span>Free QR Code Tracking</span>
|
|
</div>
|
|
|
|
<h1 className="text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
|
|
Track Every QR Code Scan with Powerful Analytics
|
|
</h1>
|
|
|
|
<p className="text-xl text-gray-600 leading-relaxed">
|
|
Monitor your QR code performance in real-time. Get detailed insights on location, device, time, and user behavior. Make data-driven decisions with our free tracking software.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<Link href="/signup">
|
|
<Button size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
|
|
Start Tracking Free
|
|
</Button>
|
|
</Link>
|
|
<Link href="/create">
|
|
<Button variant="outline" size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
|
|
Create Trackable QR Code
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-6 text-sm text-gray-600">
|
|
<div className="flex items-center space-x-2">
|
|
<svg className="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
|
</svg>
|
|
<span>No credit card required</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<svg className="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
|
</svg>
|
|
<span>Unlimited scans</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Analytics Preview */}
|
|
<div className="relative">
|
|
<Card className="p-6 shadow-2xl">
|
|
<h3 className="font-semibold text-lg mb-4">Live Analytics Dashboard</h3>
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between items-center pb-3 border-b">
|
|
<span className="text-gray-600">Total Scans</span>
|
|
<span className="text-2xl font-bold text-primary-600">12,547</span>
|
|
</div>
|
|
<div className="flex justify-between items-center pb-3 border-b">
|
|
<span className="text-gray-600">Unique Users</span>
|
|
<span className="text-2xl font-bold text-primary-600">8,392</span>
|
|
</div>
|
|
<div className="flex justify-between items-center pb-3 border-b">
|
|
<span className="text-gray-600">Top Location</span>
|
|
<span className="font-semibold">🇩🇪 Germany</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-gray-600">Top Device</span>
|
|
<span className="font-semibold">📱 iPhone</span>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
<div className="absolute -top-4 -right-4 bg-green-500 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-lg animate-pulse">
|
|
Live Updates
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Tracking Features */}
|
|
<section className="py-20 bg-gray-50">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
|
Powerful QR Code Tracking Features
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
|
Get complete visibility into your QR code performance with our comprehensive analytics suite
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{trackingFeatures.map((feature, index) => (
|
|
<Card key={index} className="p-6 hover:shadow-lg transition-shadow">
|
|
<div className="text-4xl mb-4">{feature.icon}</div>
|
|
<h3 className="text-xl font-semibold text-gray-900 mb-2">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-gray-600">
|
|
{feature.description}
|
|
</p>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Use Cases */}
|
|
<section className="py-20">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
|
QR Code Tracking Use Cases
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
|
See how businesses use QR code tracking to improve their operations
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-8">
|
|
{useCases.map((useCase, index) => (
|
|
<Card key={index} className="p-8">
|
|
<h3 className="text-2xl font-bold text-gray-900 mb-3">
|
|
{useCase.title}
|
|
</h3>
|
|
<p className="text-gray-600 mb-6">
|
|
{useCase.description}
|
|
</p>
|
|
<ul className="space-y-2">
|
|
{useCase.benefits.map((benefit, idx) => (
|
|
<li key={idx} className="flex items-center space-x-2">
|
|
<svg className="w-5 h-5 text-green-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
|
</svg>
|
|
<span className="text-gray-700">{benefit}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Comparison Table */}
|
|
<section className="py-20 bg-gray-50">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
|
QR Master vs Free Tools
|
|
</h2>
|
|
<p className="text-xl text-gray-600">
|
|
See why businesses choose QR Master for QR code tracking
|
|
</p>
|
|
</div>
|
|
|
|
<Card className="overflow-hidden">
|
|
<table className="w-full">
|
|
<thead className="bg-gray-100">
|
|
<tr>
|
|
<th className="px-6 py-4 text-left text-gray-900 font-semibold">Feature</th>
|
|
<th className="px-6 py-4 text-center text-gray-900 font-semibold">Free Tools</th>
|
|
<th className="px-6 py-4 text-center text-primary-600 font-semibold">QR Master</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-200">
|
|
{comparisonData.map((row, index) => (
|
|
<tr key={index}>
|
|
<td className="px-6 py-4 text-gray-900 font-medium">{row.feature}</td>
|
|
<td className="px-6 py-4 text-center">
|
|
{typeof row.free === 'boolean' ? (
|
|
row.free ? (
|
|
<span className="text-green-500 text-2xl">✓</span>
|
|
) : (
|
|
<span className="text-red-500 text-2xl">✗</span>
|
|
)
|
|
) : (
|
|
<span className="text-gray-600">{row.free}</span>
|
|
)}
|
|
</td>
|
|
<td className="px-6 py-4 text-center">
|
|
{typeof row.qrMaster === 'boolean' ? (
|
|
<span className="text-green-500 text-2xl">✓</span>
|
|
) : (
|
|
<span className="text-primary-600 font-semibold">{row.qrMaster}</span>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-20 bg-gradient-to-r from-primary-600 to-purple-600 text-white">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl text-center">
|
|
<h2 className="text-4xl font-bold mb-6">
|
|
Start Tracking Your QR Codes Today
|
|
</h2>
|
|
<p className="text-xl mb-8 text-primary-100">
|
|
Join thousands of businesses using QR Master to track and optimize their QR code campaigns
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Link href="/signup">
|
|
<Button size="lg" variant="secondary" className="text-lg px-8 py-4 w-full sm:w-auto bg-white text-primary-600 hover:bg-gray-100">
|
|
Create Free Account
|
|
</Button>
|
|
</Link>
|
|
<Link href="/pricing">
|
|
<Button size="lg" variant="outline" className="text-lg px-8 py-4 w-full sm:w-auto border-white text-white hover:bg-white/10">
|
|
View Pricing
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|