Installation

Custom HTML

Install Clickyard by adding the tracking script directly to your HTML. Works with any website, framework, or CMS.

Basic Installation

Add the following code to your HTML, ideally in the <head> section of every page:

HTML

<!-- Clickyard Tracking Script -->
<script src="https://s.clickyard.ai/v1.js"></script>
<script>
  Clickyard.init({ id: 'YOUR-WEBSITE-ID' });
</script>

Important: Replace YOUR-WEBSITE-ID with your actual website ID from the Clickyard dashboard.

Full HTML Example

Here's how your HTML file should look with the tracking code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>

  <!-- Clickyard Tracking Script -->
  <script src="https://s.clickyard.ai/v1.js"></script>
  <script>
    Clickyard.init({ id: 'YOUR-WEBSITE-ID' });
  </script>

</head>
<body>
  <!-- Your content here -->
</body>
</html>

Framework-Specific Installation

React / Next.js

Add the script to your _document.js (Next.js) or index.html (Create React App):

// Next.js - pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <script src="https://s.clickyard.ai/v1.js" />
        <script
          dangerouslySetInnerHTML={{
            __html: `Clickyard.init({ id: 'YOUR-WEBSITE-ID' });`
          }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Vue / Nuxt

Add to nuxt.config.ts (Nuxt) or index.html (Vue):

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        { src: 'https://s.clickyard.ai/v1.js' },
        { innerHTML: `Clickyard.init({ id: 'YOUR-WEBSITE-ID' });` }
      ]
    }
  }
})

Static Site Generators (Astro, Hugo, Jekyll, etc.)

Add the script to your base layout template or head partial. Look for files like:

layouts/Layout.astro (Astro)
layouts/_default/baseof.html (Hugo)
_includes/head.html (Jekyll)
src/layouts/Base.astro (Astro)

Single Page Applications (SPA)

SPA Support

Clickyard automatically tracks page navigation in single-page applications. The script detects route changes and records pageviews accordingly.

No additional configuration is needed — just install the script once, and it will work across all your app's routes.

Async Loading (Optional)

If you want to load the script asynchronously to avoid blocking page render:

<script>
  (function() {
    var s = document.createElement('script');
    s.src = 'https://s.clickyard.ai/v1.js';
    s.async = true;
    s.onload = function() {
      Clickyard.init({ id: 'YOUR-WEBSITE-ID' });
    };
    document.head.appendChild(s);
  })();
</script>

Note: Async loading is optional. The script is already optimized and lightweight (~15KB gzipped).

Verify Installation

Open your website in a browser
Open Developer Tools (F12)
Go to the Console tab
Type Clickyard and press Enter
You should see the Clickyard object with methods

Expected console output:

Clickyard {init: ƒ, ...}

Next Steps

Set Up Goals

Define your conversion goals

Custom Events

Track custom JavaScript events