Installation

Overview

Cryptique can be installed via CDN script, npm package, or through tag managers. Choose the method that best fits your tech stack.

CDN (Recommended)
npm Package
Google Tag Manager

CDN Installation

The fastest way to get started. Add this script to your HTML <head>:

<script>
  var script = document.createElement('script');
  script.src = 'https://cdn.cryptique.io/scripts/analytics/1.0.1/cryptique.script.min.js';  
  script.setAttribute('site-id', 'YOUR_SITE_ID');
  script.setAttribute('auto-events', 'true');
  document.head.appendChild(script);
</script>

Configuration Attributes

Attribute	Type	Default	Description
`site-id`	string	required	Your unique site identifier
`auto-events`	string	omitted (= off)	Set to `true` to enable automatic event tracking; any other value leaves auto-events disabled
`auto-events-disabled-paths`	string	`''`	Comma-separated paths to exclude
`auto-events-disabled-events`	string	`''`	Comma-separated auto event names to disable (see Auto-Events)

Full Configuration Example

<script>
  var script = document.createElement('script');
  script.src = 'https://cdn.cryptique.io/scripts/analytics/1.0.1/cryptique.script.min.js';  
  script.setAttribute('site-id', 'myapp-com-42');
  script.setAttribute('auto-events', 'true');
  script.setAttribute('auto-events-disabled-paths', '/admin,/internal');
  script.setAttribute('auto-events-disabled-events', 'text_selection,copy_action');
  document.head.appendChild(script);
</script>

Complete HTML Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My App</title>
  
  <!-- Cryptique - load early for complete tracking -->
  <script>
    var script = document.createElement('script');
    script.src = 'https://cdn.cryptique.io/scripts/analytics/1.0.1/cryptique.script.min.js';  
    script.setAttribute('site-id', 'YOUR_SITE_ID');
    script.setAttribute('auto-events', 'true');
    document.head.appendChild(script);
  </script>
</head>
<body>
  <!-- Your content -->
</body>
</html>

After loading via CDN, the global Cryptique object is available:

// Track events
Cryptique.track('button_clicked', { button_name: 'signup' });

// Identify users
Cryptique.identify('user_123');

// Set user properties
Cryptique.people.set({ plan: 'pro' });

npm Installation

For JavaScript/TypeScript projects with a build system:

npm install cryptique-sdk

Or with yarn:

yarn add cryptique-sdk

Basic Usage

import Cryptique from 'cryptique-sdk';

// Initialize (async – returns the same Cryptique instance)
await Cryptique.init({
  siteId: 'YOUR_SITE_ID',
  autoEvents: true
});

// Use the global Cryptique object
Cryptique.track('button_clicked', { button_name: 'signup' });
Cryptique.identify('user_123');
Cryptique.people.set({ plan: 'pro' });

Configuration Options

import Cryptique from 'cryptique-sdk';

await Cryptique.init({
  // Required
  siteId: 'YOUR_SITE_ID',
  
  // Optional
  autoEvents: true,                    // Enable auto-tracking
  autoEventsDisabledPaths: [           // Paths to exclude
    '/admin',
    '/checkout'
  ],
  autoEventsDisabledEvents: [          // Auto event names to disable
    'text_selection',
    'copy_action'
  ],
  debug: false                         // Enable console logging
});

React Integration

// lib/cryptique.js
import Cryptique from 'cryptique-sdk';

let initialized = false;

export async function initCryptique() {
  if (initialized) return;
  
  await Cryptique.init({
    siteId: process.env.REACT_APP_CRYPTIQUE_SITE_ID,
    autoEvents: true
  });
  
  initialized = true;
}

// App.jsx
import { useEffect } from 'react';
import Cryptique from 'cryptique-sdk';
import { initCryptique } from './lib/cryptique';

function App() {
  useEffect(() => {
    initCryptique();
  }, []);

  useEffect(() => {
    if (user) {
      Cryptique.identify(user.id);
      Cryptique.people.set({
        email: user.email,
        plan: user.plan
      });
    }
  }, [user]);

  return <YourApp />;
}

Next.js Integration

// lib/cryptique.js
import Cryptique from 'cryptique-sdk';

let initialized = false;

export async function initCryptique() {
  if (typeof window === 'undefined') return;
  if (initialized) return;
  
  await Cryptique.init({
    siteId: process.env.NEXT_PUBLIC_CRYPTIQUE_SITE_ID,
    autoEvents: true
  });
  
  initialized = true;
}

// app/layout.jsx (App Router)
'use client';
import { useEffect } from 'react';
import { initCryptique } from '@/lib/cryptique';

