Basic Installation

Add Narrowbeam to any website with a single script tag.

Prerequisites

A Narrowbeam account - sign up here if you don't have one
Access to your website's HTML or template files
Your organization key from the Narrowbeam dashboard

Step 1: Get Your Organization Key

Log in to your Narrowbeam dashboard and navigate to the Installation page. Your organization key is displayed at the top - it looks like:

11fb6556-c018-4432-accf-bedf89aa345f

Step 2: Add the Script Tag

Add this script to the <head> section of every page you want to track. Replace YOUR_ORG_KEY with your actual organization key:

<script>
  (function(w,d,e,s,n) {
    w=w[n]=w[n]||{q:[],onReady:function(c){w.q.push(c)}}
    e=d.createElement(e);e.async=1;e.src=s
    s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s)
  })(window,document,'script','https://unpkg.com/@narrowbeam/browser/dist/narrowbeam.min.js','narrowbeam')

  window.narrowbeam.onReady(function() {
    window.narrowbeam.init({
      orgKey: 'YOUR_ORG_KEY'
    })
  })
</script>

Complete Example

Here's what your HTML should look like:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
  <!-- Narrowbeam Analytics -->
  <script>
  (function(w,d,e,s,n) {
    w=w[n]=w[n]||{q:[],onReady:function(c){w.q.push(c)}}
    e=d.createElement(e);e.async=1;e.src=s
    s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s)
  })(window,document,'script','https://unpkg.com/@narrowbeam/browser/dist/narrowbeam.min.js','narrowbeam')

  window.narrowbeam.onReady(function() {
    window.narrowbeam.init({
      orgKey: '11fb6556-c018-4432-accf-bedf89aa345f'
    })
  })
  </script>
</head>
<body>
  <!-- Your content here -->
</body>
</html>

How It Works

Component	Purpose
`Loader Function`	Asynchronously loads the Narrowbeam script from unpkg.com without blocking page render
`onReady Callback`	Ensures initialization runs only after the script is fully loaded
`narrowbeam.init()`	Initializes tracking with your organization key and starts automatic page view tracking
`orgKey`	Your unique organization identifier (required)

NPM Package Available

You can also install Narrowbeam via npm with npm install @narrowbeam/browser. Check out our React & Next.js or Vue & Nuxt guides for framework-specific installation.

Common Scenarios

Static HTML Websites

For static websites, add the script tag to your HTML template or include file. If you use a header include file, add it there so it appears on every page.

Content Management Systems (WordPress, Drupal, etc.)

Most CMS platforms have a way to add custom scripts to the <head>. Look for settings like:

Custom Header Scripts
Header Code Injection
Theme Header Editor

Website Builders (Wix, Squarespace, Webflow)

These platforms typically have a "Custom Code" section where you can add the script:

Wix: Settings → Advanced → Custom Code → Add Code to Head
Squarespace: Settings → Advanced → Code Injection → Header
Webflow: Project Settings → Custom Code → Head Code

What Happens Next?

Once the script is installed:

Page views are automatically tracked when visitors load pages
SPA navigation is automatically detected and tracked
UTM parameters are captured from URLs
Referrer information is recorded
Device, browser, and location data is collected server-side

Framework-Specific Guides

Using a JavaScript framework? Check out our framework-specific guides:

React & Next.js

Install in React and Next.js apps

Vue & Nuxt

Install in Vue and Nuxt apps