Script Installation Methods

Compare CDN and npm installation options for the tracking script

Table of Contents

Script Installation Methods

AffiliateBase offers two ways to install the tracking script: CDN (recommended for most users) and npm (for JavaScript developers). This guide helps you choose the right method.

Method Comparison

FeatureCDNnpm
Setup complexitySimpleRequires build tools
Best forNo-code sites, CMSsReact, Next.js, custom apps
Auto-updatesYesManual updates
Bundle size impactNoneAdded to your bundle
Offline supportNoPossible with service workers

CDN Installation

Basic Setup

Add to your HTML <head>:

<script>
  (function(w,r){
    w._abq=w._abq||[];
    w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)}
  })(window,'affiliatebase');
</script>
<script
  async
  src="https://cdn.jsdelivr.net/npm/affiliatebase-tracking@1/src/index.js"
  data-org-id="YOUR_ORG_ID">
</script>

When to Use CDN

Choose CDN if you:

  • Use a no-code platform (Webflow, Squarespace, Wix)
  • Have a WordPress or similar CMS site
  • Want the simplest possible setup
  • Don’t have a JavaScript build process
  • Want automatic updates

CDN Benefits

  • Zero configuration: Just paste and go
  • Global CDN: Fast loading from edge servers
  • Automatic updates: Always get bug fixes and improvements
  • No dependencies: Works standalone

npm Installation

Setup

Install the package:

npm install affiliatebase-tracking

Import in your application:

// Import the tracking script
import 'affiliatebase-tracking';

// Or with specific initialization
import { init } from 'affiliatebase-tracking';
init({ orgId: 'YOUR_ORG_ID' });

When to Use npm

Choose npm if you:

  • Build React, Vue, or Next.js applications
  • Use a JavaScript bundler (webpack, Vite, Rollup)
  • Want to control exactly what code loads
  • Need TypeScript types
  • Prefer managing versions in package.json

npm Benefits

  • Version control: Lock to specific versions
  • TypeScript support: Full type definitions
  • Tree shaking: Bundlers can optimize unused code
  • Offline capability: Bundle includes all code

Async Loading Behavior

Both methods load asynchronously to avoid blocking page render.

Waiting for Script Ready

If you need to access referral data immediately:

// Queue commands before script loads
window._abq = window._abq || [];
window._abq.push(function() {
  // This runs after script initializes
  const referralId = window.affiliatebase_referral;
  console.log('Referral:', referralId);
});

Checking Load Status

// Check if script has loaded
if (window.AffiliateBase) {
  // Script is ready
  console.log(window.affiliatebase_referral);
} else {
  // Script still loading
  window._abq = window._abq || [];
  window._abq.push(function() {
    console.log(window.affiliatebase_referral);
  });
}

Performance Considerations

CDN Performance

The CDN script is:

  • ~5KB gzipped
  • Cached by browsers
  • Served from global edge locations
  • Loaded asynchronously (non-blocking)

npm Bundle Impact

When using npm:

  • Adds ~8KB to your bundle (before gzip)
  • Can be code-split for lazy loading
  • Consider dynamic imports for optimal loading
// Dynamic import for code splitting
const loadTracking = async () => {
  await import('affiliatebase-tracking');
};

Multiple Instances

Important: Only include the tracking script once per page.

Multiple instances can cause:

  • Duplicate tracking requests
  • Cookie conflicts
  • Unexpected behavior

If you have a complex app with multiple entry points, ensure the script is only initialized once at the top level.

Migrating Between Methods

CDN to npm

  1. Install the npm package
  2. Import in your app entry point
  3. Remove the CDN script tags from HTML
  4. Deploy and test

npm to CDN

  1. Add CDN script tags to HTML
  2. Remove npm package import
  3. Uninstall: npm uninstall affiliatebase-tracking
  4. Deploy and test

Framework-Specific Guides

For detailed setup instructions:

  • React - Component-based integration
  • Next.js - Server and client components
  • Vue - Vue 3 composition API
  • WordPress - Plugin or theme integration
  • Webflow - Custom code embed

Troubleshooting

CDN Script Not Loading

  1. Check for typos in the script URL
  2. Verify no ad blockers are interfering
  3. Check Content Security Policy allows jsdelivr.net

npm Package Issues

  1. Clear node_modules and reinstall
  2. Check for conflicting versions
  3. Ensure proper import syntax for your bundler

See Script Not Loading for more debugging help.