Guides
Start typing to search…

JavaScript Pixel Tracking

JavaScript Pixel Tracking

Learn how to track website visitors, property views, and form submissions using the Sure Send CRM JavaScript pixel tracker.

Overview

The Sure Send CRM pixel tracker is a lightweight JavaScript snippet that you embed on your website to:

  • ✅ Track page views and visitor behavior
  • ✅ Track property listings viewed (real estate specific)
  • ✅ Capture form submissions automatically
  • ✅ Identify visitors when they provide contact information
  • ✅ Build engagement timelines for leads
  • ✅ Support Single Page Applications (SPAs)

Key Features:

  • Automatic page view tracking
  • Property listing detection
  • Form capture with smart field mapping
  • GDPR-compliant (IP anonymization)
  • SPA/React support
  • Async loading (no performance impact)

Step 1: Get Your Tracking Code

Your tracking code is unique to your team and can be found in:

  1. Log into Sure Send CRM
  2. Go to Settings → Pixel Tracking
  3. Copy your tracking code (format: SS-XXXXXXXXXX)

Step 2: Install the Pixel

Add this code to the head section of every page on your website:

<!-- Sure Send CRM Pixel -->
<script>
(function(w,t,c){w['SureSendPixel']=c;(w[c]=w[c]||function(){
(w[c].q=w[c].q||[]).push(arguments);}),(w[c].t=1*new Date());
var s=document.createElement('script');
s.async=1;s.src=t;
document.head.appendChild(s);
})(window,"https://api.suresendi.ai/pixel/SS-YOUR-CODE.js","ssPixel");
window.ssPixel("init", "SS-YOUR-CODE");
window.ssPixel("track", "pageview");
</script>
<!-- End Sure Send CRM Pixel -->

Replace:

  • SS-YOUR-CODE - Your actual tracking code (both places)

The pixel loads asynchronously and won't slow down your website.

Step 3: Automatic Tracking

Once installed, the pixel automatically tracks:

Page Views

Every page view is tracked automatically with:

  • URL and page title
  • Referrer source
  • Screen resolution
  • Timezone and language
  • Anonymized IP address (GDPR-compliant)

Property Listings (Real Estate)

If a visitor views a property listing page, the pixel automatically detects and tracks:

  • MLS number
  • Property address
  • Price
  • Bedrooms/bathrooms
  • Property type

The pixel looks for common patterns like:

  • /property/123
  • /listing/456
  • /mls/ABC123
  • /homes/789

Form Submissions

When a visitor submits a form, the pixel:

  • Captures email, name, and phone
  • Creates or updates the person in your CRM
  • Associates all previous page views with the person
  • Creates follow-up tasks

Supported form field names:

  • Email: email, e-mail, email_address, emailaddress, mail
  • Name: name, full_name, fullname, first_name, last_name
  • Phone: phone, phone_number, telephone, tel, mobile
  • Message: message, comments, notes, question, inquiry

Manual Event Tracking

Identify a Visitor

When a user logs into your site, identify them:

window.ssPixel("identify", {
  email: "[email protected]",    // Required
  name: "John Doe",             // Optional
  phone: "+1-555-123-4567"     // Optional
});

This associates all their anonymous activity with their contact record.

Track Property Views

Manually track when someone views a property:

window.ssPixel("track", "property_view", {
  mlsNumber: "ABC123",
  street: "123 Main St",
  city: "Portland",
  state: "OR",
  zipcode: "97201",
  price: 495000,
  bedrooms: 3,
  bathrooms: 2,
  area: 1800,
  propertyType: "Single Family Home",
  url: "https://yoursite.com/properties/abc123"
});

Track Property Saves/Favorites

When someone saves a property to favorites:

window.ssPixel("track", "property_save", {
  mls_number: "ABC123",
  address: "123 Main St, Portland, OR",
  price: 495000
});

Track Custom Events

Track any custom event:

