Installation Guide

Your Website ID:

Quick Start Guide

Standard HTML

<!-- Add before closing body tag -->
<script>
    window.ANALYTICS_WEBSITE_ID = '';
</script>
<script src="http://engagetrack.replit.app/tracking.js" async></script>

Astro

<!-- In your layout file (e.g., Layout.astro) -->
<body>
    <slot />
    <script is:inline>
        window.ANALYTICS_WEBSITE_ID = '';
    </script>
    <script 
        is:inline 
        defer 
        src="http://engagetrack.replit.app/tracking.js"
        data-analytics-endpoint="/track"
    ></script>
</body>

Next.js / React Server Components

<!-- In your layout.js or template file -->
import Script from 'next/script'

export default function RootLayout({ children }) {
    return (
        <html>
            <body>
                {children}
                <Script strategy="beforeInteractive">
                    {`window.ANALYTICS_WEBSITE_ID = '';`}
                </Script>
                <Script 
                    src="http://engagetrack.replit.app/tracking.js"
                    strategy="afterInteractive"
                />
            </body>
        </html>
    )
}

Single Page Applications (React, Vue, Angular)

// In your main app component
useEffect(() => {
    // Set analytics ID
    window.ANALYTICS_WEBSITE_ID = '';
    
    // Load tracking script
    const script = document.createElement('script');
    script.src = 'http://engagetrack.replit.app/tracking.js';
    script.async = true;
    document.body.appendChild(script);
    
    // Cleanup on unmount
    return () => {
        document.body.removeChild(script);
    };
}, []);

WordPress

<!-- Add to footer.php or use "Insert Headers and Footers" plugin -->
<?php
// Add before closing body tag
?>
<script>
    window.ANALYTICS_WEBSITE_ID = '';
</script>
<script src="http://engagetrack.replit.app/tracking.js" async></script>

Important: Make sure to place the tracking code before the closing </body> tag for optimal performance.

Cookie Compliance (Required)

Important: To comply with GDPR and other privacy regulations, you must implement a cookie consent banner on your website before activating EngageTrack.

Example cookie banner implementation:

<!-- Add this before the tracking code -->
<script>
    function initAnalytics() {
        window.ANALYTICS_WEBSITE_ID = '';
        const script = document.createElement('script');
        script.src = 'http://engagetrack.replit.app/tracking.js';
        script.async = true;
        document.body.appendChild(script);
    }

    // Check for existing consent
    if (localStorage.getItem('cookieConsent') === 'accepted') {
        initAnalytics();
    } else {
        // Show cookie banner
        const banner = document.createElement('div');
        banner.innerHTML = `
            <div style="position: fixed; bottom: 0; left: 0; right: 0; background: #1a1c1e; padding: 1rem; z-index: 9999; border-top: 1px solid rgba(255,255,255,0.1);">
                <div style="max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;">
                    <p style="margin: 0; color: #fff;">We use cookies to analyze site traffic and improve your experience. <a href="/privacy" style="color: #3b82f6;">Learn more</a></p>
                    <button onclick="acceptCookies()" style="background: #3b82f6; color: #fff; border: none; padding: 0.5rem 1rem; border-radius: 0.25rem; cursor: pointer;">Accept</button>
                </div>
            </div>
        `;
        document.body.appendChild(banner);
    }

    function acceptCookies() {
        localStorage.setItem('cookieConsent', 'accepted');
        document.querySelector('[style*="position: fixed"]').remove();
        initAnalytics();
    }
</script>