Skip to main content
Which method should I use?
Your projectMethod to use
Plain .html files, no build toolsCDN (Option A below)
Uses Vite, Webpack, or Parcel (but no framework)npm (Option B below)
A .html file inside a React/Vue projectUse 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 &lt;script src="analytics.js"&gt;&lt;/script&gt;.

​
Identify users after login

<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

  1. Open your HTML file in a browser
  2. Press F12 and go to Console tab
  3. You should see:
[analytiq] Initialized successfully. {userId: null}
[analytiq] Auto page view tracking enabled.
  1. Go to your Analytiq Dashboard then Events — events appear within 10 seconds.