How to setup Klaviyo

The Dominate Checkout Hosted solution allows you to integrate Klaviyo within your checkout page by placing the following script inside the Default Settings or Store > Custom Code section at your Dominate Account.

The following script will allow you to identify a visitor using the purchasing email and will trigger the Start Checkout and Order Items events, it will also track the abandonment cart process and integrates seamlessly with the existing Magento 2 Klaviyo extension.

To include the Klaviyo Integration, please follow these steps:

  1. Login to your Dominate Checkout account.
  2. Click on the Default Settings tab or access your preferred Store Settings.
  3. Go to Custom Code -> Head Code.
  4. Paste the following code, replace YOUR_COMPANY_ID with your Klaviyo Account ID, and click the Save button.
<script type="application/javascript" async src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=YOUR_COMPANY_ID"></script>

<script>
    // Klaviyo Integration
    $(window).on("load", function() {
        if(window._learnq && window._learnq.identify) {
            if(window._learnq.isIdentified()) {
                initKlaviyoStartedCheckoutEvent();
            } else if(window.checkoutData.customer.email) {
                identifyKlaviyoUser(window.checkoutData.customer.email);
            } else {
                $(document.body).on('input', '#email', delay(function () {
                    if(!window._learnq.isIdentified() && $(this).valid()) {
                        identifyKlaviyoUser($(this).val());
                    }
                }, 2000));
            }
        }
    })

    function identifyKlaviyoUser(email) {
        window._learnq.push(['identify', {
            '$email': email
        }]);

        console.log("Klaviyo User Identified - " + email);

        // First _learnq.push request needs to be finished, before sending the next one.
        // No way to figure out when it is finished, that's why 2sec timeout was added
        setTimeout(initKlaviyoStartedCheckoutEvent, 2000);
    }

    function initKlaviyoStartedCheckoutEvent() {
        let cart = window.checkoutData.cart,
            cartItemsNames = [],
            cartItemsData = [],
            eventData = {
                "$event_id": "started_checkout_" + $.now(),
                "$value": cart.grandTotal,
                "CheckoutURL": document.referrer + 'checkout_page',
            };

        $.each(cart.items, function (key, data) {
            let item = data.cartItem;

            cartItemsNames.push(item.name);
            cartItemsData.push({
                "SKU": item.sku,
                "ProductName": item.name,
                "Quantity": item.qty,
                "ItemPrice": item.price,
                "RowTotal": parseFloat(item.qty * item.price).toFixed(2),
                "ImageURL": item.image,
            })
        });

        eventData.ItemNames = cartItemsNames;
        eventData.Items = cartItemsData;

        window._learnq.push(["track", "Started Checkout", eventData]);

        console.log("Klaviyo 'Started Checkout' Event was triggered");
    }

    function delay(fn, ms) {
        let timer = 0;
        return function(...args) {
            clearTimeout(timer)
            timer = setTimeout(fn.bind(this, ...args), ms || 0)
        }
    }
</script>