How to add analytics to any website

Adding analytics to your website does not require developer expertise. OpenPanel's script tag works with any website, whether you're using WordPress, Webflow, Squarespace, or plain HTML. In about five minutes, you'll have privacy-first analytics running on your site.

OpenPanel is an open-source analytics platform that works without cookies by default. This means you can track meaningful user behavior while respecting privacy and avoiding cookie consent banners in most cases.

Prerequisites

A website on any platform
An OpenPanel account (sign up free)
Access to your website's HTML header or footer

Get your Client ID

Start by creating an OpenPanel account at dashboard.openpanel.dev. Once logged in, create a new project and copy your Client ID from the project settings.

Your Client ID will look something like cl_xxxxxxxxxxxxxxxx. Keep this handy, as you'll need it in the next step.

Add the script tag

The OpenPanel script needs to be added to every page of your website. The best approach depends on your platform, but the core snippet remains the same.

Here's the script tag you'll be adding. Replace YOUR_CLIENT_ID with the Client ID you copied earlier.

<script>
  window.op=window.op||function(){var n=[];return new Proxy(function(){arguments.length&&n.push([].slice.call(arguments))},{get:function(t,r){return"q"===r?n:function(){n.push([r].concat([].slice.call(arguments)))}} ,has:function(t,r){return"q"===r}}) }();
  window.op('init', {
    clientId: 'YOUR_CLIENT_ID',
    trackScreenViews: true,
    trackOutgoingLinks: true,
    trackAttributes: true,
  });
</script>
<script src="https://openpanel.dev/op1.js" defer async></script>

The trackScreenViews option enables automatic page view tracking, so you don't need to manually track each page. The trackOutgoingLinks option captures clicks on external links, which is useful for understanding how users leave your site.

Platform-specific instructions

For WordPress sites, the easiest approach is to use a plugin like "Insert Headers and Footers" or "Code Snippets". Install the plugin, then paste the script tag into the header section. If you prefer working with code, you can add the script directly to your theme's header.php file before the closing </head> tag.

WordPress users who want more control can add the script via functions.php instead.

function add_openpanel_script() {
    ?>
    <script>
      window.op=window.op||function(){var n=[];return new Proxy(function(){arguments.length&&n.push([].slice.call(arguments))},{get:function(t,r){return"q"===r?n:function(){n.push([r].concat([].slice.call(arguments)))}} ,has:function(t,r){return"q"===r}}) }();
      window.op('init', {
        clientId: 'YOUR_CLIENT_ID',
        trackScreenViews: true,
        trackOutgoingLinks: true,
        trackAttributes: true,
      });
    </script>
    <script src="https://openpanel.dev/op1.js" defer async></script>
    <?php
}
add_action('wp_head', 'add_openpanel_script');

For Webflow, go to your project settings and navigate to Custom Code. Paste the script tag into the Head Code section and publish your site. The script will now load on every page.

Squarespace users can find the code injection settings under Settings > Advanced > Code Injection. Add the script to the Header section and save your changes.

If you're using Google Tag Manager, create a new Custom HTML tag and paste the script tag code. Set the trigger to All Pages and publish your container.

Track custom events

Page views are tracked automatically, but you'll likely want to track specific user actions like button clicks, form submissions, or video plays. OpenPanel provides two ways to do this.

The simplest approach uses data-track attributes directly in your HTML. When a user clicks an element with this attribute, OpenPanel automatically sends an event.

<button data-track="button_clicked" data-button_name="signup">
  Sign Up
</button>

Any data- attributes on the element (except data-track itself) are included as event properties. This is useful when you want to track additional context without writing JavaScript.

For more complex tracking, you can call the window.op function directly. This gives you full control over when and what to track.

<script>
  document.querySelector('.signup-button').addEventListener('click', function() {
    window.op('track', 'button_clicked', {
      button_name: 'signup',
      button_location: 'hero'
    });
  });
</script>

Form submissions are a common tracking use case. You can track them inline using the onsubmit attribute.

<form onsubmit="window.op('track', 'form_submitted', {form_name: 'contact'}); return true;">
  <input type="email" name="email" placeholder="Your email">
  <button type="submit">Submit</button>
</form>

Identifying users

When users log in or provide their email, you can associate their activity with a profile. This is done using the identify method.

<script>
  window.op('identify', {
    profileId: 'user_123',
    email: 'user@example.com',
    firstName: 'John',
    lastName: 'Doe'
  });
</script>

The profileId is required and should be a unique identifier from your system. Once identified, all subsequent events are associated with this user, enabling cross-session analysis.

Verify your setup

Open your website in a browser and navigate through a few pages. Click some buttons or links that you've set up tracking for. Then head to your OpenPanel dashboard and check the Real-time view.

Events should appear within a few seconds. If you're not seeing any data, open your browser's developer console (F12) and look for JavaScript errors. The most common issues are an incorrect Client ID or ad blockers preventing the script from loading.

Ad blockers can interfere with analytics scripts. If this is a concern for your audience, you can proxy the OpenPanel script through your own domain. The ad blocker documentation explains how to set this up.

Next steps

The script tag covers most tracking needs for traditional websites. For more advanced configuration options, check out the Script Tag SDK reference. If you want to understand user journeys better, the article on how to create a funnel walks through setting up conversion funnels.

For sites with backend logic or server-side rendering, you might want to combine client-side tracking with server-side events. The Node.js guide and Python guide cover those use cases.

If you're using a specific framework, check out our framework-specific guides for more advanced setups: