Identify Users with Lyt.identify

Identify Users on Any Website

Learn how to identify website visitors when they submit any HTML form, enabling cross-device tracking and enriched visitor profiles in Lytical.

Prerequisites

• Lytical tracking code installed on your website
• One or more forms with an email field
• Ability to add JavaScript to your site

Basic Implementation

The simplest way to identify users is to call lyt.identify() when a form with an email field is submitted:

<script>
document.addEventListener('submit', function(e) {
  var form = e.target;
  if (!form || form.tagName !== 'FORM') return;

  var emailInput = form.querySelector('input[type="email"], input[name="email"]');
  if (!emailInput || !emailInput.value) return;

  var email = emailInput.value;

  if (typeof lyt !== 'undefined') {
    lyt.identify(email, {
      email: email,
      source: 'website_form'
    });
    console.log('[Lytical] Identified user:', email);
  }
}, true);
</script>

Complete Implementation

This more robust script captures email, name, and phone from any form:

<script>
// Lytical Universal Form Integration

(function() {

  // Field name patterns to look for
  var fieldPatterns = {
    email: ['email', 'e-mail', 'email_address', 'emailaddress', 'user_email', 'your-email', 'contact_email'],
    name: ['name', 'full_name', 'fullname', 'your-name', 'contact_name'],
    firstName: ['first_name', 'firstname', 'fname', 'first-name', 'given_name'],
    lastName: ['last_name', 'lastname', 'lname', 'last-name', 'family_name', 'surname'],
    phone: ['phone', 'telephone', 'tel', 'mobile', 'phone_number', 'phonenumber', 'your-phone']
  };

  // Extract field value by pattern
  function findField(data, patterns) {
    for (var key in data) {
      var lowerKey = key.toLowerCase().replace(/[\s_-]/g, '');
      for (var i = 0; i < patterns.length; i++) {
        var pattern = patterns[i].toLowerCase().replace(/[\s_-]/g, '');
        if (lowerKey === pattern || lowerKey.includes(pattern)) {
          return data[key];
        }
      }
    }
    return '';
  }

  // Extract all fields from form
  function extractFields(form) {
    var data = {};

    // Get all form inputs
    var inputs = form.querySelectorAll('input, textarea, select');
    inputs.forEach(function(input) {
      var name = input.name || input.id || input.placeholder || '';
      if (name && input.value) {
        data[name] = input.value;
      }
    });

    // Also try FormData for completeness
    try {
      var formData = new FormData(form);
      for (var pair of formData.entries()) {
        if (!data[pair[0]]) {
          data[pair[0]] = pair[1];
        }
      }
    } catch (e) {}

    return data;
  }

  // Build identity from form data
  function buildIdentity(data) {
    var result = {};

    // Find email (required)
    result.email = findField(data, fieldPatterns.email);
    if (!result.email) return null;

    // Find name (try full name first, then first + last)
    result.name = findField(data, fieldPatterns.name);
    if (!result.name) {
      var firstName = findField(data, fieldPatterns.firstName);
      var lastName = findField(data, fieldPatterns.lastName);
      if (firstName || lastName) {
        result.name = [firstName, lastName].filter(Boolean).join(' ');
      }
    }

    // Find phone
    result.phone = findField(data, fieldPatterns.phone);

    return result;
  }

  // Detect source from form or page
  function detectSource(form) {
    // Check form attributes
    var formName = (form.name || form.id || form.getAttribute('data-form') || '').toLowerCase();
    var formAction = (form.action || '').toLowerCase();

    if (formName.includes('contact') || formAction.includes('contact')) return 'contact_form';
    if (formName.includes('newsletter') || formName.includes('subscribe')) return 'newsletter_signup';
    if (formName.includes('signup') || formName.includes('register')) return 'signup_form';
    if (formName.includes('login') || formName.includes('signin')) return 'login_form';
    if (formName.includes('demo')) return 'demo_request';
    if (formName.includes('quote')) return 'quote_request';

    // Check page URL
    var path = location.pathname.toLowerCase();
    if (path.includes('contact')) return 'contact_form';
    if (path.includes('newsletter')) return 'newsletter_signup';
    if (path.includes('signup') || path.includes('register')) return 'signup_form';
    if (path.includes('login') || path.includes('signin')) return 'login_form';
    if (path.includes('demo')) return 'demo_request';
    if (path.includes('pricing')) return 'pricing_inquiry';

    return 'website_form';
  }

  // Main form submission handler
  document.addEventListener('submit', function(e) {
    var form = e.target;
    if (!form || form.tagName !== 'FORM') return;

    var data = extractFields(form);
    var identity = buildIdentity(data);

    if (!identity || !identity.email) return;
    if (typeof lyt === 'undefined') return;

    var source = detectSource(form);

    lyt.identify(identity.email, {
      email: identity.email,
      name: identity.name || '',
      phone: identity.phone || '',
      source: source
    });

    console.log('[Lytical] Identified user:', identity.email);

  }, true);

})();
</script>

