1.0.24 • Published 4 years ago

@davidkolisek/click-tracker v1.0.24

Weekly downloads
-
License
ISC
Repository
github
Last release
4 years ago

@davidkolisek/click-tracker

npm (scoped) npm bundle size (minified)

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);
  1. 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);
  1. 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
  1. Usage in HTML (add class ctra-btn to your button/anchor)
<a href="/your-cool-subpage.html" class="ctra-btn">
Subpage
</a>
  1. 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"
        }
    }
}
1.0.24

4 years ago

1.0.23

4 years ago

1.0.22

4 years ago

1.0.21

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago