New Klaviyo API: Fire Custom Javascript Event

Forum|Forum|1 year ago
November 7, 2024
4 replies
582 views

Hi there.

I’m struggling to fire a custom event in Klaviyo via JavaScript on my website, even though the Klaviyo tracking script is loaded correctly.

Here’s the code I’m using:

<script async src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=MY_PUBLIC_API_KEY"></script>

<script>
  var klaviyo = window.klaviyo || [];
  klaviyo.push(['track', 'Custom Event', {
    // event data
  }]);
</script>

The event isn’t showing up in Klaviyo. Any tips?

This topic has been closed for replies.

Best answer by ArpitBanjara

Hey @multimerce

I am not 100% sure about this, but Sometimes, the Klaviyo tracking script might take a moment to load, so firing the custom event right after the script loads may cause issues. A common fix is to wrap the event trigger in a setTimeout or wait until the Klaviyo object is fully initialized.

<script async src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=MY_PUBLIC_API_KEY"></script>

<script>
  window.onload = function() {
    setTimeout(function() {
      var klaviyo = window._learnq || [];
      klaviyo.push(['track', 'Custom Event', {
        // event data goes here
      }]);
    }, 500); // Adjust delay if needed
  };
</script>

although this is obvious - Replace MY_PUBLIC_API_KEY with your actual public API key.

also Make sure the event data is an object. If you’re including additional properties in the event, structure them like this:

{
  'Property1': 'Value1',
  'Property2': 'Value2',
  // additional properties
}

I hope this helps and thank you for sharing your question here in the community.

Cheers

Arpit

ArpitBanjaraAnswer

Principal User II

Hey @multimerce

I am not 100% sure about this, but Sometimes, the Klaviyo tracking script might take a moment to load, so firing the custom event right after the script loads may cause issues. A common fix is to wrap the event trigger in a setTimeout or wait until the Klaviyo object is fully initialized.

<script async src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=MY_PUBLIC_API_KEY"></script>

<script>
  window.onload = function() {
    setTimeout(function() {
      var klaviyo = window._learnq || [];
      klaviyo.push(['track', 'Custom Event', {
        // event data goes here
      }]);
    }, 500); // Adjust delay if needed
  };
</script>

although this is obvious - Replace MY_PUBLIC_API_KEY with your actual public API key.

also Make sure the event data is an object. If you’re including additional properties in the event, structure them like this:

{
  'Property1': 'Value1',
  'Property2': 'Value2',
  // additional properties
}

I hope this helps and thank you for sharing your question here in the community.

Cheers

Arpit

Arpit Banjara - Lead Email Marketing Specialist at Flowium

multimerceAuthor

Partner - Gold

Thank you @ArpitBanjara ,

I’ll try your solution but my concern was if the custom event tracking in Klaviyo is still possible of if it’s part of the old, discontinued API. I can’t see anything related to custom event tracking in the new one.