window.ssPixel("track", "event", {
  event_type: "calculator_used",
  event_data: {
    calculator_type: "mortgage",
    loan_amount: 400000,
    interest_rate: 6.5
  }
});

Configuration Options

Customize the pixel behavior during initialization:

window.ssPixel("init", "SS-YOUR-CODE", {
  trackForms: true,        // Enable form capture
  trackProperties: true,   // Enable property tracking
  debug: false            // Enable debug logging
});

Debug Mode

Enable debug logging to see what the pixel is tracking:

window.ssPixel("init", "SS-YOUR-CODE", {
  debug: true
});

Then open your browser console to see detailed logs:

[Sure Send Pixel] 🚀 Loading version 1.4.0
[Sure Send Pixel] 📍 Tracking Code: SS-ABC123
[Sure Send Pixel] ✅ Page view tracked
[Sure Send Pixel] 📋 Form detected on page

Single Page Application (SPA) Support

The pixel automatically detects navigation in SPAs (React, Vue, Angular):

// React Router example - no extra code needed!
// Pixel automatically detects route changes

import { BrowserRouter, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Route path="/properties/:id" component={PropertyDetail} />
      {/* Pixel tracks navigation automatically */}
    </BrowserRouter>
  );
}

The pixel uses:

  • popstate event for browser back/forward
  • pushState/replaceState interception for programmatic navigation

Property Tracking Configuration

Automatic MLS Detection

The pixel automatically scans pages for MLS numbers using these patterns:

  • MLS#: 12345
  • MLS 12345
  • MLS# ABC123
  • Text in spans/divs with class mls-number

Custom Property Patterns

In your pixel settings, you can configure custom URL patterns:

/property/[0-9]+
/listing/[0-9]+
/mls/[A-Z0-9]+

These patterns determine which pages are considered "property pages" for tracking.

Form Capture

Automatic Form Capture

Enable in Settings → Pixel Tracking → Form Capture

The pixel automatically:

  1. Detects all forms on the page
  2. Attaches submit listeners
  3. Extracts email/name/phone
  4. Creates/updates contact in CRM
  5. Associates previous activity

Manual Form Submission

If you have a custom form handler:

// Your form submission
document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault();

  const formData = {
    email: document.getElementById('email').value,
    name: document.getElementById('name').value,
    phone: document.getElementById('phone').value,
    message: document.getElementById('message').value
  };

  // Track with pixel
  window.ssPixel("form", formData);

  // Continue with your form handling
  submitToYourBackend(formData);
});

Exclude Forms from Tracking

Add data-ss-ignore attribute to forms you don't want tracked:

<form data-ss-ignore>
  <!-- This form won't be tracked -->
  <input type="email" name="email">
  <button type="submit">Submit</button>
</form>

Call-to-Action (CTA) Popup

Enable a click-to-call popup in Settings → Pixel Tracking → CTA Settings

The popup appears after a visitor views multiple pages and shows:

  • Your custom message
  • Your phone number
  • One-click calling

Configuration:

Message: "Questions about this property? Call us now!"
Phone: (555) 123-4567
Show after: 3 page views

Privacy & GDPR Compliance

The pixel is designed for privacy compliance:

IP Anonymization

IP addresses are automatically anonymized (last octet removed):

  • Original: 192.168.1.100
  • Stored: 192.168.1.0

No Cookies (Except Session)

The pixel uses a single session cookie:

  • Name: ss_pixel_session
  • Duration: 30 minutes
  • Purpose: Associate page views within a session
  • No personal data stored

Respecting Do Not Track

Check for Do Not Track before initializing:

if (navigator.doNotTrack !== "1") {
  window.ssPixel("init", "SS-YOUR-CODE");
  window.ssPixel("track", "pageview");
}

Cookie Consent

If you use a cookie consent banner:

