Understand Your Visitors with Widget Analytics

What You'll Learn

What's Tracked Automatically

Once you embed the Converge widget on your website, these events are tracked automatically without any additional code:

Privacy & Compliance

Converge analytics is designed with privacy as a core principle. Here's how we protect your visitors while still giving you valuable insights:

Adding Click Tracking

Want to know which buttons, links, or elements visitors click before chatting? Add the data-cv-track attribute to any element you want to track.

Basic click tracking

Add data-cv-track with a descriptive name:

<button data-cv-track="pricing_cta">View Pricing</button>

<a data-cv-track="download_guide" href="/guide.pdf">Download Guide</a>

<div data-cv-track="feature_card">
  <h3>Enterprise Plan</h3>
  <p>For growing teams</p>
</div>

When clicked, a click event is recorded with:

• element — The value of data-cv-track
• tag — The HTML tag (button, a, div, etc.)
• text — First 100 characters of the element's text content
• url — The current page URL

Adding custom data to clicks

Use data-cv-data to include additional properties as JSON:

<button 
  data-cv-track="add_to_cart" 
  data-cv-data='{"product_id": "SKU-123", "price": 99.99, "category": "software"}'
>
  Add to Cart
</button>

<a 
  data-cv-track="plan_selected"
  data-cv-data='{"plan": "enterprise", "billing": "annual"}'
  href="/checkout"
>
  Choose Enterprise
</a>

Section Visibility Tracking

Converge automatically tracks when page sections become visible in the visitor's viewport. This helps you understand which content they actually saw before starting a conversation.

How section tracking works

The widget uses an IntersectionObserver to detect when elements are 50% or more visible on screen. It automatically tracks:

• Elements with id attribute — <section id="pricing">, <article id="features">
• Elements with data-cv-section — Overrides the id if present

Best practices for section tracking

Add meaningful IDs to your page sections:

<section id="hero">
  <h1>Welcome to Our Product</h1>
</section>

<section id="features">
  <h2>Features</h2>
</section>

<section id="pricing">
  <h2>Simple Pricing</h2>
</section>

<section id="testimonials">
  <h2>What Customers Say</h2>
</section>

<section id="faq">
  <h2>Frequently Asked Questions</h2>
</section>

Or use data-cv-section for custom names:

<div data-cv-section="social-proof">
  <h2>Trusted by 10,000+ Companies</h2>
</div>

<div data-cv-section="comparison-table">
  <h2>See How We Compare</h2>
</div>

Custom Event Tracking

For events that can't be captured with HTML attributes—like video plays, form submissions, or purchase completions—use the JavaScript API.

The Converge.track() API

Once the widget is loaded, window.Converge provides a track method:

// Basic event
window.Converge.track('video_played', {
  video_id: 'intro-video',
  duration: 120
});

// Purchase completed
window.Converge.track('purchase_completed', {
  order_id: 'ORD-456',
  total: 299.99,
  items: 3,
  currency: 'USD'
});

// Form submission
window.Converge.track('contact_form_submitted', {
  form_type: 'demo_request',
  company_size: '50-100'
});

// Feature usage
window.Converge.track('feature_used', {
  feature: 'export_report',
  format: 'pdf'
});

Example integrations

const video = document.querySelector('video');

video.addEventListener('play', () => {
  window.Converge.track('video_started', {
    video_id: video.dataset.videoId,
    title: video.dataset.title
  });
});

video.addEventListener('ended', () => {
  window.Converge.track('video_completed', {
    video_id: video.dataset.videoId,
    watch_time: video.currentTime
  });
});

// When user starts signup
window.Converge.track('signup_started', {
  plan: 'professional',
  source: 'pricing_page'
});

// When signup completes
window.Converge.track('signup_completed', {
  plan: 'professional',
  billing: 'annual',
  trial: true
});

How Analytics Work Under the Hood

Understanding how events flow from your website to Converge helps you debug issues and optimize tracking.

SPA (Single Page Application) Support

If your site is a Single Page Application (React, Vue, Next.js, etc.), the widget automatically detects page changes by:

• Listening to popstate events (browser back/forward)
• Intercepting history.pushState and history.replaceState
• Tracking accurate time spent on each virtual "page"

Viewing Analytics in Converge

Analytics data appears in the Converge dashboard as part of the customer's profile, giving your team context when responding to conversations.

Customer Journey panel

1. 1
   Open a conversation with a widget customer

   Click any customer who contacted you through the chat widget.

2. 2
   Open the customer details panel

   Click the info icon in the conversation header to show the right panel.

3. 3
   Find the Customer Journey section

   Scroll down to see their browsing history organized by session.

What you'll see

Best Practices