@davidkolisek/click-tracker v1.0.24

@davidkolisek/click-tracker

Collect data about every click on your page

Install

$ npm install @davidkolisek/click-tracker

Usage

1. You need to install (npm i firebase @9.4.1) or add (https://www.gstatic.com/firebasejs/9.4.1/firebase-app.js) firebase to your project. More info here: https://firebase.google.com/docs/web/setup

2. Your firebase setup should look like this:

import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.4.1/firebase-app.js';

const firebaseConfig = {
  apiKey: "yourDataFromFirebase",
  authDomain: "yourDataFromFirebase",
  projectId: "yourDataFromFirebase",
  storageBucket: "yourDataFromFirebase",
  messagingSenderId: "yourDataFromFirebase",
  appId: "yourDataFromFirebase"
};

const app = initializeApp(firebaseConfig);

3. Now add access to DB. In firebase console you must have Realtime Database. Final code:

import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.4.1/firebase-app.js';
import { getFirestore, doc, getDoc, getDocs, collection } from "https://www.gstatic.com/firebasejs/9.4.1/firebase-firestore.js";

const firebaseConfig = {
  apiKey: "yourDataFromFirebase",
  authDomain: "yourDataFromFirebase",
  projectId: "yourDataFromFirebase",
  storageBucket: "yourDataFromFirebase",
  messagingSenderId: "yourDataFromFirebase",
  appId: "yourDataFromFirebase"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

4. Now import and use package

import { ctraInit, ctraGetAll } from "../node_modules/@davidkolisek/click-tracker/ctra.js";
//or
import { ctraInit, ctraGetAll } from "@davidkolisek/click-tracker/ctra.js";

ctraInit() //call function to collecting data
ctraGetDbAll() // get data from your Realtime Firebase DB

5. Usage in HTML (add class ctra-btn to your button/anchor)

<a href="/your-cool-subpage.html" class="ctra-btn">
Subpage
</a>

6. Data from DB should look like this:

{
    "17:29:00": {
        "Subpage": {
            "agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36",
            "buttonName": "Subpage",
            "time": "17:29:00",
            "version": "Mozilla"
        }
    }
}