Documentation
Getting Started
Installation
Custom Events

Installation

This guide will help you integrate Tiny Metrics into your website in just a few minutes.

Table of Contents

Prerequisites
Vanilla HTML
Next.js
WordPress
Verification
Troubleshooting

Prerequisites

Before you begin, make sure you have:

  • A Tiny Metrics account (you can create one here)
  • Access to your website's source code
  • Basic knowledge of HTML and JavaScript

Vanilla HTML

The simplest way to integrate Tiny Metrics is by adding our script directly to your HTML. Copy and paste the following snippet into your website header, i.e. inside your HTML file between the <head> tags.

Installation Snippet
<script src="https://tinymetrics.io/tm.js"></script>
Example Implementation
<html> <head> <title>My Website</title> <script src="https://tinymetrics.io/tm.js"></script> </head> <body> <h1>Welcome to my website</h1> </body> </html>

Next.js Integration

For Next.js applications, we recommend using the built-in Script component for optimal performance. Add the following code to your layout file to ensure the script loads before the page becomes interactive:

import Script from 'next/script' <Script src='https://tinymetrics.io/tm.js' strategy='beforeInteractive' />
You can consider using layout.{tsx/jsx} depending on your needs and the version of Next.js you are using.

WordPress Installation

Adding Tiny Metrics to your WordPress site follows the same basic principle as the "Vanilla HTML" method. You'll need to edit your theme's header.php file and include our script in the header section:

<script src="https://tinymetrics.io/tm.js"></script>

If you are unsure how to edit your theme, check out this tutorial.

Verification

After installing the script, follow these steps to verify that Tiny Metrics is working correctly:

  1. Navigate to your website
  2. Visit a few different pages
  3. Check your Tiny Metrics dashboard

Your data should appear almost immediately.

Troubleshooting

If you encounter any issues during installation, here are some common problems and their solutions:

Data Not Appearing

If you don't see any data in your dashboard:

  • Check your browser's console for any error messages
  • Verify that the script is properly placed in the <head> section
  • Ensure your website isn't blocking the script with a Content Security Policy (CSP)
  • Try clearing your browser cache and refreshing the page
  • If using a CDN (like Cloudflare), ensure it's not serving a cached version of your site

Script Loading Issues

If the script isn't loading properly:

  • Check if your browser, network, or firewall is blocking the script
  • Ensure there are no syntax errors in your implementation

Still Having Problems?

If you're still experiencing issues, please contact our support team. We're here to help!

Custom events →