Install Woopra Tracking Code | OpsBlu Docs

Install Woopra Tracking Code

How to install and deploy the Woopra tracking tag or SDK. Covers GTM deployment, direct code installation, mobile SDK setup, server-side collection, and.

Overview

Woopra provides multiple installation methods to suit different development environments and frameworks. Choose the method that best fits your tech stack.

Basic Installation

Add the Woopra tracking snippet to your website's HTML, preferably in the <head> section or just before </body>:

<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
    cookie_name: 'woopra',
    cookie_domain: '.yourdomain.com',
    cookie_path: '/'
  });

  woopra.track();
</script>

Configuration Options

Customize Woopra behavior with configuration options:

woopra.config({
  domain: 'yourdomain.com',           // Your website domain
  cookie_name: 'woopra',              // Cookie name
  cookie_domain: '.yourdomain.com',   // Cookie domain (use leading dot for subdomains)
  cookie_path: '/',                   // Cookie path
  cookie_expire: 31536000,            // Cookie expiration (1 year in seconds)
  ping: true,                         // Enable ping for time tracking
  ping_interval: 12000,               // Ping interval in milliseconds
  idle_timeout: 300000,               // Idle timeout (5 minutes)
  download_tracking: true,            // Track file downloads
  outgoing_tracking: true,            // Track outbound links
  download_pause: 200,                // Pause before download (ms)
  outgoing_pause: 400,                // Pause before outbound navigation (ms)
  ignore_query_url: true,             // Ignore query parameters in URLs
  hide_campaign: false,               // Hide campaign parameters
  ip_address: '',                     // Override IP address
  debug: false                        // Enable debug mode
});

npm Package

Installation

Install Woopra via npm for modern JavaScript applications:

npm install woopra

Basic Usage

import Woopra from 'woopra';

// Initialize Woopra
const woopra = new Woopra('yourdomain.com');

// Configure
woopra.config({
  domain: 'yourdomain.com',
  cookie_domain: '.yourdomain.com'
});

// Track page view
woopra.track();

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

// Track custom event
woopra.track('button_click', {
  button_name: 'Sign Up'
});

React Integration

import React, { useEffect } from 'react';
import Woopra from 'woopra';

// Initialize outside component to avoid re-initialization
const woopra = new Woopra('yourdomain.com');

function App() {
  useEffect(() => {
    // Configure Woopra
    woopra.config({
      domain: 'yourdomain.com',
      cookie_domain: '.yourdomain.com'
    });

    // Track page view
    woopra.track();

    // Identify user if logged in
    const user = getCurrentUser();
    if (user) {
      woopra.identify({
        email: user.email,
        name: user.name,
        id: user.id
      });
    }
  }, []);

  return (
    <div className="App">
      {/* Your app content */}
    </div>
  );
}

export default App;

React Router Integration

Track page changes with React Router:

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import Woopra from 'woopra';

const woopra = new Woopra('yourdomain.com');

function useWoopraPageTracking() {
  const location = useLocation();

  useEffect(() => {
    // Track page view on route change
    woopra.track('pv', {
      url: location.pathname + location.search,
      title: document.title
    });
  }, [location]);
}

// Use in your App component
function App() {
  useWoopraPageTracking();

  return (
    <Router>
      {/* Your routes */}
    </Router>
  );
}

Vue.js Integration

// plugins/woopra.js
import Woopra from 'woopra';

export default {
  install(app, options) {
    const woopra = new Woopra(options.domain);

    woopra.config({
      domain: options.domain,
      cookie_domain: options.cookieDomain
    });

    // Make woopra available globally
    app.config.globalProperties.$woopra = woopra;
  }
};

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import WoopraPlugin from './plugins/woopra';

const app = createApp(App);

app.use(WoopraPlugin, {
  domain: 'yourdomain.com',
  cookieDomain: '.yourdomain.com'
});

app.mount('#app');

// Component usage
export default {
  mounted() {
    this.$woopra.track();

    if (this.currentUser) {
      this.$woopra.identify({
        email: this.currentUser.email,
        name: this.currentUser.name
      });
    }
  },
  methods: {
    trackEvent(eventName, properties) {
      this.$woopra.track(eventName, properties);
    }
  }
};

Framework-Specific Implementations

Next.js (App Router)

// app/providers.js
'use client';

import { useEffect } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
import Woopra from 'woopra';

const woopra = new Woopra('yourdomain.com');

