Getting Your API Key

Your API key is what connects your app to your Analytiq project. Here’s exactly how to find it.

What is an API Key?

Your API key is a unique identifier that tells Analytiq which project your events belong to.

It looks like this:

pk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Every project you create in Analytiq has its own API key. When you initialize the SDK with init('pk_live_...'), Analytiq knows exactly which project dashboard to send your events to.

How to find your API Key

Step 1 — Log in to your dashboard at analytiq-two.vercel.app

Step 2 — Click on the project you want to track

Step 3 — Click Settings in the left sidebar

Step 4 — Scroll down to the Public API Key section

Step 5 — Click the Reveal button to show your key

Step 6 — Click the Copy button to copy it to your clipboard

Using your API Key in code

Paste your API key as the first argument to init():

import { init } from 'analytiq'

init('pk_live_YOUR_KEY_HERE')

Replace pk_live_YOUR_KEY_HERE with your actual key. Do not leave it as the placeholder text.

Is it safe to put in frontend code?

Yes. API keys starting with pk_live_ are designed to be used in browser (frontend) code. This is a public key, not a secret key. Think of it like your project’s ID — it identifies your project, but it doesn’t give anyone access to your Analytiq account.

If you ever suspect your API key was compromised, you can rotate it from the Settings page. Rotating generates a new key and invalidates the old one immediately.

Using Environment Variables (Recommended)

Instead of hardcoding your key directly in code, store it in a .env file:

React / Vite

Create .env in your project root:

VITE_ANALYTIQ_KEY=pk_live_YOUR_KEY_HERE

Use it in your code:

init(import.meta.env.VITE_ANALYTIQ_KEY)

Next.js

Create .env.local in your project root:

NEXT_PUBLIC_ANALYTIQ_KEY=pk_live_YOUR_KEY_HERE

Use it in your code:

init(process.env.NEXT_PUBLIC_ANALYTIQ_KEY)

Vue

Create .env in your project root:

VITE_ANALYTIQ_KEY=pk_live_YOUR_KEY_HERE

Use it in your code:

init(import.meta.env.VITE_ANALYTIQ_KEY)

Add .env to your .gitignore file so it never gets uploaded to GitHub.

---

Local vs Production API Keys

Each Analytiq project has its own API key. This means you should use separate projects for local development and production so that your test events don’t pollute your real analytics data.

Recommended setup

Create two projects in the Analytiq dashboard:

1. My App - Development — for local testing
2. My App - Production — for your live users

Then use the matching key in each environment.

Setting the key in your local .env file

# .env (local, never committed to git)
VITE_ANALYTIQ_KEY=pk_live_DEV_KEY_HERE        # React / Vite
NEXT_PUBLIC_ANALYTIQ_KEY=pk_live_DEV_KEY_HERE  # Next.js

Setting the key in your hosting platform (production)

Do not put your production key in a .env file committed to GitHub. Instead, set it as an environment variable directly in your hosting platform’s dashboard:

Platform	Where to add it
Vercel	Project Settings > Environment Variables
Render	Service Settings > Environment > Add Environment Variable
Railway	Service Settings > Variables
Netlify	Site Settings > Environment Variables
Heroku	Settings > Config Vars
AWS / GCP / Azure	Use their respective secrets manager or environment config

Set VITE_ANALYTIQ_KEY (or NEXT_PUBLIC_ANALYTIQ_KEY for Next.js) to your production project’s API key in each platform.

Summary

Environment	Where the key lives	Which project key to use
Local development	.env file (not committed)	Development project key
Production (deployed)	Hosting platform env variables	Production project key

After updating an environment variable on your hosting platform, you must redeploy your app for the change to take effect.