JavaScript SDK

Track events from web applications with automatic page views, sessions, and identity management.

Installation

Add this snippet to your <head> tag:

<script>
!function(){var analytics=window.analytics=window.analytics||[];
if(!analytics.initialize)if(analytics.invoked)
window.console&&console.error("Analytics snippet included twice.");
else{analytics.invoked=!0;
analytics.methods=["init","page","track","identify","reset"];
analytics.factory=function(t){return function(){
var e=Array.prototype.slice.call(arguments);
e.unshift(t);analytics.push(e);return analytics}};
for(var t=0;t<analytics.methods.length;t++){
var e=analytics.methods[t];analytics[e]=analytics.factory(e)}
analytics.load=function(t,e){
var n=document.createElement("script");
n.type="text/javascript";n.async=!0;
n.src="https://analytics.chatnationbot.com/sdk.js";
var a=document.getElementsByTagName("script")[0];
a.parentNode.insertBefore(n,a);
analytics.init(t,e)};

analytics.load("YOUR_WRITE_KEY", {
  apiEndpoint: "https://analytics.chatnationbot.com/v1/capture"
});
analytics.page();
}}();
</script>

API Reference

analytics.init(writeKey, options)

Initialize the SDK with your Write Key.

analytics.init("wk_abc123", {
  apiEndpoint: "https://analytics.chatnationbot.com/v1/capture"
});

Options

Option	Type	Description
apiEndpoint	string	Collector API URL

analytics.page(name?, properties?)

Track a page view. Call this on every page/route change.

// Basic page view (auto-detects page info)
analytics.page();

// Named page view
analytics.page("Home");

// With properties
analytics.page("Product", {
  product_id: "p_123",
  category: "Electronics"
});

analytics.track(eventName, properties?)

Track a custom event with optional properties.

// Simple event
analytics.track("Button Clicked");

// With properties
analytics.track("Purchase Completed", {
  order_id: "ord_123",
  total: 99.99,
  currency: "USD",
  items: 3
});

analytics.identify(userId, traits?)

Link the current anonymous user to a known user ID.

// After user logs in
analytics.identify("user_123", {
  email: "john@example.com",
  name: "John Doe",
  plan: "premium",
  createdAt: "2024-01-15"
});

analytics.reset()

Clear user identity. Call this when a user logs out.

// On logout
analytics.reset();

React / Next.js Integration

For Next.js App Router, add to your app/layout.tsx:

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <Script id="analytics" strategy="afterInteractive">
          {`
            // Paste the analytics snippet here
          `}
        </Script>
      </head>
      <body>{children}</body>
    </html>
  );
}

Common Event Examples

// E-commerce
analytics.track("Product Viewed", { product_id: "p_123", price: 29.99 });
analytics.track("Added to Cart", { product_id: "p_123", quantity: 1 });
analytics.track("Checkout Started", { cart_total: 59.98 });
analytics.track("Order Completed", { order_id: "ord_456", total: 59.98 });

// SaaS
analytics.track("Signed Up", { plan: "free" });
analytics.track("Feature Used", { feature: "export" });
analytics.track("Plan Upgraded", { from: "free", to: "pro" });

// Content
analytics.track("Article Read", { article_id: "a_789", read_time: 120 });
analytics.track("Video Played", { video_id: "v_456", duration: 300 });