whiterankjs

v1.0.0

Published

6 months ago

Lightweight JavaScript tracking script that monitors AI bot traffic on websites using whiterank.io

0High
0Medium
0Low

iietmoon

whiterank whiterank.io tracking analytics ai-bot chatgpt claude perplexity monitoring

WhiteRank AI | AI Bot Analytics

Overview

This package provides a lightweight JavaScript tracking script that monitors AI bot traffic on websites. It detects when AI bots (ChatGPT, Claude, Perplexity, etc.) visit a website and sends analytics data to WhiteRank's API.

Installation

Option 1: NPM Package (Recommended)

npm install whiterankjs

Option 2: CDN via unpkg

<script src="https://unpkg.com/whiterankjs@latest/dist/track.umd.js"></script>

Option 3: CDN via jsDelivr

<script src="https://cdn.jsdelivr.net/npm/whiterankjs@latest/dist/track.umd.js"></script>

Quick Start

1. Configure the Script

Add the configuration before loading the tracking script:

<script>
    window.whiterankData = {
        siteId: 'wr-xxxxx',  // Your unique site ID from WhiteRank
        domain: 'example.com'  // Your website domain
    };
</script>

2. Include the Script

Using NPM

import 'whiterankjs/dist/track.esm.js';

Using CDN (unpkg)

<script src="https://unpkg.com/whiterankjs@latest/dist/track.umd.js"></script>

Complete HTML Example

<!DOCTYPE html>
<html>
<head>
  <script>
    window.whiterankData = {
      siteId: 'wr-xxxxx',
      domain: 'example.com'
    };
  </script>
  <script src="https://unpkg.com/whiterankjs@latest/dist/track.umd.js"></script>
</head>
<body>
  <!-- Your content -->
</body>
</html>

3. Get Your Site ID

Sign up at whiterank.io
Go to AI Bot Analytics
Add your website
Copy the Site ID provided

Configuration

Required Options

| Option | Type | Required | Description | |--------|------|----------|-------------| | siteId | string | Yes | Unique identifier for your site (format: wr-xxxxx) | | domain | string | Yes | Your website domain (e.g., example.com) |

Features

✅ AI Bot Detection: Automatically detects 20+ AI bots (GPTBot, ClaudeBot, PerplexityBot, etc.)
✅ Automatic Tracking: Tracks page loads, time on page, and user activity
✅ Reliable Data Sending: Uses navigator.sendBeacon() for reliable transmission
✅ Privacy-Friendly: No cookies, no personal data collected

Platform-Specific Usage

Next.js

import Script from 'next/script';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Script id="whiterank-config" strategy="beforeInteractive">
        {`
          window.whiterankData = {
            siteId: 'wr-xxxxx',
            domain: 'example.com'
          };
        `}
      </Script>
      <Script 
        src="https://unpkg.com/whiterankjs@latest/dist/track.umd.js" 
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  );
}

React / Vue / Angular

Add to your main index.html:

<head>
  <script>
    window.whiterankData = {
      siteId: 'wr-xxxxx',
      domain: 'example.com'
    };
  </script>
  <script src="https://unpkg.com/whiterankjs@latest/dist/track.umd.js"></script>
</head>

WordPress

Go to Appearance → Theme Editor
Edit header.php or use a plugin like "Insert Headers and Footers"
Add the configuration and script in the <head> section

Documentation

For complete documentation, platform-specific guides, troubleshooting, and API reference, visit:

📚 Full Documentation at whiterank.io

Support

Website: whiterank.io
Documentation: whiterank.io/docs
Support: [email protected]