Generic Integration Guide

Integrate Fusionaly with any website or web application

This guide covers how to integrate Fusionaly with any website or web application using the standard JavaScript tracking script.

Quick Start

1. Add the Tracking Script

Add the following script to the <head> section of your HTML pages:

<script defer src="https://your-domain.com/y/api/v1/sdk.js"></script>

Replace your-domain.com with the domain where you’ve installed Fusionaly.

2. Verify Installation

Once installed, Fusionaly will automatically start tracking:

Page views - Every page load and SPA navigation
Button clicks - All button interactions (when enabled)
User sessions - Visitor sessions and return visits

Configuration Options

You can customize tracking behavior by setting configuration before the SDK loads:

<script>
window.Fusionaly = window.Fusionaly || {};
window.Fusionaly.config = {
  // Honor browser's Do Not Track setting
  respectDoNotTrack: true,

  // Automatically track button clicks
  autoInstrumentButtons: true,

  // Automatically send page views
  autoSendPageViews: true,

  // Enable debug logging (development only)
  debug: false
};
</script>
<script defer src="https://your-domain.com/y/api/v1/sdk.js"></script>

Configuration Options Reference

Option	Default	Description
`respectDoNotTrack`	`true`	Honor the browser’s Do Not Track setting
`autoInstrumentButtons`	`true`	Automatically track button clicks
`autoSendPageViews`	`true`	Automatically send page views
`debug`	`false`	Enable debug logging to console

Single Page Applications (SPAs)

For SPAs built with frameworks like React, Vue, or Angular, Fusionaly automatically detects navigation changes by monitoring history state and popstate events. No additional configuration is needed.

Manual Page View Tracking

If you need to manually trigger page views (e.g., for custom routing):

// Send a page view manually
window.Fusionaly.sendPageView();

Custom Events

Track custom interactions and conversions:

// Basic custom event
Fusionaly.sendCustomEvent('newsletter_signup');

// Custom event with metadata
Fusionaly.sendCustomEvent('video_played', {
  video_title: 'Product Demo',
  duration_watched: 60
});

Revenue Tracking

Track purchases and revenue using the built-in purchase tracking:

// Basic purchase tracking (price in smallest currency unit)
Fusionaly.registerPurchase(1999, 'USD'); // $19.99

// Purchase with metadata
Fusionaly.registerPurchase(1999, 'USD', {
  product_id: 'prod_123',
  product_name: 'Premium Plan',
  quantity: 1
});

Testing Your Integration

1. Enable Debug Mode

Set debug: true in your config to see tracking events in the browser console:

window.Fusionaly = window.Fusionaly || {};
window.Fusionaly.config = {
  debug: true
};

2. Check Network Requests

Open browser developer tools and look for requests to /api/v1/events in the Network tab.

3. Verify in Dashboard

Visit your analytics dashboard to confirm that page views and events are being recorded.

Common Integration Patterns

Static Websites

For static websites, add the script to your base template or layout file:

<!DOCTYPE html>
<html>
  <head>
    <!-- Your other head tags -->
    <script defer src="https://your-domain.com/y/api/v1/sdk.js"></script>
  </head>
  <body>
    <!-- Your content -->
  </body>
</html>

Content Management Systems

For CMS platforms, add the script to your theme’s header template or use a plugin/module that allows custom JavaScript injection.