@visitorlab/visitorlab-tracking

v1.3.21

Published

2 months ago

VisitorLab tracking script for React and vanilla JS apps

Downloads

0High
0Medium
0Low

developtica

visitorlab tracking analytics react typescript

VisitorLab Tracking

Official VisitorLab tracking package for web applications.
Easily integrate VisitorLab analytics into your website or app using a simple snippet, React component, or npm package.

🚀 Features

Lightweight and fast visitor tracking
Simple setup: manual, third-party, or npm
Works with React, Angular, Vue, and plain JavaScript
Designed for modern web apps

📦 Installation

NPM

npm install @visitorlab/visitorlab-tracking

or with Yarn:

yarn add @visitorlab/visitorlab-tracking

⚡ Usage

1. Plain JavaScript

import { initVisitorLab } from "@visitorlab/visitorlab-tracking";

initVisitorLab({
  projectCode: "YOUR_PROJECT_CODE",
});

2. React Hook

import { useVisitorLab } from "@visitorlab/visitorlab-tracking";

function App() {
  useVisitorLab("YOUR_PROJECT_CODE");

  return <h1>Hello VisitorLab!</h1>;
}

export default App;

3. React Component

import { VisitorLab } from "@visitorlab/visitorlab-tracking";

function App() {
  return (
    <VisitorLab projectCode="YOUR_PROJECT_CODE">
      <h1>My App</h1>
    </VisitorLab>
  );
}

export default App;

3. Angular / Vue / Other Frameworks

Add the script manually in your index.html before </body>:

<script>
  (function (v, i, s, i, t, o, r, l, a, b) {
    v[i] =
      v[i] ||
      function () {
        (v[i].q = v[i].q || []).push(arguments);
      };
    r = s.createElement(t);
    r.async = 1;
    r.src = "https://api.visitorlab.com/tracking/tag/" + o;
    l = s.getElementsByTagName(t)[0];
    l.parentNode.insertBefore(r, l);
  })(window, "clarity", document, "clarity", "script", "YOUR_PROJECT_CODE");
</script>

🛠 Project Code

Replace YOUR_PROJECT_CODE with the unique code generated in your VisitorLab dashboard.

Example:

initVisitorLab({
  projectCode: "kpmzlwqprk",
});

📚 Installation Methods

VisitorLab can be installed in multiple ways:

Manual script: Copy-paste snippet into <head> or before </body>.
Third-party platforms: Google Tag Manager, Shopify, Wix, WordPress, Webflow, etc. (coming soon in docs).
NPM package: For React, Angular, Vue, and modern apps.

📝 License

MIT

💡 Support

For help, visit VisitorLab Documentation or open an issue.