mtr-pixel
v1.1.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 URL parameters to be present:mtrsessionid,mtruserid, andmtrtimestampstartto track specific users.Here's an example of how you can structure your URL:
https://yourwebsite.com/?mtrsessionid=SESSION_ID&mtruserid=USER_ID&mtrtimestampstart=TIMESTAMPTrack 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">Track Event</button>
</div>
<script>
// Ensure URL parameters are present for initialization
// Example: https://yourwebsite.com/?mtrsessionid=123&mtruserid=456&mtrtimestampstart=2023-01-01T00:00:00Z
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}`);
}
// check if the website is already started with session id and user id
const urlParams = new URLSearchParams(window.location.search);
const sessionId = urlParams.get("mtrsessionid");
const userId = urlParams.get("mtruserid");
const timestampStart = urlParams.get("mtrtimestampstart");
if (sessionId && userId && timestampStart) {
// hide start button
document.getElementById("start").style.display = "none";
// show test div
document.getElementById("mtr-div").style.display = "block";
// initialize mtr-pixel
const mtrPixel = new MTRPixel();
// track a page view event on load
mtrPixel.trackEvent({CTA: "Carregar Loja"});
// add a click event listener to the button
document.getElementById('trackButton').addEventListener('click', () => {
mtrPixel.trackEvent({CTA: 'Comprar'});
});
}
</script>
</body>
</html>For more details, you can refer to the demo available in the demos/website directory.