SEO
This commit is contained in:
Timo Knuth
@@ -1,402 +1,467 @@
|
||||
import React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
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';
|
||||
import { AnswerFirstBlock } from '@/components/marketing/AnswerFirstBlock';
|
||||
import { FAQSection } from '@/components/aeo/FAQSection';
|
||||
import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection';
|
||||
import { MarketingPageTracker, TrackedCtaLink } from '@/components/marketing/MarketingAnalytics';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
absolute: 'QR Code Tracking & Analytics - Track Every Scan',
|
||||
},
|
||||
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',
|
||||
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',
|
||||
images: ['/og-image.png'],
|
||||
},
|
||||
twitter: {
|
||||
title: 'QR Code Tracking & Analytics - Track Every Scan',
|
||||
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',
|
||||
},
|
||||
|
||||
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' },
|
||||
];
|
||||
|
||||
const relatedUseCaseLinks = [
|
||||
{
|
||||
href: '/use-cases/real-estate-sign-qr-codes',
|
||||
title: 'Real Estate Sign QR Codes',
|
||||
description: 'Compare sign, brochure, and open-house scans without blending every property source together.',
|
||||
ctaLabel: 'Create your real estate QR code',
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
absolute: 'QR Code Tracking & Analytics - Track Every Scan',
|
||||
},
|
||||
description:
|
||||
'Track QR code scans with analytics for time, device, and location context. Use dynamic QR codes to measure placements and keep printed campaigns accountable.',
|
||||
keywords:
|
||||
'qr code tracking, qr code analytics, track qr scans, dynamic qr tracking, qr scan analytics',
|
||||
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',
|
||||
},
|
||||
{
|
||||
href: '/use-cases/feedback-qr-codes',
|
||||
title: 'Feedback QR Codes',
|
||||
description: 'Measure which service surfaces and follow-up prompts actually generate customer responses.',
|
||||
ctaLabel: 'Create your feedback QR code',
|
||||
},
|
||||
{
|
||||
href: '/use-cases/coupon-qr-codes',
|
||||
title: 'Coupon QR Codes',
|
||||
description: 'Tie printed discount placements to measurable scans so you can compare promotion performance.',
|
||||
ctaLabel: 'Create your coupon QR code',
|
||||
},
|
||||
{
|
||||
href: '/use-cases',
|
||||
title: 'Explore the use-case hub',
|
||||
description: 'Browse the first commercial workflows built around dynamic updates and measurable scans.',
|
||||
ctaLabel: 'Explore QR code use cases',
|
||||
},
|
||||
];
|
||||
},
|
||||
openGraph: {
|
||||
title: 'QR Code Tracking & Analytics - Track Every Scan',
|
||||
description:
|
||||
'Track QR code scans with analytics for time, device, and location context. Use dynamic QR codes to measure placements and campaigns.',
|
||||
url: 'https://www.qrmaster.net/qr-code-tracking',
|
||||
type: 'website',
|
||||
images: ['/og-image.png'],
|
||||
},
|
||||
twitter: {
|
||||
title: 'QR Code Tracking & Analytics - Track Every Scan',
|
||||
description:
|
||||
'Track QR code scans with analytics for time, device, and location context. Use dynamic QR codes to measure placements and campaigns.',
|
||||
},
|
||||
};
|
||||
|
||||
const trackingFeatures = [
|
||||
{
|
||||
title: 'Time-based scan activity',
|
||||
description:
|
||||
'Review when scans happen so you can compare campaign bursts, peak service windows, or event timing.',
|
||||
},
|
||||
{
|
||||
title: 'Location context',
|
||||
description:
|
||||
'See country, city, and region-level scan context in the dashboard to understand where scans are coming from.',
|
||||
},
|
||||
{
|
||||
title: 'Device mix',
|
||||
description:
|
||||
'Understand whether scans are happening on phone or desktop-heavy traffic patterns and adapt landing pages accordingly.',
|
||||
},
|
||||
{
|
||||
title: 'Total and unique scan reporting',
|
||||
description:
|
||||
'Use scan counts to understand overall activity and compare repeated scans with broader reach.',
|
||||
},
|
||||
{
|
||||
title: 'Placement-ready measurement',
|
||||
description:
|
||||
'Track scans from print surfaces such as flyers, menus, signs, packaging, and event materials.',
|
||||
},
|
||||
{
|
||||
title: 'Dynamic QR workflow',
|
||||
description:
|
||||
'Tracking works with dynamic QR codes that route through QR Master before the scanner reaches the final destination.',
|
||||
},
|
||||
];
|
||||
|
||||
const trackingUseCases = [
|
||||
{
|
||||
title: 'Marketing campaigns',
|
||||
description:
|
||||
'Measure how printed placements such as flyers, signs, packaging inserts, or booth materials perform over time.',
|
||||
benefits: ['Compare placements', 'Review campaign timing', 'See scan context in one dashboard'],
|
||||
},
|
||||
{
|
||||
title: 'Events',
|
||||
description:
|
||||
'Track which event materials drive scans before, during, and after the event instead of treating every print touchpoint the same.',
|
||||
benefits: ['Compare booth and signage scans', 'Watch event-day traffic', 'Keep destinations updateable'],
|
||||
},
|
||||
{
|
||||
title: 'Product and packaging',
|
||||
description:
|
||||
'Measure which labels, inserts, or support links are getting scans after products leave the warehouse.',
|
||||
benefits: ['Track support content usage', 'Compare packaging placements', 'Keep links current'],
|
||||
},
|
||||
{
|
||||
title: 'Restaurant and in-store surfaces',
|
||||
description:
|
||||
'Review scans from menus, table cards, windows, or counters and compare when in-store prompts actually get used.',
|
||||
benefits: ['Spot peak scan periods', 'Compare service surfaces', 'Keep menu links current'],
|
||||
},
|
||||
];
|
||||
|
||||
const trackingComparison = [
|
||||
{ feature: 'Destination can change later', static: false, dynamic: true },
|
||||
{ feature: 'Scan analytics', static: false, dynamic: true },
|
||||
{ feature: 'Placement comparison after print', static: false, dynamic: true },
|
||||
{ feature: 'Reusable for campaigns that evolve', static: false, dynamic: true },
|
||||
];
|
||||
|
||||
const faqItems = [
|
||||
{
|
||||
question: 'Can I track a static QR code?',
|
||||
answer:
|
||||
'Static QR codes store the destination directly in the image, so QR Master cannot add the redirect step needed for tracking. Tracking requires a dynamic QR workflow.',
|
||||
},
|
||||
{
|
||||
question: 'What can I measure with QR code tracking?',
|
||||
answer:
|
||||
'QR Master can report scan activity such as time, device, and location context, along with total and unique scan reporting in the analytics views.',
|
||||
},
|
||||
{
|
||||
question: 'Why does tracking use a dynamic QR code?',
|
||||
answer:
|
||||
'Tracking happens during the redirect step. A dynamic QR code routes the scan through QR Master first, which makes scan reporting possible before the user reaches the final destination.',
|
||||
},
|
||||
{
|
||||
question: 'When is QR code tracking most useful?',
|
||||
answer:
|
||||
'It is most useful when you need to compare placements, campaign timing, or printed surfaces and want a measurable record instead of guessing which QR code prompt worked.',
|
||||
},
|
||||
];
|
||||
|
||||
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',
|
||||
offers: {
|
||||
'@type': 'Offer',
|
||||
price: '0',
|
||||
priceCurrency: 'EUR',
|
||||
availability: 'https://schema.org/InStock',
|
||||
},
|
||||
description:
|
||||
'Track QR code scans with analytics for time, device, and location context. Use dynamic QR codes to measure placements and campaigns.',
|
||||
featureList: [
|
||||
'Time-based scan reporting',
|
||||
'Location context in analytics',
|
||||
'Device mix reporting',
|
||||
'Total and unique scan reporting',
|
||||
'Dynamic QR workflow for trackable printed placements',
|
||||
],
|
||||
};
|
||||
|
||||
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: 'Create a dynamic QR code, deploy it, and review scan analytics from the QR Master dashboard.',
|
||||
totalTime: 'PT5M',
|
||||
step: [
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 1,
|
||||
name: 'Create a dynamic QR code',
|
||||
text: 'Create a dynamic QR code in QR Master so the scan can route through the tracking step first.',
|
||||
url: 'https://www.qrmaster.net/signup',
|
||||
},
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 2,
|
||||
name: 'Deploy the QR code',
|
||||
text: 'Place the QR code on the flyer, menu, sign, package, or event material you want to measure.',
|
||||
},
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 3,
|
||||
name: 'Review analytics',
|
||||
text: 'Open the dashboard to review scan context such as time, device, location, and total activity.',
|
||||
},
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 4,
|
||||
name: 'Improve the next placement',
|
||||
text: 'Use the scan patterns to improve your next campaign, placement, or destination update.',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const faqSchema = {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'FAQPage',
|
||||
'@id': 'https://www.qrmaster.net/qr-code-tracking#faq',
|
||||
mainEntity: faqItems.map((item) => ({
|
||||
'@type': 'Question',
|
||||
name: item.question,
|
||||
acceptedAnswer: {
|
||||
'@type': 'Answer',
|
||||
text: item.answer,
|
||||
},
|
||||
})),
|
||||
};
|
||||
|
||||
const breadcrumbItems: BreadcrumbItem[] = [
|
||||
{ name: 'Home', url: '/' },
|
||||
{ name: 'QR Code Tracking', url: '/qr-code-tracking' },
|
||||
];
|
||||
|
||||
const relatedUseCaseLinks = [
|
||||
{
|
||||
href: '/use-cases/real-estate-sign-qr-codes',
|
||||
title: 'Real Estate Sign QR Codes',
|
||||
description:
|
||||
'Compare sign, brochure, and open-house scans without blending every property source together.',
|
||||
ctaLabel: 'Create your real estate QR code',
|
||||
},
|
||||
{
|
||||
href: '/use-cases/feedback-qr-codes',
|
||||
title: 'Feedback QR Codes',
|
||||
description:
|
||||
'Measure which service surfaces and follow-up prompts actually generate customer responses.',
|
||||
ctaLabel: 'Create your feedback QR code',
|
||||
},
|
||||
{
|
||||
href: '/use-cases/coupon-qr-codes',
|
||||
title: 'Coupon QR Codes',
|
||||
description:
|
||||
'Tie printed discount placements to measurable scans so you can compare promotion performance.',
|
||||
ctaLabel: 'Create your coupon QR code',
|
||||
},
|
||||
{
|
||||
href: '/use-cases',
|
||||
title: 'Explore the use-case hub',
|
||||
description:
|
||||
'Browse the first commercial workflows built around dynamic updates and measurable scans.',
|
||||
ctaLabel: 'Explore QR code use cases',
|
||||
},
|
||||
];
|
||||
|
||||
export default function QRCodeTrackingPage() {
|
||||
return (
|
||||
<>
|
||||
<SeoJsonLd data={[softwareSchema, howToSchema, breadcrumbSchema(breadcrumbItems)]} />
|
||||
<SeoJsonLd data={[softwareSchema, howToSchema, faqSchema, breadcrumbSchema(breadcrumbItems)]} />
|
||||
<MarketingPageTracker pageType="commercial" cluster="qr-tracking" />
|
||||
<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>
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50 py-20">
|
||||
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<Breadcrumbs items={breadcrumbItems} />
|
||||
<div className="grid items-center gap-12 lg:grid-cols-2">
|
||||
<div className="space-y-8">
|
||||
<div className="inline-flex items-center rounded-full bg-blue-100 px-4 py-2 text-sm font-semibold text-blue-800">
|
||||
Trackable dynamic QR workflows
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<TrackedCtaLink href="/signup" ctaLabel="Start Tracking Free" ctaLocation="hero_primary" pageType="commercial" cluster="qr-tracking">
|
||||
<Button size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
|
||||
<div className="space-y-5">
|
||||
<h1 className="text-5xl font-bold leading-tight text-gray-900 lg:text-6xl">
|
||||
Track every QR code scan with useful context
|
||||
</h1>
|
||||
<p className="text-xl leading-relaxed text-gray-600">
|
||||
Use dynamic QR codes to measure scans by time, device, and location context,
|
||||
so printed campaigns and physical placements stop being guesswork.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
'Track printed placements with a dynamic QR workflow',
|
||||
'Review time, device, and location context',
|
||||
'Compare total and unique scan activity',
|
||||
'Use one dashboard to improve the next campaign or placement',
|
||||
].map((feature) => (
|
||||
<div key={feature} className="flex items-center gap-3">
|
||||
<div className="flex h-5 w-5 items-center justify-center rounded-full bg-green-500">
|
||||
<svg className="h-3 w-3 text-white" 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>
|
||||
</div>
|
||||
<span className="text-gray-700">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4 sm:flex-row">
|
||||
<TrackedCtaLink
|
||||
href="/signup"
|
||||
ctaLabel="Start Tracking Free"
|
||||
ctaLocation="hero_primary"
|
||||
pageType="commercial"
|
||||
cluster="qr-tracking"
|
||||
>
|
||||
<Button size="lg" className="w-full px-8 py-4 text-lg sm:w-auto">
|
||||
Start Tracking Free
|
||||
</Button>
|
||||
</TrackedCtaLink>
|
||||
<TrackedCtaLink href="/signup" ctaLabel="Create Trackable QR Code" ctaLocation="hero_secondary" pageType="commercial" cluster="qr-tracking">
|
||||
<Button variant="outline" size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
|
||||
Create Trackable QR Code
|
||||
<TrackedCtaLink
|
||||
href="/dynamic-qr-code-generator"
|
||||
ctaLabel="Create Dynamic QR Code"
|
||||
ctaLocation="hero_secondary"
|
||||
pageType="commercial"
|
||||
cluster="qr-tracking"
|
||||
>
|
||||
<Button variant="outline" size="lg" className="w-full px-8 py-4 text-lg sm:w-auto">
|
||||
Create Dynamic QR Code
|
||||
</Button>
|
||||
</TrackedCtaLink>
|
||||
</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>Placement-ready reports</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">
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Card className="p-6 shadow-2xl">
|
||||
<h3 className="mb-4 text-lg font-semibold">Analytics overview</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between border-b pb-3">
|
||||
<span className="text-gray-600">Placement view</span>
|
||||
<span className="text-base font-semibold text-primary-600">Flyer vs booth vs table card</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center pb-3 border-b">
|
||||
<span className="font-semibold text-primary-600">Flyer, sign, menu, package</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between border-b pb-3">
|
||||
<span className="text-gray-600">Time trend</span>
|
||||
<span className="text-base font-semibold text-primary-600">Lunch, event day, or campaign burst</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center pb-3 border-b">
|
||||
<span className="font-semibold text-primary-600">Hourly and daily patterns</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between border-b pb-3">
|
||||
<span className="text-gray-600">Location context</span>
|
||||
<span className="font-semibold">Region and city level view</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-gray-600">Device context</span>
|
||||
<span className="font-semibold">Phone, desktop, and scan mix</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>
|
||||
<span className="font-semibold">Country, city, region</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-600">Device mix</span>
|
||||
<span className="font-semibold">Phone or desktop traffic</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<div className="absolute -right-4 -top-4 rounded-full bg-green-500 px-4 py-2 text-sm font-semibold text-white shadow-lg">
|
||||
Dynamic QR required
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<AnswerFirstBlock
|
||||
whatIsIt="QR code tracking works when a dynamic QR code routes the scan through QR Master before the scanner reaches the final destination. That redirect step is what makes analytics such as time, device, and location context possible."
|
||||
whenToUse={[
|
||||
'You want to compare placements such as flyers, signs, menus, packaging, or event surfaces',
|
||||
'You need a measurable record of scans instead of relying on guesswork after print is deployed',
|
||||
'You expect the destination to change while keeping the same printed QR code in use',
|
||||
]}
|
||||
comparison={{
|
||||
leftTitle: 'Static QR only',
|
||||
rightTitle: 'Dynamic QR with tracking',
|
||||
items: [
|
||||
{ label: 'Destination can change later', value: true, text: 'Not available' },
|
||||
{ label: 'Scan analytics', value: true, text: 'Not available' },
|
||||
{ label: 'Placement comparison after print', value: true, text: 'Limited' },
|
||||
],
|
||||
}}
|
||||
howTo={{
|
||||
steps: [
|
||||
'Create a dynamic QR code in QR Master',
|
||||
'Place it on the print surface or campaign you want to measure',
|
||||
'Review analytics and improve the next placement or destination update',
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto max-w-5xl px-4 pb-8 sm:px-6 lg:px-8">
|
||||
<FAQSection items={faqItems} title="QR tracking questions" />
|
||||
</div>
|
||||
|
||||
<section className="bg-gray-50 py-20">
|
||||
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="mb-4 text-4xl font-bold text-gray-900">What QR tracking helps you measure</h2>
|
||||
<p className="mx-auto max-w-3xl text-xl text-gray-600">
|
||||
These are the analytics surfaces the current product experience already supports without inventing extra claims.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
{trackingFeatures.map((feature) => (
|
||||
<Card key={feature.title} className="p-6 transition-shadow hover:shadow-lg">
|
||||
<h3 className="mb-2 text-xl font-semibold text-gray-900">{feature.title}</h3>
|
||||
<p className="text-gray-600">{feature.description}</p>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-20">
|
||||
<div className="container mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="mb-4 text-4xl font-bold text-gray-900">Tracking setup comparison</h2>
|
||||
<p className="text-xl text-gray-600">
|
||||
Tracking is a dynamic QR workflow, not a static QR workflow with retroactive reporting.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-100">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-left font-semibold text-gray-900">Capability</th>
|
||||
<th className="px-6 py-4 text-center font-semibold text-gray-900">Static QR</th>
|
||||
<th className="px-6 py-4 text-center font-semibold text-primary-600">Dynamic QR tracking</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{trackingComparison.map((row) => (
|
||||
<tr key={row.feature}>
|
||||
<td className="px-6 py-4 font-medium text-gray-900">{row.feature}</td>
|
||||
<td className="px-6 py-4 text-center text-gray-600">{row.static ? 'Yes' : 'No'}</td>
|
||||
<td className="px-6 py-4 text-center font-semibold text-primary-600">
|
||||
{row.dynamic ? 'Yes' : 'No'}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-gray-50 py-20">
|
||||
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="mb-4 text-4xl font-bold text-gray-900">Where tracking is most useful</h2>
|
||||
<p className="mx-auto max-w-3xl text-xl text-gray-600">
|
||||
Use tracking where physical surfaces or campaigns need measurable follow-through after they are deployed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 md:grid-cols-2">
|
||||
{trackingUseCases.map((useCase) => (
|
||||
<Card key={useCase.title} className="p-8">
|
||||
<h3 className="mb-3 text-2xl font-bold text-gray-900">{useCase.title}</h3>
|
||||
<p className="mb-6 text-gray-600">{useCase.description}</p>
|
||||
<ul className="space-y-2">
|
||||
{useCase.benefits.map((benefit) => (
|
||||
<li key={benefit} className="flex items-center gap-2">
|
||||
<svg className="h-5 w-5 flex-shrink-0 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 className="text-gray-700">{benefit}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<GrowthLinksSection
|
||||
eyebrow="Tracking-led workflows"
|
||||
title="Where scan visibility matters most"
|
||||
@@ -406,30 +471,47 @@ export default function QRCodeTrackingPage() {
|
||||
cluster="qr-tracking"
|
||||
/>
|
||||
|
||||
{/* 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">
|
||||
<section className="bg-gradient-to-r from-primary-600 to-purple-600 py-20 text-white">
|
||||
<div className="container mx-auto max-w-4xl px-4 text-center sm:px-6 lg:px-8">
|
||||
<h2 className="mb-6 text-4xl font-bold">Start tracking your QR codes today</h2>
|
||||
<p className="mb-8 text-xl text-primary-100">
|
||||
Measure scans with enough context to improve the next placement, campaign, or printed workflow.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<TrackedCtaLink href="/signup" ctaLabel="Create Free Account" ctaLocation="footer_primary" pageType="commercial" cluster="qr-tracking">
|
||||
<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">
|
||||
<div className="flex flex-col justify-center gap-4 sm:flex-row">
|
||||
<TrackedCtaLink
|
||||
href="/signup"
|
||||
ctaLabel="Create Free Account"
|
||||
ctaLocation="footer_primary"
|
||||
pageType="commercial"
|
||||
cluster="qr-tracking"
|
||||
>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="secondary"
|
||||
className="w-full bg-white px-8 py-4 text-lg text-primary-600 hover:bg-gray-100 sm:w-auto"
|
||||
>
|
||||
Create Free Account
|
||||
</Button>
|
||||
</TrackedCtaLink>
|
||||
<TrackedCtaLink href="/pricing" ctaLabel="View Pricing" ctaLocation="footer_secondary" pageType="commercial" cluster="qr-tracking">
|
||||
<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
|
||||
<TrackedCtaLink
|
||||
href="/dynamic-qr-code-generator"
|
||||
ctaLabel="Create Dynamic QR Code"
|
||||
ctaLocation="footer_secondary"
|
||||
pageType="commercial"
|
||||
cluster="qr-tracking"
|
||||
>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="w-full border-white px-8 py-4 text-lg text-white hover:bg-white/10 sm:w-auto"
|
||||
>
|
||||
Create Dynamic QR Code
|
||||
</Button>
|
||||
</TrackedCtaLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user