Solved

Uncaught ReferenceError: Klaviyo is not defined

  • 31 May 2023
  • 6 replies
  • 573 views

Badge

Hi Team,

We are receiving the error that “Klaviyo is not defined” while triggering the event and the whole page is frozen in WordPress. It looks like Klaviyo is not initialized/loaded correctly. Is there any method or callback to ensure that Klaviyo is loaded successfully?

icon

Best answer by federico.vitale 1 February 2024, 17:19

View original

6 replies

Userlevel 7
Badge +36

Hi @Citrusbits!

 

I would start by closing the site and clearing your browser cache/history. Then, open a new window and log back into Klaviyo/WordPress.

 

Also, is this a custom integration with your WordPress site, or are you using a pre-built integration with an e-commerce platform/app like WooCommerce? This will help myself and other Community members obtain a better understanding of the issue. 

 

In the meantime, here are some Community threads that might help you get some context:

 

Thanks for using the Community!

- Brian

Badge +1

Hi @Brian Turcotte!

I’m having a similar issue.

I inject the two snippets using two tags in Google Tag Manager:

1) Klaviyo tracking, on all pages:

<script
type="text/javascript"
src="//static.klaviyo.com/onsite/js/klaviyo.js?company_id=MyKey"
></script>

2) Klaviyo tracking logged users, only on the pages where the user is logged:

<script>
  klaviyo.push(['identify', {
    '$email' : "MyEmailVariable"
  }]);
</script>

I’ve made sure that the second tag is fired after the first.

The issue I’m having is that the console returns the error “Uncaught ReferenceError: klaviyo is not defined”.

What am I doing wrong? I also saw that the event tracking snippet I use for a specific page view is working correctly:

<script type="text/javascript">
var _learnq = _learnq || [];
_learnq.push(["track", "Network viewed"]);
</script>

 I see the difference is the presence of _learnq and not of klaviyo, but I also saw on the API reference that the new versions do not use learnq.

Thanks for any help!

P.S.: I’m using GTM because I’m working on with a custom platform and making changes to it involves a long time.

Userlevel 7
Badge +36

Hi @federico.vitale!

My apologies for the delay here. Others that have encountered this issue have resolved it by ensuring that the Klaviyo.js script is present on your site/renders upon page load:

 

It's important to note that the updated documentation's use of klaviyo is specifically referencing the klaviyo object we introduce in our documentation here:

 

To use this klaviyo object, the Klaviyo.js needs to actually render on the webpage you are on; loading it within the console is rarely sufficient.

 

I hope this helps!


- Brian

Hey there @Brian Turcotte!
 

I am encountering a similar issue :/. After reading through the thread and reading through the associated documentation that you sent, I am still at an impasse.

For context, I am loading Klaviyo via GTM (as seen below)

GTM Tag for Loading Klaviyo

This tag is sent to fire once per page on page view.

 

On a specific route on my website, I want to track a custom metric using klaviyo.track([...]). Given that this event (loading the Klaviyo Script) is asynchronous, I have setup the following code block:

if (typeof klaviyo !== "undefined") {
klaviyo.push(["track", "Checkout Started", cartMetaData]);
} else {
setTimeout(() => {
klaviyo.push(["track", "Checkout Started", cartMetaData]);
}, 1500);
}

The problem is that despite this 1.5 second waiting period, I am still getting a ReferenceError.

Outside of increasing the timeout or converting this to a while loop in which I poll Klaviyo for it to become ready, what can I do to fix this issue?

Gratefully,

Kamal

Badge +1

Hi @Brian Turcotte, thanks for your clarification!

Reading the link you sent me I seem to understand that I’m not loading the Klaviyo object, am I getting it right?

If so, I’d conclude that I need to inject the snippet

!function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}();

somewhere in my Tag Manager. Is this correct?

Thank you again for your help

Badge +1

Hi @Brian Turcotte, I might have solved the issue in the way I wrote in my last reply :)

For those who use GTM, the thing I saw is that it is important the order the tags fire (I know it might be obvious), so just to make sure the tag that loads the Klaviyo object fires before any other klavio.js operation.

Reply