179 lines
8.7 KiB
Plaintext
179 lines
8.7 KiB
Plaintext
---
|
|
title: "How to add analytics to any website"
|
|
description: "Add privacy-first analytics to any website in minutes using a simple script tag. Works with WordPress, Webflow, Squarespace, and plain HTML."
|
|
difficulty: beginner
|
|
timeToComplete: 5
|
|
date: 2025-12-14
|
|
cover: /content/cover-default.jpg
|
|
team: OpenPanel Team
|
|
steps:
|
|
- name: "Get your Client ID"
|
|
anchor: "get-id"
|
|
- name: "Add the script tag"
|
|
anchor: "script"
|
|
- name: "Track custom events"
|
|
anchor: "events"
|
|
- name: "Verify your setup"
|
|
anchor: "verify"
|
|
---
|
|
|
|
# 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](https://dashboard.openpanel.dev/onboarding))
|
|
- Access to your website's HTML header or footer
|
|
|
|
## Get your Client ID [#get-id]
|
|
|
|
Start by creating an OpenPanel account at [dashboard.openpanel.dev](https://dashboard.openpanel.dev/onboarding). 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 [#script]
|
|
|
|
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.
|
|
|
|
```html
|
|
<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.
|
|
|
|
```php
|
|
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 [#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.
|
|
|
|
```html
|
|
<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.
|
|
|
|
```html
|
|
<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.
|
|
|
|
```html
|
|
<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.
|
|
|
|
```html
|
|
<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 [#verify]
|
|
|
|
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](https://dashboard.openpanel.dev) 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](/docs/adblockers) 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](/docs/sdks/script). If you want to understand user journeys better, the article on [how to create a funnel](/articles/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](/guides/nodejs-analytics) and [Python guide](/guides/python-analytics) cover those use cases.
|
|
|
|
If you're using a specific framework, check out our framework-specific guides for more advanced setups:
|
|
- [Next.js analytics guide](/guides/nextjs-analytics) for Next.js applications
|
|
- [React analytics guide](/guides/react-analytics) for React applications
|
|
- [Astro analytics guide](/guides/astro-analytics) for Astro sites
|
|
- [Vue analytics guide](/guides/vue-analytics) for Vue.js applications
|
|
|
|
<Faqs>
|
|
<FaqItem question="Does OpenPanel use cookies?">
|
|
No. OpenPanel uses cookieless tracking by default. This means you typically don't need cookie consent banners for basic analytics under most privacy regulations, including GDPR and PECR.
|
|
</FaqItem>
|
|
|
|
<FaqItem question="Will ad blockers prevent tracking?">
|
|
Some ad blockers may block requests to openpanel.dev. You can mitigate this by proxying the script through your own domain or by self-hosting OpenPanel. The documentation covers both approaches.
|
|
</FaqItem>
|
|
|
|
<FaqItem question="Can I use OpenPanel with Google Tag Manager?">
|
|
Yes. Add the OpenPanel script as a Custom HTML tag in Google Tag Manager with an All Pages trigger. This lets you manage OpenPanel alongside your other tracking scripts.
|
|
</FaqItem>
|
|
|
|
<FaqItem question="Is OpenPanel GDPR compliant?">
|
|
Yes. OpenPanel is designed for GDPR compliance with cookieless tracking, data minimization, and support for data subject rights. Self-hosting eliminates international data transfer concerns entirely. Read more about [cookieless analytics](/articles/cookieless-analytics) for details.
|
|
</FaqItem>
|
|
</Faqs>
|