Solved

Started Checkout Javascript Metric not working

  • 21 September 2021
  • 1 reply
  • 252 views

Badge +2

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>

 

icon

Best answer by nate-klaviyo 21 September 2021, 16:18

View original

1 reply

Badge +3

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

Reply