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.

Tracking Custom Events

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 SDKs for tracking backend events: