Custom Events / Listeners

Listening to TikTok Events

HandL fires custom events you can listen to:

// Listen for TikTok initialization
document.body.addEventListener('UTMSimpleTikTokInitCompleted', function(event) {
    console.log('TikTok Pixel initialized');
});

// Listen for any TikTok event completion
document.body.addEventListener('UTMSimpleTikTokEventCompleted', function(event) {
    console.log('TikTok event sent');
});

// Listen for specific event completion
document.body.addEventListener('UTMSimpleTikTokPurchaseCompleted', function(event) {
    console.log('Purchase event sent to TikTok');
});

// Listen for advanced matching completion
document.body.addEventListener('UTMSimpleTikTokAdvancedMatchingCompleted', function(event) {
    console.log('Advanced matching data sent:', event.detail);
});

Example: Track Button Clicks

document.getElementById('buy-button').addEventListener('click', function() {
    HandL.sendTikTokEvent('InitiateCheckout', {
        value: 99.99,
        currency: 'USD',
        content_type: 'product'
    });
});

Example: Track Form Submissions

<form id="contact-form" onsubmit="trackFormSubmission(event)">
    <!-- form fields -->
</form>

<script>
function trackFormSubmission(event) {
    // Form submission logic here
    
    HandL.sendTikTokEvent('Contact', {
        content_name: 'Contact Form',
        content_category: 'Lead Generation'
    });
}
</script>