Started Checkout Javascript Metric not working

Forum|Forum|4 years ago
September 21, 2021
1 reply
343 views

Hi there,since our WooCommerce checkout is custom built, I am trying to implement the “Started Checkout” metric with an onClick of a button.

The onClick is definitely fired (according to the console.log) and the data is not empty (according to the alert), but somehow the customers profile is not appearing in the Klaviyo dashboard.

What is wrong with my code?

<script>

jQuery("#ceesbutton").click(function($)

{

    var email = jQuery('input[name="billing_email"]').val();    

    var first_name = jQuery('input[name="billing_first_name"]').val();

    var last_name = jQuery('input[name="billing_last_name"]').val();    



        <?php

            $cart = WC()->cart;

            $event_data = wck_build_cart_data( $cart );

            if ( empty($event_data['$extra']['Items']) ) { return; }

            $event_data['$service'] = 'woocommerce';

            unset($event_data['Tags']);

            unset($event_data['Quantity']);

            

            $taal = strtoupper(ICL_LANGUAGE_CODE);

        ?>

        var eventdata = '<?php echo json_encode($event_data); ?>';

        var taal = '<?php echo $taal; ?>'; 

        

        const data = {

        'token':'xxxxxx',

        'event': 'Started Checkout',

        'customer_properties':

            {

                '$email': email,

                '$first_name': first_name,

                '$last_name': last_name,

                'language': taal

            },

        'properties': 

            {

            eventdata

            }

        };

        console.log('is this button clicked by '+email);

        jQuery.get('https://a.klaviyo.com/api/identify?data=' + btoa(JSON.stringify(data)));    

});

</script>

This topic has been closed for replies.

Best answer by nate-klaviyo

Hey there!

I think you can solve this by updating this part of your code:

'properties': 
{
    eventdata
}

To this:

'properties': eventdata

Since you’ve already loaded the event JSON in eventdata, these extra braces are redundant - the payload probably looks something like this in a live test:

'properties': 
{
    {"id": 12345, "line_items": ..etc}
}

To debug further, you can open up the browser’s network tab when you test and find the http request being sent. You can then see what the API is sending back as well as directly inspect the base64 string you are sending as the payload.

Hope this helps!

Cheers,

Nate

nate-klaviyoAnswer

Klaviyo Employee