export default function RootLayout({ children }) {
  useEffect(() => {
    initCryptique();
  }, []);

  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

// Any component
import Cryptique from 'cryptique-sdk';

function MyComponent() {
  const handleClick = () => {
    Cryptique.track('feature_used', { feature: 'swap' });
  };

  return <button onClick={handleClick}>Swap</button>;
}

Vue Integration

// plugins/cryptique.js
import Cryptique from 'cryptique-sdk';

export default {
  async install(app) {
    await Cryptique.init({
      siteId: import.meta.env.VITE_CRYPTIQUE_SITE_ID,
      autoEvents: true
    });
    
    app.config.globalProperties.$cryptique = Cryptique;
    app.provide('cryptique', Cryptique);
  }
};

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import cryptiquePlugin from './plugins/cryptique';

const app = createApp(App);
app.use(cryptiquePlugin);
app.mount('#app');

// Component usage
import Cryptique from 'cryptique-sdk';

Cryptique.track('feature_used', { feature: 'swap' });

Google Tag Manager

Deploy Cryptique via GTM without modifying your codebase.

Setup Steps

Create New Tag

In GTM, go to Tags → New → Tag Configuration → Custom HTML

Add Script

Paste the following code:

<script>
  var script = document.createElement('script');
  script.src = 'https://cdn.cryptique.io/scripts/analytics/1.0.1/cryptique.script.min.js';  
  script.setAttribute('site-id', 'YOUR_SITE_ID');
  script.setAttribute('auto-events', 'true');
  document.head.appendChild(script);
</script>

Set Trigger

Click Triggering → Select All Pages

Save and Publish

Click Save, then Submit to publish

Full Configuration

<script>
  var script = document.createElement('script');
  script.src = 'https://cdn.cryptique.io/scripts/analytics/1.0.1/cryptique.script.min.js';  
  script.setAttribute('site-id', 'YOUR_SITE_ID');
  script.setAttribute('auto-events', 'true');
  script.setAttribute('auto-events-disabled-paths', '/admin,/internal');
  script.setAttribute('auto-events-disabled-events', 'text_selection,copy_action');
  document.head.appendChild(script);
</script>

Custom Events via Data Layer

Push events from your site to GTM, then forward to Cryptique:On your website:

dataLayer.push({
  event: 'cryptique_track',
  eventName: 'button_clicked',
  eventProperties: { button_name: 'signup' }
});

GTM Custom HTML Tag:

<script>
  if (window.Cryptique) {
    Cryptique.track('{{DL - eventName}}', {{DL - eventProperties}});
  }
</script>

See the Google Tag Manager guide for advanced configurations.

Verification

After installation, verify it’s working:

1. Check Browser Console

Open developer tools (F12) and look for:

[Cryptique] Initialized successfully
[Cryptique] Session started: abc123
[Cryptique] Event tracked: page_view

2. Check Live Events

Go to your Cryptique dashboard
Navigate to Live Events or Debugger
Perform actions on your site
Events should appear within 60 seconds

3. Network Tab

In browser dev tools → Network tab, look for requests to:

api.cryptique.io/events
api.cryptique.io/sessions

Troubleshooting

Script blocked by Content Security Policy

Add these domains to your CSP:

script-src 'self' https://cdn.cryptique.io;
connect-src 'self' https://api.cryptique.io;

Events not appearing

Verify Site ID is correct
Check domain is whitelisted in settings
Disable ad blockers temporarily
Check browser console for errors

Double-counting events

Ensure the script is only loaded once. If using both CDN and npm, choose one.

Script loading slowly

The CDN script is ~15KB gzipped. If performance is critical:

Use async loading (default)
Consider npm package for bundling
Load after critical resources

Next Steps

Auto-Events

Configure automatic event tracking

Track Custom Events

Learn the track() method

INTRO

DATA IN

DATA MODEL

BEST PRACTICES

Overview

CDN Installation

Configuration Attributes

Full Configuration Example

Complete HTML Example

npm Installation

Basic Usage

Configuration Options

React Integration

Next.js Integration

Vue Integration

Google Tag Manager

Setup Steps

Full Configuration

Custom Events via Data Layer

Verification

1. Check Browser Console

2. Check Live Events

3. Network Tab

Troubleshooting

Next Steps

Auto-Events

Track Custom Events

​Overview

​CDN Installation

​Configuration Attributes

​Full Configuration Example

​Complete HTML Example

​npm Installation

​Basic Usage

​Configuration Options

​React Integration

​Next.js Integration

​Vue Integration

​Google Tag Manager

​Setup Steps

​Full Configuration

​Custom Events via Data Layer

​Verification

​1. Check Browser Console

​2. Check Live Events

​3. Network Tab

​Troubleshooting

​Next Steps

Auto-Events

Track Custom Events

Overview

CDN Installation

Configuration Attributes

Full Configuration Example

Complete HTML Example

npm Installation

Basic Usage

Configuration Options

React Integration

Next.js Integration

Vue Integration

Google Tag Manager

Setup Steps

Full Configuration

Custom Events via Data Layer

Verification

1. Check Browser Console

2. Check Live Events

3. Network Tab

Troubleshooting

Next Steps