Modifying alt tag of Builder.io tracking pixel

Technical Questions
1

I am using Next.js 14.0.4 and following the instructions at: builder/packages/utils at main · BuilderIO/builder · GitHub

and at

My code looks like:

  const builderModelName = 'page';
    
  const content = await builder
    .get(builderModelName, {
      userAttributes: {
        // Use the page path specified in the URL to fetch the content
        urlPath: '/' + (props?.params?.page?.join('/') || ''),
      },
      cachebust: true,
      cacheSeconds: 10,  
      options: { includeRefs: true },
    })
    .toPromise() || null;

  setPixelProperties(content, { alt: 'Builder.io pixel tag' })

The alt tag still shows up as an empty string (“”). ie. there is indeed an alt tag present but I am unable to modify its value. Anything changed with the API?

2

Hi @naren,

We attempted to reproduce the issue using the dependencies listed below, but everything seems to be working fine on our end.

  "dependencies": {
    "@builder.io/dev-tools": "^1.2.0",
    "@builder.io/react": "^7.0.1",
    "@builder.io/sdk": "^5.0.0",
    "@builder.io/utils": "^1.1.23",
    "@builder.io/widgets": "^2.0.3",
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18"
  },

Here is the complete code that we tested

import React from "react";
import { useRouter } from "next/router";
import { BuilderComponent, builder, useIsPreviewing } from "@builder.io/react";
import { setPixelProperties } from "@builder.io/utils";

import DefaultErrorPage from "next/error";
import Head from "next/head";
import { BuilderContent } from "@builder.io/sdk";
import "../builder-registry";

builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);

export async function getServerSideProps({ params }) {
  const mode = "page"; // Define your model name here
  const page =
    (await builder
      .get(mode, {
        userAttributes: {
          urlPath: "/" + ((params?.page as string[])?.join("/") || ""),
        },
      }) // Define your query parameters properly
      .toPromise()) || null;

  setPixelProperties(page, { alt: "pixel tag from builder" });

  return {
    props: {
      page,
    },
  };
}

// Define the Page component
export default function Page({ page }: { page: BuilderContent | null }) {
  const router = useRouter();
  const isPreviewing = useIsPreviewing();

  // If the page content is not available
  // and not in preview mode, show a 404 error page
  if (!page && !isPreviewing) {
    return <DefaultErrorPage statusCode={404} />;
  }

  // If the page content is available, render
  // the BuilderComponent with the page content
  return (
    <>
      <Head>
        <title>{page?.data?.title}</title>
      </Head>
      {/* Render the Builder page */}
      <BuilderComponent
        model="page"
        content={page || undefined}
      />
    </>
  );
}

Screenshot 2025-01-03 at 10.02.29 PM
Screenshot 2025-01-03 at 10.02.29 PM1920×955 184 KB

We hope this helps! If you are still experiencing any issues, please help us by sharing reproducible steps, and we will be happy to assist you further.

Thanks,

3

Thank you very much @manish-sharma. Updating the libraries worked.

Thanks a lot!