Skip to main content
Solved

Started Checkout Javascript Metric not working

  • September 21, 2021
  • 1 reply
  • 268 views

Forum|alt.badge.img+2
  • Contributor II
  • 3 replies

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>

 

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

View original
Did this topic or the replies in the thread help you find an answer to your question?

1 reply

nate-klaviyo
Klaviyo Employee
Forum|alt.badge.img+3
  • Klaviyo Employee
  • 8 replies
  • Answer
  • September 21, 2021

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