CDN / Script Tag Usage

Learn how to use Journium with script tags for static HTML websites, landing pages, and no-build environments. Simple copy-paste integration.

Overview

Add Journium analytics to any website using a simple <script> tag - no build tools or package managers required. Perfect for static HTML sites, landing pages, and quick prototypes.

Platform-Specific Guides

Looking for platform integration? We have detailed guides with platform-specific code examples:

When to Use CDN

The CDN approach is ideal for:

  • Static HTML websites - No build process needed
  • Landing pages - Quick integration
  • Marketing sites - Minimal setup
  • Prototypes - Fast testing
  • No-code platforms - Webflow, Carrd, Framer
  • Legacy sites - Existing websites without modern tooling

Quick Start

Step 1: Add the Snippet

Add this snippet to your HTML <head> section or before </body>:

<script>
!function(j,o,u,r,n,i,u,m){
    if(!o.__JV){
        window.journium=o;
        o._q=[];
        o._i=null;
        o.init=function(c,n){o._i=[c,n]};
        var methods="track identify reset capturePageview startAutocapture stopAutocapture flush getEffectiveOptions onOptionsChange destroy".split(" ");
        for(var k=0;k<methods.length;k++){
            !function(method){
                o[method]=function(){o._q.push([method].concat(Array.prototype.slice.call(arguments)));return o}
            }(methods[k])
        }
        o.__JV=1;
        (m=j.createElement("script")).type="text/javascript";
        m.async=!0;
        m.src="https://cdn.jsdelivr.net/npm/@journium/js@1/dist/journium.min.js";
        m.onerror=function(){console.warn("Journium: Failed to load SDK from CDN")};
        (i=j.getElementsByTagName("script")[0]).parentNode.insertBefore(m,i);
    }
}(document,window.journium||[]);

journium.init({ 
    publishableKey: 'YOUR_PUBLISHABLE_KEY'
});
</script>

Step 2: Track Events

Once initialized, use the global journium object to track events:

<script>
// Track custom events
journium.track('product_viewed', { product_id: '123456789' });

// Identify users
journium.identify('user123', { 
    email: 'user@example.com',
    plan: 'pro' 
});

// Reset on logout
journium.reset();
</script>

Static HTML Example

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <script>
    <!-- Journium snippet here -->
    
    journium.init({ 
        publishableKey: 'pk_your_key'
    });
    </script>
</head>
<body>
    <button onclick="handleSignup()">Sign Up</button>
    
    <script>
    function handleSignup() {
        journium.track('signup_button_clicked', {
            page: window.location.pathname
        });
        // Your signup logic here
    }
    </script>
</body>
</html>

Next Steps

Last updated on

On this page