Github

The vanilla Javascript library collects events as effeciently as the Telemetree React SDK while being framework agnostic.

​
Getting started

​
System Requirements

  • A Telegram Mini App project or a website set up with Javascript

​
Installation

  1. Place these scripts before the closing <head> tag in your tempate or call it accordingly to your framework of choice practices:
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<script src="https://cdn.jsdelivr.net/gh/TONSolutions/telemetree-pixel@main/telemetree-pixel.js"></script>
  1. And inside the <body> initialise Telemetree with your credentials like so:
<script>
    const telemetreeBuilder = telemetree({
        projectId: "YOUR_PROJECT_ID",
        apiKey: "YOUR_API_KEY",
        appName: "YOUR_APPLICATION_NAME",
        isTelegramContext: true, // use false, if a website is not in Telegram Web App context
    });
</script>
  1. That’s it! Now you can add custom events with telemetreeBuilder.track function transfering any type of valuable information required for the further analysis:
<script>
    telemetreeBuilder.track('transfer', {
        amount: 1000,
        method: 'TON',
    });
</script>

Default set of events like pageload is automatically tracked and collected by the library and you don’t need to specifically wrap those unless you want custom data to be collected on such actions.

You can use Telemetree React SDK and Telemetree Pixel simultaniously in your app if for some reason you have to. Just make sure to avoid data duplication problems.

​
User data and Processing

Adhering to Telegram’s high standards of security, we employ RSA encryption for the transmission of data across networks, ensuring both the integrity and safety of your analytics processes. You can learn more in the dedicated section of Documentation.

​
Debugging

  • Use browser developer tools to monitor network requests and confirm that events are being sent to Telemetree.
  • Add console logs in your event handling functions to verify that events are being triggered as expected.

​
Using Telemetree Pixel with Google Tag Manager

  1. In your Google Tag Manager interface, create a new Tag with a name tag_pixel like so:
<script>
(function() {
  // Load Telemetree script
  var config = {{config}};
  var script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/gh/TONSolutions/telemetree-pixel@main/telemetree-pixel.js';
  script.async = true;
  script.onload = function() {
    var telemetreeBuilder = telemetree(config);

    // Process any queued events
    if (window.telemetreeEvents && window.telemetreeEvents.length) {
      window.telemetreeEvents.forEach(function(event) {
        telemetreeBuilder.track(event.name, event.properties);
      });
      window.telemetreeEvents = [];
    }
  };
  document.head.appendChild(script);

  // Function to send event to telemetree
  function sendToTelemetree(eventName, eventData) {
    if (typeof telemetreeBuilder !== 'undefined' && telemetreeBuilder.track) {
      telemetreeBuilder.track(eventName, eventData);
    } else {
      // Queue the event if telemetreeBuilder is not ready
      window.telemetreeEvents = window.telemetreeEvents || [];
      window.telemetreeEvents.push({name: eventName, properties: eventData});
    }
  }

  // Listen for all GTM events
  var dataLayer = window.dataLayer || [];
  var originalPush = dataLayer.push;

  dataLayer.push = function() {
    var args = [].slice.call(arguments, 0);
    var result = originalPush.apply(dataLayer, args);

    // Check if this push contains an event
    args.forEach(function(arg) {
      if (arg && arg.event) {
        sendToTelemetree(arg.event, arg);
      }
    });

    return result;
  };
})();
</script>

(Also set Triggering to All Pages if that’s your goal.)

  1. In the Variables section of the Tag Manager interface, create a new variable with a name config and your credentials like so:
function() {
  return {
    "projectId": "YOUR_PROJECT_ID",
    "apiKey": "YOUR_API_KEY",
    "appName": "YOUR_APPLICATION_NAME",
    isTelegramContext: false // use false, if a website is not in Telegram Web App context
};
}

Now you can Preview and Publish this container.

Configuring custom events works exactly the same as in the vanilla Javascript library:

<script>
    telemetreeBuilder.track('transfer', {
        amount: 1000,
        method: 'TON',
    });
</script>

​
Other options

We also provide a Python SDK for tracking backend related events.

ReactPython