What am I missing? Klaviyo object and Next Js

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?

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.

Hi @telestrial!

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

Best,

Brian

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

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