// Wait for consent before tracking
function onCookieConsentAccepted() {
  window.ssPixel("init", "SS-YOUR-CODE");
  window.ssPixel("track", "pageview");
}

Troubleshooting

Pixel Not Loading

Check browser console for errors:

Failed to load resource: the server responded with a status of 404

Solutions:

  • Verify tracking code is correct
  • Check pixel is enabled in Settings
  • Ensure URL to pixel script is correct

Page Views Not Tracked

Enable debug mode:

window.ssPixel("init", "SS-YOUR-CODE", { debug: true });

Common issues:

  • Pixel script blocked by ad blocker
  • Script loaded after page view already fired
  • CORS issues (pixel should be same domain)

Forms Not Captured

Check in browser console:

[Sure Send Pixel] 📋 Form detected on page
[Sure Send Pixel] ✅ Form captured: [email protected]

Common issues:

  • Form capture disabled in settings
  • Form submits before pixel can capture
  • Email field name not recognized

Solution - add delay:

form.addEventListener('submit', function(e) {
  e.preventDefault();

  // Give pixel time to capture
  setTimeout(() => {
    form.submit();
  }, 500);
});

Property Detection Not Working

Check debug logs:

[Sure Send Pixel] 🏠 Property detected: MLS ABC123

Common issues:

  • MLS number not in recognized format
  • Page URL doesn't match property patterns
  • MLS number in image or hidden element

Solution - manual tracking:

// On property detail page
window.ssPixel("track", "property_view", {
  mlsNumber: "ABC123",
  street: "123 Main St",
  // ... other fields
});

Best Practices

1. Install on All Pages

Add pixel to site-wide header/footer template:

<!-- In your layout/header.html -->
<head>
  <!-- Your other head tags -->

  <!-- Sure Send Pixel -->
  <script>/* pixel code */</script>
</head>

2. Track Key Actions

Identify users at key moments:

  • After login/registration
  • After newsletter signup
  • After scheduling appointment
// After user signs up
window.ssPixel("identify", {
  email: signupData.email,
  name: signupData.name
});

3. Rich Property Data

Provide as much property data as possible:

window.ssPixel("track", "property_view", {
  mlsNumber: property.mls,
  street: property.address.street,
  city: property.address.city,
  state: property.address.state,
  zipcode: property.address.zip,
  price: property.listPrice,
  bedrooms: property.beds,
  bathrooms: property.baths,
  area: property.sqft,
  lot: property.lotSize,
  propertyType: property.type,
  forRent: property.isRental,
  url: window.location.href
});

4. Test Before Production

Test in a non-production environment:

  1. Enable debug mode
  2. Test page view tracking
  3. Test form submissions
  4. Test property tracking
  5. Verify contacts created in CRM

5. Monitor in Settings

Check pixel performance in Settings → Pixel Tracking:

  • Sessions today
  • Page views today
  • Forms captured
  • Properties viewed

Performance Impact

The pixel is designed for minimal performance impact:

Async Loading

  • Pixel script loads asynchronously
  • Doesn't block page rendering
  • ~15KB compressed script size

Optimized Tracking

  • Events queued if pixel still loading
  • Background job processing (no blocking)
  • Debounced form detection

Benchmarks

  • Load time: <100ms
  • Page view track: <50ms
  • Form capture: <100ms
  • Memory usage: ~500KB

API Endpoints

The pixel uses these endpoints (for reference):

EndpointPurpose
GET /pixel/:code.jsLoads pixel script
POST /pixel/trackTracks page views
POST /pixel/eventTracks custom events
POST /pixel/identifyIdentifies visitor
POST /pixel/formCaptures form submission

Next Steps

  • Set up Webhooks to get notified of new leads
  • Learn about Events API for programmatic event tracking
  • Check out People API for contact management

Need Help?

  • Pixel Settings: Settings → Pixel Tracking in your CRM
  • Support: [email protected]
  • Debug: Enable debug mode and check browser console

Updated 9 days ago