Skip to main content
Solved

New Klaviyo API: Fire Custom Javascript Event

  • November 7, 2024
  • 4 replies
  • 92 views

multimerce
Partner - Gold

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?

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

View original

4 replies

ArpitBanjara
Principal User I
Forum|alt.badge.img+36
  • Principal User I
  • 371 replies
  • Answer
  • November 8, 2024

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


multimerce
Partner - Gold
  • Author
  • Partner - Gold
  • 4 replies
  • November 10, 2024

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.

 


ArpitBanjara
Principal User I
Forum|alt.badge.img+36
  • Principal User I
  • 371 replies
  • November 10, 2024

hey @Taylor Tarpley @kaila.lawrence 

Can you check in about this with someone on your team?


michaela.fooksa
Klaviyo Employee
Forum|alt.badge.img+6

Hi Arpit,

Custom event tracking is definitely still possible! Check out our guide here: Custom metric tracking with JavaScript. 

Thank you, and let me know if you have any questions!

Michaela