Woopra Setup & Implementation: JavaScript SDK | OpsBlu Docs

Woopra Setup & Implementation: JavaScript SDK

How to install Woopra for real-time customer journey analytics. Covers JavaScript SDK deployment, user identification, people profile configuration,...

Woopra Setup Overview

Woopra is a comprehensive customer analytics platform that provides real-time tracking, customer journey mapping, and behavioral analysis. This guide covers everything you need to set up Woopra for your website or application.

What is Woopra?

Woopra provides:

  • Real-time visitor tracking: See who's on your site right now
  • Customer journey mapping: Visualize complete user paths
  • Event tracking: Track custom actions and interactions
  • User profiles: Build comprehensive customer profiles
  • Segmentation: Group users by behavior and attributes
  • Reports and analytics: Generate insights from user data
  • Integrations: Connect with CRM, marketing, and other tools

Quick Start Guide

Get started with Woopra in minutes:

1. Create a Woopra Account

  1. Visit woopra.com
  2. Sign up for a free trial or paid plan
  3. Verify your email address
  4. Complete the onboarding wizard

2. Add Your Website

  1. Log into Woopra dashboard
  2. Click on your project name (top left)
  3. Go to Settings > Websites
  4. Click "Add Website"
  5. Enter your domain (e.g., example.com)
  6. Click "Save"

3. Install the Tracking Code

Add the Woopra tracking snippet to your website:

<script>
  (function(){
    var t,i,e,n=window,o=document,a=arguments,s="script",
    r=["config","track","identify","visit","push","call","trackForm","trackClick"],
    c=function(){var t,i=this;for(i._e=[],t=0;r.length>t;t++)(function(t){
    i[t]=function(){return i._e.push([t].concat(Array.prototype.slice.call(arguments,0))),i}})(r[t])};
    for(n._w=n._w||{},t=0;a.length>t;t++)n._w[a[t]]=n[a[t]]=n[a[t]]||new c;
    i=o.createElement(s),i.async=1,i.src="//static.woopra.com/js/w.js",
    e=o.getElementsByTagName(s)[0],e.parentNode.insertBefore(i,e)
  })("woopra");

  woopra.config({
    domain: 'yourdomain.com'  // Replace with your domain
  });

  woopra.track();  // Track page view
</script>

Place this code in your HTML <head> tag or just before the closing </body> tag.

4. Verify Installation

  1. Visit your website
  2. Open Woopra dashboard
  3. Go to "Live" section
  4. You should see your visit in real-time

Installation Options

Woopra supports multiple installation methods:

Standard JavaScript

Best for traditional websites and static sites:

<script>
  (function(){
    var t,i,e,n=window,o=document,a=arguments,s="script",
    r=["config","track","identify","visit","push","call","trackForm","trackClick"],
    c=function(){var t,i=this;for(i._e=[],t=0;r.length>t;t++)(function(t){
    i[t]=function(){return i._e.push([t].concat(Array.prototype.slice.call(arguments,0))),i}})(r[t])};
    for(n._w=n._w||{},t=0;a.length>t;t++)n._w[a[t]]=n[a[t]]=n[a[t]]||new c;
    i=o.createElement(s),i.async=1,i.src="//static.woopra.com/js/w.js",
    e=o.getElementsByTagName(s)[0],e.parentNode.insertBefore(i,e)
  })("woopra");

  woopra.config({
    domain: 'example.com'
  });

  woopra.track();
</script>

NPM Package

For modern JavaScript applications:

npm install woopra

import woopraTracker from 'woopra';

const woopra = woopraTracker('example.com');
woopra.config({
  domain: 'example.com'
});

woopra.track();

CDN

Load Woopra from CDN:

<script src="https://static.woopra.com/js/w.js"></script>
<script>
  woopra.config({
    domain: 'example.com'
  });
  woopra.track();
</script>

Core Configuration

Basic Configuration

