Skip to main content

🌐 Sending Event from Browser

Overview​

Since the API uses HTTP call, you can use literally any platform that can send data over the internet. The web is the most common use case for this.

As long as you provide payload requirements outlined in the API Documentation, you have the flexibility to choose how you collect your data.

Implementation Example​

1. Track Page Visits​

Track when users load your web pages by implementing the following simple code:

const PUBLIC_KEY = "YOUR_PUBLIC_KEY_GOES_HERE";
const PROJECT_ID = "YOUR_PROJECT_ID_GOES_HERE";
const SENTINEL_URL = "https://sentinel.hubku.com/api/v1/event";

window.addEventListener("load", function(e) {
    const payload = {
        "PublicKey": PUBLIC_KEY,
        "ProjectID": PROJECT_ID,
        "EventType": type,
        "FiredAt": new Date(),
        "EventLabel": "Page Visit",
        "PageURL": window.location.href,
        "UserAgent": platform.ua, // coming from platform.js library
        "BrowserName": platform.name, // coming from platform.js library
        "DeviceType": platform.description, // coming from platform.js library
        "ScreenResolution": `${window.screen.width}x${window.screen.height}`,
    };

    // send event to sentinel
    fetch(SENTINEL_URL, {
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json"
        },
        method: "POST",
        body: JSON.stringify(payload),
        }).catch(err => {
            console.log(err);
        })
    })
}

2. Track Clicks on Element with Label​

You can choose to send events that include only specific elements with a data-label attribute. This approach helps you manage your usage and avoid overwhelming your data.

To get started, define a data-label for your HTML elements. For example, you might use it for a link with the label "Scroll from Hero to Collections." Feel free to customize the labels based on your needs.

<a data-label="Scroll from Hero to Collections" href="#koleksi">
  See Full Collections
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
    <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
  </svg>
</a>

Then you can get that label inside the JavaScript like this:

const PUBLIC_KEY = "YOUR_PUBLIC_KEY_GOES_HERE";
const PROJECT_ID = "YOUR_PROJECT_ID_GOES_HERE";
const SENTINEL_URL = "https://sentinel.hubku.com/api/v1/event";

window.addEventListener("click", function(e) {
	const targetElem = e.target.closest("[data-label]");
	if (!targetElem) return;

	const label = targetElem.dataset.label;
	const simplePath = targetElem.tagName.toLowerCase() + (targetElem.id ? `#${targetElem.id}` : "");

	const payload = {
		"PublicKey": PUBLIC_KEY,
		"ProjectID": PROJECT_ID,
		"EventType": type,
		"FiredAt": new Date(),
		"EventLabel": label, // Scroll from Hero to Collections
		"ElementPath": simplePath,
		"ElementType": targetElem.tagName,
		"PageURL": window.location.href,
		"UserAgent": platform.ua, // coming from platform.js library
		"BrowserName": platform.name, // coming from platform.js library
		"DeviceType": platform.description, // coming from platform.js library
		"ScreenResolution": `${window.screen.width}x${window.screen.height}`,
	};

	fetch(SENTINEL_URL, {
		headers: {
			"Accept": "application/json",
			"Content-Type": "application/json"
		},
		method: "POST",
		body: JSON.stringify(payload),
	}).catch(err => {
		console.log(err);
	})
}