# Setup 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.<br>

How it works

<figure><img src="https://2196849506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIyFGOYaxAleNUdfWmHtS%2Fuploads%2FOjI96ms49Xaxt25igFS2%2Fimage.png?alt=media&#x26;token=794c0eca-7510-4e4c-94d6-2493fef93732" alt=""><figcaption></figcaption></figure>

### 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](https://booleanmaths.gitbook.io/booleandocs/getting-started/install-pulse-website) 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:

1. **Data Layer**: Collect and prepare business data for tracking and analysis
2. **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            | 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.\ <br>

```html
<!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**

1. Go to **WordPress Admin → Plugins → Add New**
2. Search for "Insert Headers and Footers" or "Code Snippets"
3. Install and activate the plugin
4. Go to plugin settings (usually under **Settings** or **Tools**)
5. Paste your Pulse code in the **header section**
6. Save changes

**Option B: WPCode Plugin (Recommended for Page-Specific Events)**

1. **Install WPCode**: Go to **Plugins → Add New**, search for "WPCode", install and activate
2. **Add new snippet**: Navigate to **WPCode → Add Snippet** and click "Add Your Custom Code (New Snippet)"
3. **Choose code type**: Select the appropriate type (HTML, CSS, JavaScript, PHP)
4. **Target specific pages**: In the "Location" section, select "Page" and choose your target page
5. **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:

1. Create a code snippet with your event tracking logic
2. Add it to your WordPress site's footer section
3. 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>
