Skip to main content
Solved

What am I missing? Klaviyo object and Next Js


telestrial
Problem Solver I
Forum|alt.badge.img+2

Hello hello,

I’m a dev currently working on a custom integration from a next js webstore to klaviyo. I’m using ‘next/script’, like so:

    <Script
      id="klaviyo"
      type="text/javascript"
      src={`//static.klaviyo.com/onsite/js/klaviyo.js?company_id=${process.env.NEXT_PUBLIC_KLAVIYO_API_KEY}`}
      async
    />

This seems to work. I see the various klaviyo tracking scripts. However, when I try to access the klaviyo object, I’m getting a weird result:

 

Three major questions:

  1. Why does this say Proxy(Object)? 
  2. In my research about proxy objects, I would think klaviyo.identify() would then be a function. Why isn’t it?
  3. Any advice on how to proceed here?

Best answer by telestrial

Nope. No update. We just ended up using the <script> tag. Works fine. I think we end up incurring a bit of first-load cost as opposed to Next/Script, but yeah. Never did figure out a way to get this to work. One tip I will throw out: dev server can often have trouble communicating with Klaviyo because of cors errors. Dev server for react/next being http in all but the most up-to-date versions trying to communicate with an https server on the Klaviyo side. So...deploy somewhere secure, if you can, like a staging site, to check/test connections.

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

6 replies

KeviSunshine
Expert Problem Solver III
Forum|alt.badge.img+8
  • Expert Problem Solver III
  • 159 replies
  • October 6, 2023

I don’t know the answer, but as someone who works with NextJS and Klaviyo, I am very curious!

 

What does `typeof klaviyo.identify` log?


telestrial
Problem Solver I
Forum|alt.badge.img+2
  • Author
  • Problem Solver I
  • 3 replies
  • October 6, 2023

Update: Using a traditional <script> tag actually gives me the same proxy object, but the klaviyo methods are there to use. I’m not sure what Next is doing beyond the scenes or if there is a synchronicity issue, but some progress here just moving to the normal <script> tag.


Brian Turcotte
Forum|alt.badge.img+37

Hi @telestrial!

I’m going to check on this with Engineering and I’ll update the thread ASAP!

Best,

Brian


Forum|alt.badge.img
  • Contributor I
  • 2 replies
  • January 21, 2024

Any updates here? Getting the same issue on Next 14 using both native <script> and next/script. My code block looks like the following:

 

<Script
        id="klaviyo-viewed-product"
        type="text/javascript"
        dangerouslySetInnerHTML={{
          __html: `
          !(async function () {
            if (klaviyo) {
              try {
                await klaviyo.identify({});
                var item = {
                  Name: '${product?.name}',
                  ProductID: '${product?.productId}',
                  ImageURL: '${product?.images?.[0]?.url}',
                  URL: 'https://${process.env.WEBSITE_URL}/product/${handle}',
                  Brand: 'EarthOne'
                };
                klaviyo.push(['track', 'viewed_product', item]);
                klaviyo.push(['trackViewedItem', {
                  Title: item.Name,
                  ItemId: item.ProductID,
                  ImageUrl: item.ImageURL,
                  Url: item.URL,
                  Metadata: {
                    Brand: item.Brand
                  }
                }]);
              } catch (e) { console.log('Klaviyo Error', e); }
            }
          })();
          `
        }}
      />

 


Forum|alt.badge.img
  • Contributor I
  • 2 replies
  • January 21, 2024

Any updates here? Getting this using both native script tags and next/script. Using Next v14.1


telestrial
Problem Solver I
Forum|alt.badge.img+2
  • Author
  • Problem Solver I
  • 3 replies
  • Answer
  • January 22, 2024

Nope. No update. We just ended up using the <script> tag. Works fine. I think we end up incurring a bit of first-load cost as opposed to Next/Script, but yeah. Never did figure out a way to get this to work. One tip I will throw out: dev server can often have trouble communicating with Klaviyo because of cors errors. Dev server for react/next being http in all but the most up-to-date versions trying to communicate with an https server on the Klaviyo side. So...deploy somewhere secure, if you can, like a staging site, to check/test connections.