Setup custom events
Setup BooleanMaths supported custom events
Overview
Custom event tracking enables you to monitor and analyze user interactions, business metrics, and application behavior by capturing specific events throughout your system. This feature provides the flexibility to track any custom action or milestone that matters to your business.
How it works
Prerequisites
Pulse must be installed on your website using the custom pixel code snippet. If you haven't installed it yet, please check the installation guide first.
Implementation by Platform
Shopify Websites
No additional setup required - Our Shopify plugin automatically manages all required events for Shopify stores.
Non-Shopify Websites
Custom events implementation involves two layers:
Data Layer: Collect and prepare business data for tracking and analysis
Event Endpoint: Send the prepared data to BooleanMaths
Example: Form Tracking Implementation
Let's implement form tracking using the FormFilled event:
form_name*
string
Name of target form
Peter Parker
form_data*
Json
Form details filled by user
{ "email": "example@gmail.com", "name" : "Peter Parker", }
conversion_value
float
Conversion value
10
Note: '*' fields are required to identify user. All other fields are optional
FormFilled event accepts above data values. For data layer we need to write some custom code so that we can connect data with this event.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.form-container {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
transform: translateY(0);
transition: transform 0.3s ease;
}
.form-container:hover {
transform: translateY(-5px);
}
h2 {
text-align: center;
color: #333;
margin-bottom: 30px;
font-size: 2rem;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.form-group {
margin-bottom: 25px;
position: relative;
}
label {
display: block;
margin-bottom: 8px;
color: #555;
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
width: 100%;
padding: 15px 20px;
border: 2px solid #e1e5e9;
border-radius: 12px;
font-size: 16px;
transition: all 0.3s ease;
background: #fff;
outline: none;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
transform: translateY(-2px);
}
textarea {
resize: vertical;
min-height: 100px;
}
.submit-btn {
width: 100%;
padding: 18px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
border-radius: 12px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
overflow: hidden;
}
.submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}
.submit-btn:active {
transform: translateY(-1px);
}
.submit-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.submit-btn:hover::before {
left: 100%;
}
@media (max-width: 600px) {
.form-container {
padding: 30px 20px;
}
h2 {
font-size: 1.5rem;
}
}
</style>
<!-- Booleanmaths pulse snippet -->
<script id="pulse_id" type="application/javascript" src="https://medront.s3.amazonaws.com/fileuploads/pulse.js"
pulseId="bb05a558-8c6e-4660-9de5-dbec52183e94" async></script>
</head>
<body>
<div class="form-container">
<h2>Contact Us</h2>
<form id="contactForm">
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" required>
</div>
<div class="form-group">
<label for="address">Address</label>
<textarea id="address" name="address" placeholder="Enter your full address" required></textarea>
</div>
<div class="form-group">
<label for="zipcode">ZIP Code</label>
<input type="text" id="zipcode" name="zipcode" required>
</div>
<button type="submit" class="submit-btn">Submit Form</button>
</form>
</div>
<!-- Booleanmaths custom event snippet -->
<script>
document.getElementById('contactForm').addEventListener('submit', function (e) {
e.preventDefault();
// Get form data
const formData = {
name: document.getElementById('name').value,
email: document.getElementById('email').value,
phoneNo: document.getElementById('phone').value,
address: document.getElementById('address').value,
zipcode: document.getElementById('zipcode').value
};
// Booleanmaths FormFilled event connection
BooleanMaths.FormFilled({
form_name: 'Contact form', form_data: formData, conversion_value: 10
})
});
</script>
</body>
</html>Important Note: The custom event code snippet in the <script> tags must load after the Pulse snippet. This approach works for all JavaScript-based projects.
WordPress Implementation
For wordpress managed projects you need to add BooleanMaths pulse snippet to all pages, so that we can access it all over the site.
Step 1: Install Pulse Snippet Site-Wide
Add the BooleanMaths Pulse snippet to all pages for site-wide access.
Installation Options:
Option A: Insert Headers and Footers Plugin
Go to WordPress Admin → Plugins → Add New
Search for "Insert Headers and Footers" or "Code Snippets"
Install and activate the plugin
Go to plugin settings (usually under Settings or Tools)
Paste your Pulse code in the header section
Save changes
Option B: WPCode Plugin (Recommended for Page-Specific Events)
Install WPCode: Go to Plugins → Add New, search for "WPCode", install and activate
Add new snippet: Navigate to WPCode → Add Snippet and click "Add Your Custom Code (New Snippet)"
Choose code type: Select the appropriate type (HTML, CSS, JavaScript, PHP)
Target specific pages: In the "Location" section, select "Page" and choose your target page
Insert and save: Paste your code and click "Save Changes"
Step 2: Add Custom Event Code
After installing the Pulse snippet, add your custom event code using the same approach as other JavaScript sites:
Create a code snippet with your event tracking logic
Add it to your WordPress site's footer section
For page-specific events, add the code only to relevant pages using the WPCode plugin's targeting feature
Best Practices
Always ensure the Pulse snippet loads before your custom event code
Test your implementation thoroughly before deploying to production
Use descriptive event names and consistent data structures
Monitor your events in the BooleanMaths dashboard to verify proper tracking
Last updated