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

In your Google Tag Manager interface, create a new Tag with a name tag_pixel like so:

<script>
(function() {
  console.log('Initializing telemetreeBuilder in GTM...');
  
  // Initialize queue if it doesn't exist
  window.telemetreeQueue = window.telemetreeQueue || [];
  
  // Load Telemetree script
  var script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/gh/TONSolutions/telemetree-pixel@main/telemetree-pixel.js';
  
  script.onload = function() {
    console.log('Telemetree script loaded');
    
    // Initialize real telemetreeBuilder with your Telemetree credentials
    var realTelemetreeBuilder = telemetree({
      projectId: "your-project-id",
      apiKey: "your-api-key",
      appName: "name",
      isTelegramContext: true // or false if you are not in Telegram Web App context
    });
    
    // Process any queued events
    console.log('Processing queued events:', window.telemetreeQueue);
    while (window.telemetreeQueue.length > 0) {
      var event = window.telemetreeQueue.shift();
      realTelemetreeBuilder.track(event.name, event.properties);
    }
    
    // Replace the temporary telemetreeBuilder with the real one
    window.telemetreeBuilder = realTelemetreeBuilder;
    
    console.log('telemetreeBuilder initialized and ready');
  };
  
  script.onerror = function(error) {
    console.error('Failed to load Telemetree script:', error);
  };
  
  document.head.appendChild(script);
})();
</script>

Don’t forget to put your credentials into realTelemetreeBuilder. (Also set Triggering to All Pages if that’s your goal.)

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.

ReactGoogle Tag Manager