What am I missing? Klaviyo object and Next Js

Forum|Forum|2 years ago
October 6, 2023
6 replies
1694 views

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:

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

This topic has been closed for replies.

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.

KeviSunshine

Expert Problem Solver III

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?

telestrialAuthor

Problem Solver I

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

Klaviyo Alum

Hi @telestrial!

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

Best,

Brian

A

Ankur

Contributor I

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); }
            }
          })();
          `
        }}
      />

A

Ankur

Contributor I

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

telestrialAuthorAnswer

Problem Solver I

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.

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials