Back to home

Tracking Documentation

Complete guide to installing and configuring the CRO9 behavioral tracker

Quick Start

Add this script tag before the closing </body> tag on any page you want to track:

<script
  src="https://cro9.com/cro9-tracker.js"
  data-api-key="YOUR_API_KEY"
  data-consent-mode="gdpr">
</script>
Get your API key from Settings → Tracking

Configuration Options

AttributeValuesDefaultDescription
data-api-keyStringRequiredYour unique CRO9 API key
data-consent-modegdpr, ccpa, essential, disabledgdprPrivacy compliance mode
data-debugtrue, falsefalseEnable console logging

Next.js / React Integration

For single-page applications, use the Script component for proper loading:

import Script from 'next/script'

export default function Layout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://cro9.com/cro9-tracker.js"
          data-api-key={process.env.NEXT_PUBLIC_CRO9_KEY}
          data-consent-mode="gdpr"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

JavaScript API

Once loaded, interact with the tracker via window.CRO9:

Track Custom Events

// Track a custom event
CRO9.track('button_click', {
  buttonId: 'pricing-cta',
  variant: 'A',
  value: 99
});

Identify Users

// Identify a user (requires consent)
CRO9.identify('user_123', {
  email: 'user@example.com',
  name: 'John Doe',
  plan: 'pro'
});

Exit Intent Hook

// Listen for exit intent
window.addEventListener('cro9:exitIntent', () => {
  // Show your exit popup
  showExitPopup();
});

Need Help?

Discord Community

Join our community for real-time help

Email Support

support@cro9.com

Get Your API Key

Settings → Tracking