Chrome Extension (Intent Tagger)

The LeadVibe Intent Tagger is a Chrome extension that lets you visually tag elements on any website to track user interactions. Instead of writing code, you simply point and click to define what should be tracked—button clicks, form submissions, and even data from JavaScript objects.

What It Does

The Intent Tagger helps you capture engagement signals without touching your website's code:

• Visual Element Tagging: Click on buttons, links, or forms to start tracking them
• Global Tagging: Create rules that apply across multiple pages (like header/footer elements)
• Data Extraction: Pull data from JavaScript objects like Google Tag Manager's dataLayer or user information
• Team Collaboration: Share tagging rules across your organization
• Real-Time Tracking: Events flow immediately into LeadVibe's scoring engine

The extension works hand-in-hand with the Web Beacon—you tag elements with the extension, and the beacon sends the events to LeadVibe.

Why Use It

Fast Setup: No developer required. Marketing ops teams can deploy tracking in minutes, not days.

Universal Compatibility: Works on any website where the LeadVibe beacon is installed, including third-party sites you don't control.

Dynamic Elements: Track elements that appear conditionally or are loaded via JavaScript frameworks (React, Vue, Angular).

Testing-Friendly: Test tagging rules offline before deploying to production.

Installation

From Chrome Web Store (Coming Soon)

Once published, you'll be able to install directly from the Chrome Web Store with one click.

Load Unpacked (For Testing)

For early access or development:

1. Download or clone the LeadVibe repository
2. Open Chrome and navigate to chrome://extensions
3. Enable Developer Mode (toggle in top-right corner)
4. Click Load unpacked
5. Select the chrome-extension directory
6. The extension icon will appear in your toolbar

Requirements: Chrome version 114 or later (for Side Panel support)

Configuration

Before you start tagging, configure the extension to connect to your LeadVibe backend.

Initial Setup

1. Click the LeadVibe Intent Tagger icon in your Chrome toolbar
2. The side panel opens on the right side of your browser
3. Click the ⚙️ Settings icon
4. Configure the following:

Setting	Description	Example
Backend URL	Your LeadVibe backend URL	https://app.leadvibe.com or http://127.0.0.1:8080 (local dev)
Organization Unit ID	Your OU identifier	ou_abc123 (auto-detected from session cookies when logged in)
Testing Mode	Enable to work offline without backend	Checked for local testing, unchecked for production

5. Click Save Settings

OU Auto-Detection

When you're logged into LeadVibe in the same browser, the extension automatically detects your Organization Unit (OU) ID from your session cookies. The settings will show:

Organization Unit ID: Auto-detected from session

You can override this by manually entering an OU ID if needed (useful for testing multiple organizations).

Testing Mode

Enable Testing Mode to work offline:

• Tags saved to local Chrome storage only
• No backend API calls required
• Perfect for development and testing
• Tags do NOT sync across devices

Disable Testing Mode for production:

• Tags saved to both local storage AND LeadVibe backend
• Tags sync across devices
• Team members can see and use the same tags
• Requires backend URL and OU ID configured

Usage

Prerequisites

The LeadVibe Web Beacon must be installed on the website you want to tag. The extension creates tagging rules, but the beacon is what actually sends events to LeadVibe. See Web Beacon documentation for installation instructions.

Tagging Elements on a Page

This creates page-specific tags that only apply to the exact URL you're on.

Step-by-Step