woopra.config({
  domain: 'example.com',           // Your domain (required)
  cookie_name: 'wooTracker',       // Cookie name
  cookie_domain: '.example.com',   // Cookie domain
  cookie_path: '/',                // Cookie path
  ping: true,                      // Send periodic pings
  ping_interval: 12000,            // Ping interval (milliseconds)
  idle_timeout: 300000,            // Idle timeout (5 minutes)
  download_tracking: true,         // Track file downloads
  outgoing_tracking: true,         // Track outgoing links
  download_pause: 200,             // Download tracking delay
  outgoing_pause: 400,             // Outgoing link delay
  ignore_query_url: true,          // Ignore query strings in URLs
  hide_campaign: false             // Show/hide campaign parameters
});

Advanced Configuration

woopra.config({
  domain: 'example.com',

  // Tracking options
  app: 'myapp',                    // App name
  use_cookies: true,               // Enable cookies

  // Performance
  ping: true,
  ping_interval: 12000,

  // Privacy
  ip_address: '192.168.1.1',      // Override IP

  // Custom parameters
  custom_param_1: 'value1',
  custom_param_2: 'value2'
});

User Identification

Identify Visitors

// Basic identification
woopra.identify({
  email: 'user@example.com',
  name: 'John Doe'
});

// Comprehensive user profile
woopra.identify({
  email: 'john.doe@example.com',
  name: 'John Doe',
  first_name: 'John',
  last_name: 'Doe',
  company: 'Acme Corp',
  phone: '+1-555-0123',

  // Custom properties
  plan: 'enterprise',
  role: 'admin',
  signup_date: '2024-01-15',
  total_purchases: 15,
  lifetime_value: 5000
});

Update User Properties

// After user action
woopra.identify({
  last_purchase_date: new Date().toISOString(),
  purchase_count: 16,
  lifetime_value: 5099
});

Event Tracking

Track Page Views

// Automatic page view tracking
woopra.track();

// Custom page view
woopra.track('pv', {
  url: '/custom-page',
  title: 'Custom Page Title'
});

Track Custom Events

// Simple event
woopra.track('button_click');

// Event with properties
woopra.track('purchase', {
  product_name: 'Premium Plan',
  price: 99.99,
  currency: 'USD',
  quantity: 1
});

// Complex event
woopra.track('form_submission', {
  form_name: 'contact_form',
  form_type: 'lead_gen',
  page_url: window.location.href,
  timestamp: Date.now()
});

Automatic Form Tracking

// Track all form submissions
woopra.trackForm('submit', 'contact_form');

// Track specific form
woopra.trackForm('#signup-form', 'user_signup');

// Track with callback
woopra.trackForm('#contact-form', 'contact_submission', function() {
  console.log('Form tracked');
});

Automatic Click Tracking

// Track all clicks on element
woopra.trackClick('.cta-button', 'cta_clicked');

// Track with properties
woopra.trackClick('.product-link', 'product_clicked', {
  category: 'electronics'
});

Real-Time Features

Live Visitor Tracking

Woopra provides real-time visibility into who's on your site:

  • Live dashboard: See current visitors
  • Visitor details: View individual user actions
  • Activity stream: Monitor events in real-time
  • Triggers: Set up automated actions

Session Tracking

Woopra automatically tracks:

  • Session start and end
  • Pages visited
  • Events triggered
  • Time on site
  • Device and browser info
  • Geographic location

Customer Profiles

Building Profiles

Woopra automatically builds comprehensive customer profiles:

// Initial visit
woopra.identify({
  email: 'user@example.com',
  source: 'google'
});

// Add properties over time
woopra.identify({
  plan: 'trial'
});

// After conversion
woopra.identify({
  plan: 'paid',
  conversion_date: new Date().toISOString()
});

Profile Enrichment

Enrich profiles with:

  • Contact information
  • Company data
  • Behavioral data
  • Custom properties
  • Integration data

