What is a Custom Event
Custom events in Triple Whale enable you to track specific user actions on your website, tailored to your business requirements. Unlike standard events, custom events allow for the monitoring of interactions or behaviors unique to your site, providing deeper insights into user engagement and performance.
Prerequisites
Before implementing custom events, ensure that the Triple Pixel tracking code is correctly installed on your website. Without this setup, custom events will not function. Refer to the Triple Whale setup documentation or contact Triple Whale support for installation instructions.
Basic Code Snippet & Parameters
To implement custom events, insert JavaScript code in your website to trigger events when users perform specified actions. Below is a basic example to track a custom event when a user clicks a specific button:
document.getElementById('uniqueButtonId').addEventListener('click', function() { TriplePixel('custom', 'uniqueEventName', { 'property1': 'value1', 'property2': 'value2' }); });
Replace 'uniqueButtonId', 'uniqueEventName', 'property1', 'propert2', 'value1' and 'value2' with your actual button ID, event name, and property keys and values.
Custom JavaScript Implementation
Identify interactions or behaviors on your site that require tracking. Implement JavaScript code to trigger custom events based on these actions.
Querying Custom Events
Retrieve insights from custom event data using SQL queries in Triple Whale. Customize queries based on event names, date ranges, and other relevant parameters to extract meaningful data for analysis.
What's Possible/Not Possible for Reporting
Custom events offer flexibility in tracking specific user actions, allowing for detailed analysis of user behavior. However, it's essential to ensure clear naming conventions and relevance to business objectives to avoid unnecessary data clutter.
Examples
E-commerce Website
Event: Product Zoom
Description: Track when users zoom in on a product image.
Code Example:
document.querySelector('.product-image').addEventListener('mouseover', function() {
TriplePixel('custom', 'product_zoom', {
'product_id': this.getAttribute('data-product-id'),
'user_action': 'zoom'
});
});Event: Wishlist Addition
Description: Capture when a user adds a product to their wishlist.
Code Example:
document.getElementById('add-to-wishlist-button').addEventListener('click', function() {
TriplePixel('custom', 'add_to_wishlist', {
'product_id': this.getAttribute('data-product-id'),
'user_action': 'wishlist_addition'
});
});SaaS Platform
Event: Feature Usage
Description: Monitor the usage of a specific feature within the application.
Code Example:
document.getElementById('featureX').addEventListener('click', function() {
TriplePixel('custom', 'feature_usage', {
'feature_name': 'Feature X',
'user_id': currentUser.id
});
});Event: Subscription Upgrade
Description: Track when users upgrade their subscription plan.
Code Example:
document.getElementById('upgrade-button').addEventListener('click', function() {
TriplePixel('custom', 'subscription_upgrade', {
'user_id': currentUser.id,
'new_plan': 'Pro Plan'
});
});Media Website
Event: Article Share
Description: Capture when a user shares an article on social media.
Code Example:
document.querySelectorAll('.share-button').forEach(button => { button.addEventListener('click', function() { var articleId = this.closest('.article').getAttribute('data-article-id'); TriplePixel('custom', 'article_share', { 'article_id': articleId, 'platform': this.getAttribute('data-platform') }); });});Dynamically Updating Variables of a Custom Event
In situations where variables of a custom event need dynamic updates, such as user choices in a form, JavaScript can be used to capture and send the latest data to Triple Whale for analysis.
document.getElementById('service-form').addEventListener('change', function() {
var selectedService = document.querySelector('input[name="service-options"]:checked').value;
TriplePixel('custom', 'service_selection', {
'service_type': selectedService
});
});