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: