Skip to main content
All CollectionsSetup
Setup - Installing the Website Tracker
Setup - Installing the Website Tracker

This article will guide you through setting up HockeyStack snippet on your website

Canberk Beker avatar
Written by Canberk Beker
Updated over a week ago

Having issues? Check out the troubleshooting guide: Why is My HockeyStack Integration Failing?🤔

If you've used any web analytics service before, you know the hassle of putting their code into your site. Fortunately, HockeyStack only requires one short snippet to track all your visitors' actions

You can copy the snippet from multiple places in the dashboard. If you haven’t integrated yet, you should be able to see it in the integration steps. If you already integrated but need to update the script, you can copy it from Settings > Domain Details > Integration Snippet.

Paste the snippet into the <head></head> tag of your site. Make sure this snippet is present on every page that you want to track.

If you don’t want to deal with any code or ask a developer to insert the snippet, you can directly add the snippet through GTM. Follow this guide on how to do it: Google Tag Manager

Platform-specific Guides

WordPress

  1. Install the Insert Headers and Footers plugin.

  2. Go to Settings > Header and Footer Scripts.

  3. Paste the code snippet into Scripts in the header textbox.

  4. Click Save Settings.

Alternative Method

  1. Navigate to Appearance > Theme Editor

  2. Click the Theme Header (header.php) file on the right-hand side below the Theme Files section.

  3. Paste the code snippet before the closing </head> tag.

  4. Click Update File

React

Whether you call it a framework, a library, or a lifestyle, React is a very popular tool to build sites with. Our tracking script works with SPAs (single page application) too but the code to embed it to your site is a little more complicated.

There are many ways to embed custom script tags into your site, see React Helmet for an npm package. The solution below does not require any package installation. It uses Hooks, which were introduced in React 16.8, to call the script once the component is mounted.

Don’t forget to replace YOUR_API_KEY with your actual API key.

useEffect(() => { 
const script = document.createElement('script');
script.src = "https://cdn.jsdelivr.net/npm/hockeystack@latest/hockeystack.min.js"; script.async = true; script.dataset.apikey = "YOUR_API_KEY"; script.dataset.cookieless = 1; script.dataset.autoIdentify = 1; document.head.appendChild(script); }, []);

We can automatically collect all data from all platforms that allow custom script insertion.

Tracking with Cookies

HockeyStack is by default cookie-less. However, you can convert your script to use cookies any time you want following this guide:


Did this answer your question?