mtr-pixel
v1.5.0
Published
Validação de fluxo e conversões geradas pelos agents
Readme
MTR-Pixel
Description
MTR-Pixel is a library designed for tracking user interactions and conversions on websites. The library sends tracking events to a specified backend endpoint.
Install
Clone the repository:
git clone https://github.com/morethanrealio/mtr-pixel.git cd mtr-pixelInstall dependencies:
npm installBuild or develop:
npm run-script buildThis command will compile the TypeScript code and generate the
mtr_pixel.jsfile in thedistdirectory. If you want to develop, you'll need to run the following command:npm run-script watchThis command will compile and watch for changes in the TypeScript code and generate the
mtr_pixel.jsfile in thedistdirectory.
Usage
To integrate MTR-Pixel into your website, include the generated mtr_pixel.js file in your HTML and initialize the MTRPixel class.
Include the script in your HTML:
<script src="path/to/dist/mtr_pixel.js"></script>Initialize the MTRPixel class:
The
MTRPixelclass is automatically initialized when the script loads, but it requires specific local storage parameters to be present:mtrsessionid,mtruserid,mtrtimestampstartandmtroriginto track specific users OR URL Params set like:https://yourwebsite.com/?mtrsessionid=SESSION_ID&mtruserid=USER_ID&mtrtimestampstart=TIMESTAMP&mtrorigin=ORIGINTrack events:
Once the MTRPixel is initialized, you can track events using the
trackEventmethod. This method accepts an object with any custom data you want to send. To track user actions use theCTAparameter.// Initialize MTRPixel const mtrPixel = new MTRPixel(); // Track an user action on load mtrPixel.trackEvent({CTA: "Carregar Loja"}); // Track a button click event document.getElementById('myButton').addEventListener('click', () => { mtrPixel.trackEvent({CTA: 'Comprar'}); });
Example
Here is a complete example of how to use MTR-Pixel in an HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MTR - Pixel Demo</title>
<script src="../../dist/mtr_pixel.js"></script>
</head>
<body>
<h1>MTR - Pixel Demo</h1>
<button id="start" onclick="start()">Start</button>
<div id="mtr-div" style="display: none">
<p>Check the console to see the tracking events.</p>
<button id="trackButton" onclick="trackEvent()">Track Event</button>
<button id="clearButton" onclick="clearSession()">Clear Session</button>
</div>
<script>
const STORAGE_PREFIX = "mtr";
function start() {
// simulation of getting the IDs of the user by URL parameters
const sessionId = "7d498726-2ccd-4316-b447-2e8a9e06a7f7";
const userId = "6c257aff-e173-4020-ae12-1a3596122cde";
const timestampStart = "2025-11-11T19:52:48.995Z";
window.location.assign(`${window.location.href}?mtrsessionid=${sessionId}&mtruserid=${userId}&mtrtimestampstart=${timestampStart}`);
}
function trackEvent() {
// start mtr pixel again
const mtrPixel = new MTRPixel();
// add a click event listener to the button
mtrPixel.trackEvent({CTA: 'Comprar'});
}
function clearSession() {
// start mtr pixel again
const mtrPixel = new MTRPixel();
// track a page view event on clear session
mtrPixel.trackEvent({CTA: "Clear"});
localStorage.removeItem(`${STORAGE_PREFIX}sessionid`);
localStorage.removeItem(`${STORAGE_PREFIX}userid`);
localStorage.removeItem(`${STORAGE_PREFIX}timestampstart`);
localStorage.removeItem(`${STORAGE_PREFIX}origin`);
document.getElementById("start").style.display = "block";
document.getElementById("mtr-div").style.display = "none";
}
// check if it needs start button
const urlParams = new URLSearchParams(window.location.search);
const sessionId = urlParams.get("mtrsessionid");
const bShow = !sessionId;
document.getElementById("start").style.display = bShow ? "block" : "none";
document.getElementById("mtr-div").style.display = bShow ? "none" : "block";
</script>
</body>
</html>For more details, you can refer to the demo available in the demos/website directory.