Segmentation

Create Segments

Group users based on:

  • Demographics: Location, device, browser
  • Behavior: Pages visited, events triggered
  • Properties: Plan type, role, status
  • Engagement: Active vs inactive users

Use Segments For

  • Targeted reporting
  • Automated triggers
  • Integration syncing
  • Custom dashboards

Reports and Analytics

Built-in Reports

Woopra provides:

  • Trends: Track metrics over time
  • Funnels: Analyze conversion paths
  • Retention: Measure user retention
  • People: Analyze individual users
  • Journey: Visualize user paths

Custom Reports

Create custom reports:

  1. Go to Reports section
  2. Click "Create Report"
  3. Choose report type
  4. Select metrics and dimensions
  5. Apply filters and segments
  6. Save and share

Integrations

Woopra integrates with:

Integration Setup

  1. Go to Settings > Integrations
  2. Find your integration
  3. Click "Connect"
  4. Authorize connection
  5. Configure sync settings

Privacy and Compliance

GDPR Compliance

Woopra provides GDPR compliance features:

  • User data deletion
  • Data export
  • Cookie consent management
  • Privacy controls
// Respect user consent
if (userConsent) {
  woopra.config({
    domain: 'example.com',
    use_cookies: true
  });
  woopra.track();
}

Data Retention

Configure data retention:

  1. Go to Settings > Privacy
  2. Set retention period
  3. Enable auto-deletion
  4. Save settings

Testing and Debugging

Enable Debug Mode

// Enable debug logging
woopra.config({
  domain: 'example.com',
  debug: true
});

Browser Console

// Check Woopra is loaded
console.log(window.woopra);

// Check configuration
console.log(woopra.config());

// Test tracking
woopra.track('test_event', {
  test: true
});

Verify in Dashboard

  1. Open Woopra dashboard
  2. Go to Live section
  3. Perform action on your site
  4. Watch for event in live stream

Common Setup Scenarios

Single-Page Applications

// Track route changes
router.afterEach((to, from) => {
  woopra.track('pv', {
    url: to.path,
    title: to.meta.title
  });
});

E-commerce Tracking

// Product view
woopra.track('product_viewed', {
  product_id: '12345',
  product_name: 'Blue Widget',
  price: 49.99
});

// Add to cart
woopra.track('add_to_cart', {
  product_id: '12345',
  quantity: 2
});

// Purchase
woopra.track('purchase', {
  order_id: 'ORD-789',
  revenue: 99.98,
  products: 2
});

SaaS Application

// User signup
woopra.identify({
  email: user.email,
  plan: 'trial',
  signup_date: new Date().toISOString()
});

woopra.track('signup_completed', {
  source: 'website'
});

// Feature usage
woopra.track('feature_used', {
  feature: 'advanced_search',
  user_role: 'admin'
});

Troubleshooting

Common Issues

Woopra not loading

  • Check browser console for errors
  • Verify domain configuration
  • Check Content Security Policy

Events not appearing

  • Verify tracking code is on all pages
  • Check debug mode output
  • Ensure events are properly formatted

Duplicate visitors

  • Check cookie settings
  • Verify domain configuration
  • Review cross-domain setup

Setup Guides

Detailed guides for specific features:

Next Steps

After installation:

  1. Set up user identification: Track individual users
  2. Configure events: Track key actions
  3. Create segments: Group users by behavior
  4. Build reports: Analyze user data
  5. Set up integrations: Connect your tools
  6. Configure triggers: Automate actions

Getting Help

Need assistance?

Best Practices

  1. Identify early: Identify users as soon as possible
  2. Track consistently: Use consistent event naming
  3. Add context: Include relevant properties with events
  4. Monitor live: Check live dashboard regularly
  5. Build reports: Create reports for key metrics
  6. Use segments: Segment users for better insights
  7. Test thoroughly: Verify tracking before launch
返回顶部