Skip to main content
Solved

New Klaviyo API: Fire Custom Javascript Event

  • November 7, 2024
  • 4 replies
  • 85 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
Did this topic or the replies in the thread help you find an answer to your question?

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