
import React from 'react';
import type { Metadata } from 'next';
import { Hero } from '@/components/marketing/Hero';
import { Features } from '@/components/marketing/Features';
import { FAQ } from '@/components/marketing/FAQ';
import en from '@/i18n/en.json';
import Link from 'next/link';
import SeoJsonLd from '@/components/SeoJsonLd';
import { articleSchema } from '@/lib/schema';

export const metadata: Metadata = {
    title: 'How to Track QR Code Scans (GA4 + UTM) | QR Master Guide',
    description: 'Learn how to track QR code scans using Google Analytics 4 (GA4), UTM parameters, and QR Master\'s built-in analytics. Step-by-step guide.',
    alternates: {
        canonical: 'https://www.qrmaster.net/guide/tracking-analytics',
    },
    openGraph: {
        url: 'https://www.qrmaster.net/guide/tracking-analytics',
    },
};

export default function TrackingGuidePage() {
    return (
        <div className="pt-20 bg-white">
            <SeoJsonLd data={[
                articleSchema({
                    headline: 'How to Track QR Code Scans: The Definitive Guide (2025)',
                    description: 'From basic click counts to advanced Google Analytics 4 integration. Learn to track every scan.',
                    image: 'https://www.qrmaster.net/og-tracking-guide.png',
                    datePublished: '2025-10-15',
                    dateModified: '2025-10-15',
                    author: 'QR Master Team',
                    url: 'https://www.qrmaster.net/guide/tracking-analytics'
                })
            ]} />
            <article className="max-w-4xl mx-auto px-4 py-20">
                <header className="mb-12 text-center">
                    <span className="text-sm font-semibold text-indigo-600 tracking-wide uppercase">Complete Guide</span>
                    <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mt-2 mb-6">
                        How to Track QR Code Scans: The Definitive Guide (2025)
                    </h1>
                    <p className="text-xl text-slate-600">
                        From basic click counts to advanced Google Analytics 4 integration.
                    </p>
                </header>

                <div className="prose prose-lg prose-slate mx-auto">
                    <div className="bg-indigo-50 border-l-4 border-indigo-500 p-6 rounded-r-lg mb-12">
                        <h3 className="text-indigo-900 font-bold text-lg m-0 mb-2">🚀 Quick Answer</h3>
                        <p className="text-indigo-800 m-0">
                            To track QR code scans, you generally need a <strong>Dynamic QR Code</strong>. It redirects users through a short URL (like <code>qr.do/xyz</code>) which counts the scan before sending them to your destination. For advanced data, add <strong>UTM parameters</strong> to your URL to see traffic in Google Analytics 4.
                        </p>
                    </div>

                    <h2>Method 1: Built-in Tracking (Easiest)</h2>
                    <p>
                        QR Master provides built-in analytics for all Dynamic QR Codes. This is the simplest way to see:
                    </p>
                    <ul>
                        <li><strong>Total Scans:</strong> How many times your code was scanned.</li>
                        <li><strong>Unique Scans:</strong> How many individual people scanned it.</li>
                        <li><strong>Location:</strong> City and country of the scanner.</li>
                        <li><strong>Device:</strong> iPhone, Android, Desktop, etc.</li>
                    </ul>
                    <p>
                        <Link href="/dynamic-qr-code-generator" className="text-indigo-600 hover:underline">Create a Dynamic QR Code</Link> to start tracking instantly.
                    </p>

                    <h2>Method 2: Google Analytics 4 (Advanced)</h2>
                    <p>
                        If you want to track what users <em>do</em> after scanning (e.g., did they buy something?), you should use UTM parameters.
                    </p>
                    <h3>Step 1: Build your URL</h3>
                    <p>Instead of using `https://yoursite.com`, add parameters:</p>
                    <code className="block bg-slate-800 text-white p-4 rounded-lg text-sm overflow-x-auto mb-4">
                        https://yoursite.com?utm_source=qr_code&utm_medium=offline&utm_campaign=summer_menu
                    </code>

                    <h3>Step 2: Generate the QR Code</h3>
                    <p>Paste this long URL into the <Link href="/" className="text-indigo-600 hover:underline">QR generator</Link>. Now, when scanning:</p>
                    <ol>
                        <li>The user goes to your specific tagged URL.</li>
                        <li>GA4 records a session with `source: qr_code`.</li>
                        <li>You can see exactly how much revenue that specific QR code generated.</li>
                    </ol>

                    <h2>Common Pitfalls</h2>
                    <ul>
                        <li><strong>Forgot to test:</strong> Always scan your code <em>before</em> printing 1,000 copies.</li>
                        <li><strong>QR Code too small:</strong> Ensure it's at least 2cm x 2cm (0.8" x 0.8") for short distance scanning.</li>
                        <li><strong>Using Static Codes for Tracking:</strong> Static codes link directly. We cannot track them unless you use Method 2 (UTM) and check your own server logs.</li>
                    </ul>
                </div>

                <div className="mt-16 text-center">
                    <Link href="/dynamic-qr-code-generator">
                        <button className="bg-indigo-600 text-white px-8 py-3 rounded-full font-bold text-lg hover:bg-indigo-700 transition-colors">
                            Create Trackable QR Code Free
                        </button>
                    </Link>
                </div>
            </article>
        </div>
    );
}