export function WoopraProvider({ children }) {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    woopra.config({
      domain: 'yourdomain.com',
      cookie_domain: '.yourdomain.com'
    });

    // Initial page view
    woopra.track();
  }, []);

  useEffect(() => {
    // Track page changes
    const url = pathname + (searchParams.toString() ? `?${searchParams.toString()}` : '');
    woopra.track('pv', {
      url: url,
      title: document.title
    });
  }, [pathname, searchParams]);

  return <>{children}</>;
}

// app/layout.js
import { WoopraProvider } from './providers';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <WoopraProvider>{children}</WoopraProvider>
      </body>
    </html>
  );
}

Angular

// services/woopra.service.ts
import { Injectable } from '@angular/core';
import Woopra from 'woopra';

@Injectable({
  providedIn: 'root'
})
export class WoopraService {
  private woopra: any;

  constructor() {
    this.woopra = new Woopra('yourdomain.com');
    this.woopra.config({
      domain: 'yourdomain.com',
      cookie_domain: '.yourdomain.com'
    });
  }

  track(eventName?: string, properties?: any): void {
    if (eventName) {
      this.woopra.track(eventName, properties);
    } else {
      this.woopra.track();
    }
  }

  identify(properties: any): void {
    this.woopra.identify(properties);
  }
}

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { WoopraService } from './services/woopra.service';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(
    private woopra: WoopraService,
    private router: Router
  ) {}

  ngOnInit(): void {
    // Track initial page view
    this.woopra.track();

    // Track route changes
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      this.woopra.track('pv', {
        url: event.urlAfterRedirects,
        title: document.title
      });
    });
  }
}

Platform-Specific Installation

WordPress

  1. Install a script injection plugin like "Insert Headers and Footers"
  2. Add Woopra snippet to the header or footer
  3. Configure your domain in the snippet

Shopify

  1. Go to Online Store → Themes → Actions → Edit code
  2. Open theme.liquid
  3. Add Woopra snippet before </head> or before </body>
  4. Save changes

Webflow

  1. Go to Project Settings → Custom Code
  2. Add Woopra snippet to "Head Code" or "Footer Code"
  3. Publish your site

Google Tag Manager

Create a Custom HTML tag:

<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'
  });

  woopra.track();
</script>

Set trigger to "All Pages" or specific pages as needed.

Verification

Check Installation

Verify Woopra is loaded correctly:

// Open browser console and run:
if (typeof woopra !== 'undefined') {
  console.log('Woopra loaded successfully');
  console.log('Config:', woopra.config());
} else {
  console.error('Woopra not loaded');
}

Enable Debug Mode

See tracking events in console:

woopra.config({ debug: true });
woopra.track('test_event', { test: 'value' });
// Check console for debug output

Real-Time Dashboard

  1. Log into Woopra dashboard
  2. Go to "Live" or "Real-Time" section
  3. Visit your website
  4. Verify your visit appears in real-time

Troubleshooting

Script Not Loading

Check for these common issues:

  1. Ad Blockers: Disable ad blockers and test
  2. Content Security Policy: Ensure CSP allows Woopra domain
  3. HTTPS: Verify you're using HTTPS if site uses HTTPS
<!-- Use protocol-relative URL -->
<script src="//static.woopra.com/js/w.js"></script>

<!-- Or explicitly use HTTPS -->
<script src="https://static.woopra.com/js/w.js"></script>

Events Not Tracking

// Verify woopra object exists
console.log(typeof woopra); // Should log 'function'

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

// Enable debug mode
woopra.config({ debug: true });

// Test tracking
woopra.track('test_event');

Wrong Domain

Ensure domain matches your Woopra project:

// Check current domain
console.log(woopra.config().domain);

// Update if incorrect
woopra.config({ domain: 'correctdomain.com' });

Best Practices

Load Asynchronously

Always load Woopra asynchronously to avoid blocking page load:

<!-- Good - async loading -->
<script async src="//static.woopra.com/js/w.js"></script>

<!-- Avoid - synchronous loading slows page -->
<script src="//static.woopra.com/js/w.js"></script>

Initialize Once

Initialize Woopra only once per page:

// Good - single initialization
if (!window.woopraInitialized) {
  woopra.config({ domain: 'yourdomain.com' });
  woopra.track();
  window.woopraInitialized = true;
}

// Avoid - multiple initializations
woopra.config({ domain: 'yourdomain.com' });
woopra.track();
// ...later...
woopra.config({ domain: 'yourdomain.com' }); // Don't do this
woopra.track();

Identify Before Tracking

Always identify users before tracking events:

// Good - identify then track
woopra.identify({ email: 'user@example.com' });
woopra.track('button_click');

// Works but less effective - track without identify
woopra.track('button_click'); // Will track as anonymous user
Back to top