Auric JavaScript Tracking

Installation

Get started with client-side event tracking in minutes.

Quick Installation

Add this code snippet before the closing </body> tag on your website:

<script>
(function() {
    var script = document.createElement('script');
    script.src = 'https://YOUR-APP-ID.auriccloud.com/static/auric.js';
    script.onload = function() {
        AURIC.init({
            tenant: 'YOUR-APP-ID',
            defaultEventType: 'form-submit'
        });
    };
    document.head.appendChild(script);
})();
</script>

Basic Setup

Configure the Auric tracker with your specific requirements.

Minimal Configuration

AURIC.init({
    tenant: 'your-app-id',
    defaultEventType: 'lead-capture'
});

Full Configuration Example

AURIC.init({
    tenant: 'your-app-id',
    defaultEventType: 'email-signup',
    debug: false,
    autoTrack: true,
    trackPageViews: false,
    sessionTimeout: 30,
    customData: {
        page_type: 'landing',
        campaign: 'summer-2025'
    },
    onLoad: function() {
        console.log('Auric tracker loaded successfully');
    },
    onError: function(error) {
        console.error('Auric error:', error);
    }
});

Configuration Options

Automatic Tracking

Auric automatically captures form submissions and email addresses without additional coding.

How Automatic Tracking Works

• Form Detection: Monitors all forms on the page
• Email Extraction: Finds email addresses from form inputs
• Event Creation: Creates events when forms are submitted
• Data Collection: Captures page URL, referrer, and UTM parameters

Supported Form Elements

Example HTML Forms

<!-- Method 1: Input type="email" -->
<form>
    <input type="email" name="user_email" placeholder="Your email">
    <button type="submit">Subscribe</button>
</form>

<!-- Method 2: Named input -->
<form>
    <input type="text" name="email" placeholder="Email address">
    <input type="text" name="company" placeholder="Company">
    <button type="submit">Get Demo</button>
</form>

<!-- Method 3: ID-based -->
<form>
    <input type="text" id="email" placeholder="Enter email">
    <button type="submit">Sign Up</button>
</form>

Custom Data Attributes

Add custom data to automatically tracked events:

<form data-auric-source="newsletter" data-auric-campaign="header-signup">
    <input type="email" name="email">
    <button type="submit">Subscribe</button>
</form>

Manual Tracking

Track custom events programmatically for more control over your data.

Basic Manual Tracking

// Track an event with email
AURIC.track('demo-request', {
    email: 'user@example.com'
});

// Track with additional data
AURIC.track('purchase', {
    email: 'customer@example.com',
    custom: {
        amount: 99.99,
        plan: 'premium',
        trial_days: 14
    }
});

Advanced Manual Tracking

AURIC.track('webinar-signup', {
    email: 'attendee@example.com',
    occurred_at: new Date().toISOString(),
    lead_source: 'Social Media',
    utm_source: 'facebook',
    utm_medium: 'social',
    utm_campaign: 'webinar-promo',
    custom: {
        webinar_topic: 'Advanced Marketing',
        registration_type: 'early_bird',
        referrer_code: 'FRIEND20'
    }
});

Conditional Tracking

// Track based on user actions
document.getElementById('download-btn').addEventListener('click', function() {
    var email = document.getElementById('user-email').value;
    if (email && validateEmail(email)) {
        AURIC.track('pdf-download', {
            email: email,
            custom: {
                file_name: 'pricing-guide.pdf',
                download_method: 'direct_link'
            }
        });
    }
});

// Track scroll depth
window.addEventListener('scroll', function() {
    var scrollPercent = Math.round((window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100);
    if (scrollPercent >= 75 && !window.auricScrollTracked) {
        var email = getStoredEmail(); // Your function to get email
        if (email) {
            AURIC.track('content-engagement', {
                email: email,
                custom: {
                    scroll_depth: scrollPercent,
                    page_url: window.location.href
                }
            });
        }
        window.auricScrollTracked = true;
    }
});

Configuration Options

Customize the Auric tracker behavior for your specific needs.

Dynamic Configuration

// Update default event type
AURIC.config.defaultEventType = 'newsletter-signup';

// Add global custom data
AURIC.config.customData = {
    page_section: 'header',
    ab_test_variant: 'B'
};

// Enable debug mode
AURIC.config.debug = true;

Environment-Specific Setup

// Different configs for different environments
var auricConfig = {
    tenant: 'your-app-id',
    defaultEventType: 'form-submit'
};

if (window.location.hostname === 'localhost' || window.location.hostname.includes('staging')) {
    auricConfig.debug = true;
    auricConfig.tenant = 'staging-app-id';
} else {
    au