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>
(function(w, d, s, o){
    var j = d.createElement(s);
    j.async = true;
    j.src = 'https://s.clickyard.ai/script.js';
    j.onload = function() {
        if (document.readyState !== 'loading') Clickyard.init(o);
        else document.addEventListener("DOMContentLoaded", function() {
            Clickyard.init(o);
        });
    };
    d.head.insertBefore(j, d.head.firstElementChild);
})(window, document, 'script', {
    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>
  (function(w, d, s, o){
      var j = d.createElement(s);
      j.async = true;
      j.src = 'https://s.clickyard.ai/script.js';
      j.onload = function() {
          if (document.readyState !== 'loading') Clickyard.init(o);
          else document.addEventListener("DOMContentLoaded", function() {
              Clickyard.init(o);
          });
      };
      d.head.insertBefore(j, d.head.firstElementChild);
  })(window, document, 'script', {
      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
          dangerouslySetInnerHTML={{
            __html: `(function(w, d, s, o){
    var j = d.createElement(s);
    j.async = true;
    j.src = 'https://s.clickyard.ai/script.js';
    j.onload = function() {
        if (document.readyState !== 'loading') Clickyard.init(o);
        else document.addEventListener("DOMContentLoaded", function() {
            Clickyard.init(o);
        });
    };
    d.head.insertBefore(j, d.head.firstElementChild);
})(window, document, 'script', { 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: [
        {
          innerHTML: `(function(w, d, s, o){
    var j = d.createElement(s);
    j.async = true;
    j.src = 'https://s.clickyard.ai/script.js';
    j.onload = function() {
        if (document.readyState !== 'loading') Clickyard.init(o);
        else document.addEventListener("DOMContentLoaded", function() {
            Clickyard.init(o);
        });
    };
    d.head.insertBefore(j, d.head.firstElementChild);
})(window, document, 'script', { 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.

About Async Loading

Already Optimized

The Clickyard script already loads asynchronously by default. The installation code above uses async loading with proper DOMContentLoaded handling, so no additional configuration is needed.

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