Vanilla HTML & JavaScript

Which method should I use?

Your project	Method to use
Plain `.html` files, no build tools	CDN (Option A below)
Uses Vite, Webpack, or Parcel (but no framework)	npm (Option B below)
A `.html` file inside a React/Vue project	Use the React or Vue guide instead

Option A — CDN (No npm, No Installation)

This is the simplest method. Just paste a <script> tag into your HTML and you are done.

Step 1 — Paste just before `</body>`

Open index.html and paste this block just above the closing </body> tag:

<!-- Analytiq — paste just before </body> -->
<script src="https://unpkg.com/analytiq/dist/index.global.js"></script>
<script>
  // Initialize with auto page view tracking
  analytiq.init('pk_live_YOUR_KEY_HERE', {
    autoTrackPageViews: true,  // tracks 'page_view' on every navigation automatically
    debug: true               // remove in production
  });

  // Optional: identify a logged-in user
  // analytiq.identify(currentUser.id);
</script>

Replace pk_live_YOUR_KEY_HERE with your actual API key from the Settings page.

Your full index.html example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My Website</title>
</head>
<body>

  <h1>Welcome to My Website</h1>
  <button id="signupBtn">Sign Up Free</button>

  <!-- Analytiq — paste just before </body> -->
  <script src="https://unpkg.com/analytiq/dist/index.global.js"></script>
  <script>
    analytiq.init('pk_live_YOUR_KEY_HERE', { autoTrackPageViews: true, debug: true });
  </script>

</body>
</html>

Track a button click

<button id="signupBtn">Sign Up Free</button>

<script>
  document.getElementById('signupBtn').addEventListener('click', function() {
    // Just one line wherever the action happens
    analytiq.track('signup_clicked', { button: 'hero_cta' });
  });
</script>

Track across multiple pages

If your site has multiple HTML pages (e.g., about.html, contact.html), paste the script tag in each file. Because you set autoTrackPageViews: true, the SDK automatically records the page URL — no extra code needed per page.

To avoid repeating the script tag on every page, create a shared analytics.js file and include it on every page with <script src="analytics.js"></script>.

<script>
  // Call this right after your login API call succeeds
  function onLoginSuccess(userId) {
    analytiq.identify(userId);  // links all future events to this user
  }

  // Call this when the user logs out
  function onLogout() {
    analytiq.reset();           // clears the stored user identity
  }
</script>

Option B — npm + Bundler (Vite, Webpack, Parcel)

Use this if you have a bundler but no framework like React or Vue.

Step 1 — Install

npm install analytiq

Step 2 — Initialize in your entry file

Open your bundler’s entry file (usually main.js or index.js) and add at the top:

main.js

import { init } from 'analytiq'

// Initialize once with auto page view tracking
init(import.meta.env.VITE_ANALYTIQ_KEY, {
  autoTrackPageViews: true,
  debug: true
})

Step 3 — Track events anywhere in your project

any-file.js

import { track, identify, reset } from 'analytiq'

// Track a button click
document.getElementById('buyBtn').addEventListener('click', () => {
  track('buy_clicked', { price: 49 })
})

// Identify a user after login
async function handleLogin(email, password) {
  const res = await fetch('/api/login', { method: 'POST', body: JSON.stringify({ email, password }) })
  const data = await res.json()
  identify(data.user.id)  // call right after login
}

// Reset on logout
function handleLogout() {
  reset()
  window.location.href = '/login.html'
}

Verify it’s working

Open your HTML file in a browser
Press F12 and go to Console tab
You should see:

[analytiq] Initialized successfully. {userId: null}
[analytiq] Auto page view tracking enabled.

Go to your Analytiq Dashboard then Events — events appear within 10 seconds.

Getting Started

Framework Guides

Guides

Help

Vanilla HTML & JavaScript

Option A — CDN (No npm, No Installation)

Step 1 — Paste just before `</body>`

Track a button click

Track across multiple pages

Option B — npm + Bundler (Vite, Webpack, Parcel)

Step 1 — Install

Step 2 — Initialize in your entry file

Step 3 — Track events anywhere in your project

Verify it’s working

​Option A — CDN (No npm, No Installation)

​Step 1 — Paste just before </body>

​Track a button click

​Track across multiple pages

​Identify users after login

​Option B — npm + Bundler (Vite, Webpack, Parcel)

​Step 1 — Install

​Step 2 — Initialize in your entry file

​Step 3 — Track events anywhere in your project

​Verify it’s working

Option A — CDN (No npm, No Installation)

Step 1 — Paste just before `</body>`

Track a button click

Track across multiple pages

Identify users after login

Option B — npm + Bundler (Vite, Webpack, Parcel)

Step 1 — Install

Step 2 — Initialize in your entry file

Step 3 — Track events anywhere in your project

Verify it’s working