> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.app-hive.dev/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to track events in Klaviyo?

If you’re using Quotify and want deeper insight into how customers interact with your quote widget, you can send those interactions directly to Klaviyo as custom events. This allows you to build better segments, trigger flows, and understand user behavior at a granular level.

This guide explains how it works and what the script is doing behind the scenes.

## Why This Matters
By forwarding Quotify events to Klaviyo, you can:
* Trigger automated emails when a quote is submitted
* Segment users based on products they interact with
* Track engagement inside the quote flow (opens, step changes, etc.)
* Build more personalized marketing campaigns

## How It Works (High-Level)
There are two key pieces:
1. **Loading Klaviyo dynamically**
Since you may not be able to add a `<script>` tag directly, we inject Klaviyo using JavaScript.
2. **Listening to Quotify events and forwarding them**
Quotify emits browser events (like `quotify:product-added`). We listen for those and send them to Klaviyo using `klaviyo.track()`.

## Before You Go Live
Make sure to:
* Replace `PUBLIC_API_KEY` with your actual Klaviyo public API key
* Add this script to Quotify > Settings > Customization > Javascript
* Test events using your browser console
* Verify events appear in Klaviyo under **Metrics**

```
(function () {
    const KLAVIYO_SRC = "https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js";

    function loadKlaviyo(callback) {
        if (window.klaviyo) {
            callback();
            return;
        }

        const script = document.createElement("script");
        script.type = "text/javascript";
        script.async = true;
        script.src = KLAVIYO_SRC;

        script.onload = callback;

        document.head.appendChild(script);
    }

    function track(eventName, payload = {}) {
        if (window.klaviyo && typeof window.klaviyo.track === "function") {
            window.klaviyo.track(eventName, payload);
        }
    }

    loadKlaviyo(() => {
        // Widget lifecycle
        window.addEventListener("quotify:opened", () => {
            track("Quotify Opened");
        });

        window.addEventListener("quotify:closed", () => {
            track("Quotify Closed");
        });

        // Submission
        window.addEventListener("quotify:submitted", (event) => {
            track("Quote Submitted", event.detail || {});
        });

        // Navigation
        window.addEventListener("quotify:page-changed", (event) => {
            track("Step Changed", event.detail || {});
        });

        // Product events
        window.addEventListener("quotify:product-added", (event) => {
            track("Product Added", event.detail || {});
        });

        window.addEventListener("quotify:product-deleted", (event) => {
            track("Product Removed", event.detail || {});
        });

        window.addEventListener("quotify:product-updated", (event) => {
            track("Product Updated", event.detail || {});
        });
    });
})();
```