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:

Parameter

Type

Description

Example

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

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

https://www.loom.com/share/806f9bea9abc4377bf0835815daa3296?sid=1c4233c4-1df1-4d37-9f7a-2ca6883aeb04

PreviousInstall Pulse on your Shopify Store NextConnecting Ad Accounts

Last updated 5 months ago