1. Navigate to the page you want to tag (e.g., https://example.com/pricing)
2. Open the side panel (click the extension icon)
3. Click Start Tagging
4. Hover over elements on the page:
   • Purple solid outline: Clickable elements (buttons, links)
   • Purple dashed outline: Forms
5. Click an element to select it
6. A tagging dialog appears with:
   • Event Name: Enter a descriptive name (e.g., pricing_cta_click)
   • Element preview: Shows what you selected
7. Click Save Tag
8. The element now has a green outline (indicating it's tagged)
9. Tagged elements appear in the side panel under the page URL

What Gets Tracked

Click Events (element_click):

• Element type (button, link, div)
• Element text content (first 100 characters)
• Element ID and CSS classes
• Link destination (for <a> tags)
• Your custom event name in the event_name metadata field

Form Submissions (form_submission):

• Form ID and action URL
• Form method (GET/POST)
• Values from all form fields
• Your custom event name in the event_name metadata field
• Auto-identification: If any field contains an email address, LeadVibe automatically identifies the visitor

Global Tagging (Cross-Page Rules)

Global tags apply to elements that appear on multiple pages—like navigation buttons, footers, or persistent CTAs.

When to Use Global Tags

• Header/Navigation: Sign in buttons, navigation links
• Footer: Contact links, social media buttons
• Persistent CTAs: Buttons that appear site-wide
• Sticky Elements: Floating chat widgets, banners

Creating a Global Tag

1. Open the side panel
2. Click the Global Rules tab
3. Click + New Global Tag
4. Fill in the form:

Field	Description	Example
Event Name	Your tracking name	header_signin_click
Pattern Type	How to match URLs	Wildcard, Hostname, or Regex
URL Pattern	The pattern to match	*.example.com/*
CSS Selector	Element to track	button.header-signin or use "Pick Element"

5. Click Save Global Tag

Pattern Matching Examples

Wildcard Patterns (use * for flexible matching):

*.example.com/*

Matches:

• ✅ https://www.example.com/pricing
• ✅ https://app.example.com/dashboard
• ❌ https://other.com/page

https://example.com/*

Matches:

• ✅ https://example.com/pricing
• ✅ https://example.com/about
• ❌ https://app.example.com/page (subdomain doesn't match)

Hostname Patterns (entire domain + subdomains):

example.com

Matches:

• ✅ https://example.com/any/path
• ✅ https://www.example.com/page
• ✅ https://app.example.com/dashboard

Regex Patterns (advanced):

^https://example\.com/(pricing|plans)$

Matches:

• ✅ https://example.com/pricing
• ✅ https://example.com/plans
• ❌ https://example.com/about

Rule Priority

If multiple rules could apply to the same element:

1. Page-specific rules take precedence (exact URL match)
2. Global rules apply when no page-specific rule exists
3. If multiple global rules match, the most recent is used

DOM Scrapers (Extract JavaScript Data)

DOM scrapers extract data from JavaScript objects accessible in the browser's window object. This is useful for capturing marketing analytics data, user information, and third-party tool data.

When to Use DOM Scrapers

Capture data from:

• Google Tag Manager: Extract dataLayer events and variables
• User Information: Pull user.email or user.id for identification
• Analytics Tools: Capture data from analytics, gtag, _hsq (HubSpot), or other tracking libraries
• Custom Objects: Any JavaScript object exposed on window

Creating a DOM Scraper

1. Open the side panel
2. Click the DOM Scrapers tab
3. Click + New DOM Scraper (or use quick-add templates)
4. Fill in the form:

Field	Description	Example
Event Name	Your tracking name	datalayer_capture
Pattern Type	URL matching type	Wildcard, Hostname, or Regex
URL Pattern	Where to run	*.example.com/*
Window Object Path	Dot-notation path to object	dataLayer or user.email
Capture Mode	When to capture	On Page Load or On Change (polling)

5. Preview shows the current value (if available on the active page)
6. Click Save DOM Scraper

Quick-Add Templates

Pre-configured for common objects:

• 📊 dataLayer: Google Tag Manager data layer
• 👤 user: User object (common in many apps)
• ✉️ user.email: Extract user email for identification
• 🎯 HubSpot (_hsq): HubSpot tracking queue
• 📈 Analytics: Generic analytics object

Window Object Paths

Simple paths:

window.dataLayer          → "dataLayer"
window.user               → "user"
window.analytics          → "analytics"

Nested paths:

window.user.email         → "user.email"
window.config.apiKey      → "config.apiKey"
window.__NEXT_DATA__      → "__NEXT_DATA__"

Capture Modes

On Page Load:

• Captures once when page loads
• Best for: Static user info, page metadata, initial state
• Example: User ID, session token, page category

On Change (Polling):

• Checks value every 5 seconds
• Captures when value changes
• Best for: Dynamic data, real-time updates
• Example: Cart items, notification count, dataLayer events pushed after page load

Event Data Structure

DOM scraper events include:

{
  "event_type": "datalayer_capture",
  "window_path": "dataLayer",
  "captured_data": "[{\"event\":\"page_view\",\"userId\":\"123\"}]",
  "url": "https://example.com/page",
  "path": "/page",
  "scraper_id": "scraper_abc123"
}

• captured_data is JSON-stringified (max 10KB)
• Circular references handled gracefully
• Only alphanumeric paths allowed (security)

Rate Limiting

• Minimum 5 seconds between captures per scraper
• Prevents excessive event volume
• Deduplication: Same value won't trigger multiple events

Managing Tags

Viewing Tags

Tags are organized in the side panel:

• Page Tags tab: Page-specific tags grouped by URL
• Global Rules tab: Cross-page tags grouped by pattern
• DOM Scrapers tab: Data extraction rules grouped by pattern

Visual Indicators

On the page itself:

• Green outline: Element is tagged and tracking
• Purple outline: Element is being selected (tagging mode active)
• Purple dashed outline: Form element being selected

Deleting Tags

Click the × button next to any tag in the side panel to remove it. Changes take effect immediately.

Integration with Web Beacon

The Chrome extension and the Web Beacon work together:

1. Extension creates rules: You visually tag elements and create DOM scrapers
2. Extension injects listeners: Content script attaches click/form handlers to matching elements
3. Events sent to beacon: window.leadvibe.push(['track', 'event_name', { metadata }])
4. Beacon handles delivery: Session management, visitor identification, sending to LeadVibe backend

Without the beacon installed, the extension cannot send events. The beacon must be present on the target website.

See Web Beacon documentation for details on how custom events are structured.

Event Types

The extension uses standardized event types for consistency across all tracking:

Click Events → Type: element_click

Your custom event name is stored in the event_name metadata field.

Metadata captured:

• event_name: Your custom name (e.g., pricing_cta_click)
• element_type: button, a, div, etc.
• element_text: Button/link text (first 100 chars)
• element_id: CSS ID attribute
• element_class: CSS class names
• href: Link destination (if applicable)
• url: Current page URL
• path: Current page path

Form Submissions → Type: form_submission

Your custom event name is stored in the event_name metadata field.

Metadata captured:

• event_name: Your custom name (e.g., contact_form)
• form_id: Form ID attribute
• form_action: Form action URL
• form_method: GET or POST
• [field_name]: Each form field's value
• url: Current page URL
• path: Current page path

Email auto-identification: If any field contains an email address, an automatic identify event is sent to associate the visitor with that email.

DOM Scraper Events

Uses your custom event name as the event_type:

Metadata captured:

• window_path: The object path that was scraped
• captured_data: JSON-stringified value
• scraper_id: Unique scraper identifier
• Standard page metadata (url, path, etc.)

Why Standardized Types?

Instead of custom event types like cta_signup_click, we use:

• Standard type: element_click
• Custom name in metadata: event_name: "cta_signup_click"

Benefits:

• Easier querying: WHERE event_type = 'element_click' catches all clicks
• Consistent with beacon auto-tracked events: page_view, outbound_link_click, page_scrolled
• Better analytics and filtering
• Predictable event type vocabulary

Troubleshooting

"Reload page to use tagger"

Cause: Content script not loaded on the page.

Solution: Refresh the page after opening the side panel. The extension needs to inject scripts into the page.

"Error: Beacon not found on page"

Cause: LeadVibe Web Beacon is not installed on the target website.

Solution: Install the beacon script on the site. See Web Beacon installation.

"Error: Server returned 404"

Cause: Backend API endpoint missing or incorrect Backend URL configured.

Solution:

• Verify backend is running: curl http://127.0.0.1:8080/health
• Check Backend URL in settings matches your backend
• For LeadVibe SaaS: Use https://app.leadvibe.com
• For local dev: Use http://127.0.0.1:8080

"Error: Server returned 403"

Cause: Invalid or missing Organization Unit ID.

Solution:

• Check OU ID in settings matches your organization
• Log into LeadVibe in the same browser to enable auto-detection
• Verify you have permission to create tags for this OU

"Error: Failed to fetch"

Cause: Backend not reachable or network issue.

Solution:

• Check Backend URL is correct
• Verify backend is running
• Check firewall/network settings
• Try enabling Testing Mode to work offline

"Wrong OU ID"

Cause: OU ID in settings doesn't match your logged-in session.

Solution:

• Clear OU ID field in settings to use auto-detection
• Log out and back into LeadVibe
• Manually enter the correct OU ID if needed

CORS Errors in Console

Cause: Backend not allowing requests from the extension.

Solution: This is expected. The extension sends API requests with the X-Active-OU-ID header, which requires backend CORS configuration. If you're using the LeadVibe SaaS backend, this is already configured. For self-hosted, ensure CORS allows the extension origin.

DOM Scraper Not Capturing Data

Cause: Object path doesn't exist or isn't available yet.

Solution:

• Use the preview in the DOM Scraper form to verify the path exists
• Try switching from "On Page Load" to "On Change" for objects that load asynchronously
• Check the browser console (F12) for error messages
• Verify the path syntax: window.user.email → enter user.email (without "window.")

Best Practices

Event Naming Conventions

Use consistent, descriptive names:

• snake_case: pricing_cta_click, contact_form_submit
• Be specific: header_signin_click is better than click1
• Include context: pricing_free_trial_click tells you where and what

When to Use Global vs. Page-Specific Tags

Use Page-Specific Tags for:

• Unique elements on single pages
• A/B testing different CTAs
• Page-specific forms

Use Global Tags for:

• Persistent navigation elements
• Footers and headers
• Consistent CTAs across pages

Security and Privacy

• No sensitive data: Avoid capturing passwords, credit card numbers, or PII in form submissions
• DOM scraper limits: Data capped at 10KB per capture to prevent abuse
• OU scoping: All tags are scoped to your Organization Unit—other organizations cannot see your tags
• Origin allowlist: Beacon tokens enforce origin allowlists for security

Testing Before Production

1. Enable Testing Mode in settings
2. Tag elements on a staging or test environment
3. Verify events appear correctly in LeadVibe (check Events page)
4. Check event metadata is as expected
5. Disable Testing Mode to sync to backend for production use

Use Cases

Track CTA Clicks Across Product Pages

Scenario: You have a "Start Free Trial" button on multiple product pages.

Solution: Create a global tag:

• Pattern: https://example.com/products/*
• Selector: button.free-trial-cta
• Event Name: product_free_trial_click

Now every click on that button across all product pages is tracked with the same event name.

Identify High-Intent Pricing Page Visitors

Scenario: Someone who clicks "See Pricing" from your homepage and then clicks "Contact Sales" on the pricing page is a hot lead.

Solution:

1. Tag the homepage "See Pricing" link → homepage_see_pricing_click
2. Tag the pricing page "Contact Sales" button → pricing_contact_sales_click
3. Create a scoring rule: homepage_see_pricing_click = +10 points
4. Create a scoring rule: pricing_contact_sales_click = +25 points
5. Create a sequence trigger: Both events within 10 minutes = Slack notification

Capture Form Submissions with Auto-Identification

Scenario: Track contact form submissions and automatically associate them with the lead's email.

Solution:

1. Tag the form element (not the submit button)
2. Event Name: contact_form_submit
3. When submitted, form fields are captured, including email
4. LeadVibe automatically runs identify if an email is found
5. Subsequent events are linked to that lead

Extract Google Tag Manager Data

Scenario: Your marketing team uses GTM and you want to capture page category and user type from the dataLayer.

Solution: Create a DOM scraper:

• Event Name: datalayer_capture
• Pattern: *.example.com/*
• Window Path: dataLayer
• Capture Mode: On Page Load

Events include the entire dataLayer contents, which you can then use in triggers or scoring rules.

---

Next Steps

• Install the Web Beacon: Web Beacon Documentation
• Create Scoring Rules: Award points for tracked events in Rules & Scoring
• Set Up Triggers: Get notified when high-intent sequences occur in Triggers
• View Events: See captured events on the Events page

---

Related Documentation:

• Web Beacon - JavaScript tracking snippet
• Event Types - Standard event taxonomy
• Integrations - Connect with HubSpot, Salesforce, Slack