AJAX Form Handling

If your forms submit via AJAX (without page reload), the submit event still fires. However, you may want to identify only on successful submission. Here's how:

<script>
// For AJAX forms: Store data on submit, identify on success

var pendingForms = new WeakMap();

// Capture form data on submit
document.addEventListener('submit', function(e) {
  var form = e.target;
  if (form && form.tagName === 'FORM') {
    pendingForms.set(form, {
      data: Object.fromEntries(new FormData(form)),
      timestamp: Date.now()
    });
  }
}, true);

// Call this function when your AJAX request succeeds
function lytIdentifyOnSuccess(form) {
  var pending = pendingForms.get(form);
  if (!pending) return;

  var data = pending.data;
  var email = data.email || data.Email || data['your-email'];

  if (email && typeof lyt !== 'undefined') {
    lyt.identify(email, {
      email: email,
      name: data.name || data.Name || '',
      source: 'website_form'
    });
    console.log('[Lytical] Identified user:', email);
  }

  pendingForms.delete(form);
}

// Example usage with fetch:
/*
form.addEventListener('submit', function(e) {
  e.preventDefault();

  fetch('/submit', {
    method: 'POST',
    body: new FormData(form)
  })
  .then(response => {
    if (response.ok) {
      lytIdentifyOnSuccess(form);
      // Show success message
    }
  });
});
*/
</script>

Identifying Logged-In Users

If your site has user accounts, identify users when they log in or on every page load while logged in:

On Login

// Call this after successful login
function onLoginSuccess(user) {
  if (user.email && typeof lyt !== 'undefined') {
    lyt.identify(user.email, {
      email: user.email,
      name: user.name || '',
      user_id: user.id || '',
      source: 'login'
    });
  }
}

On Every Page (Server-Side Render)

<!-- Add this to your page template when user is logged in -->
<script>
if (typeof lyt !== 'undefined') {
  lyt.identify('', {
    email: '',
    name: '',
    user_id: '',
    source: 'authenticated_session'
  });
}
</script>

Framework-Specific Examples

React

// In your form component
const handleSubmit = async (e) => {
  e.preventDefault();

  const formData = new FormData(e.target);
  const email = formData.get('email');

  try {
    await submitForm(formData);

    // Identify on success
    if (email && window.lyt) {
      window.lyt.identify(email, {
        email: email,
        name: formData.get('name') || '',
        source: 'contact_form'
      });
    }
  } catch (error) {
    // Handle error
  }
};

Vue

// In your form component
methods: {
  async submitForm() {
    try {
      await this.$api.submitContact(this.form);

      // Identify on success
      if (this.form.email && window.lyt) {
        window.lyt.identify(this.form.email, {
          email: this.form.email,
          name: this.form.name || '',
          source: 'contact_form'
        });
      }
    } catch (error) {
      // Handle error
    }
  }
}

jQuery

$('#contact-form').on('submit', function(e) {
  e.preventDefault();

  var form = $(this);
  var email = form.find('input[name="email"]').val();
  var name = form.find('input[name="name"]').val();

  $.ajax({
    url: form.attr('action'),
    method: 'POST',
    data: form.serialize(),
    success: function() {
      // Identify on success
      if (email && window.lyt) {
        window.lyt.identify(email, {
          email: email,
          name: name || '',
          source: 'contact_form'
        });
      }
      // Show success message
    }
  });
});

Adding Custom Properties

You can include any additional properties in the identify call. These will be stored as custom properties on the user:

lyt.identify(email, {
  // Standard properties
  email: email,
  name: 'Jane Smith',
  phone: '+1-555-123-4567',

  // Custom properties (stored as custom properties)
  company: 'Acme Inc',
  job_title: 'Marketing Manager',
  industry: 'Technology',
  plan: 'enterprise',
  referral_source: 'google',

  // Source tracking
  source: 'demo_request'
});

Testing Your Integration

1. Open your website in an incognito/private browser window
2. Open DevTools (F12) → Console tab
3. Browse a few pages to generate anonymous activity
4. Submit a form with a test email address
5. Look for [Lytical] Identified user: test@example.com in the console
6. Wait 1-2 minutes, then check the Identified Users page in Lytical

Troubleshooting

Common Issues