Our current BuilderComponent’s contentLoaded is not firing the event to our CDP (Segment): Passing data from Builder to a CDP - Builder.io
<BuilderComponent
model={modelType}
content={content}
contentLoaded={(data, content) => {
window.analytics &&
window.analytics.track("builderImpression", {
contentId: content?.id,
contentName: content?.name,
testVariationId: content?.testVariationId,
testVariationName: content?.testVariationName,
})
}}
/>
What could be the issue?
I tried adding logs within the contentLoaded, but nothing was logged either.
Please assist, thank you.
Hello @mattjang95,
I wanted to share a tested example that has worked successfully in the past. Could you please try the approach below and let us know how it works for you?
export default function Page({ page }: { page: BuilderContent | null }) {
const router = useRouter();
const isPreviewing = useIsPreviewing();
// Show a 404 error page if the page content is unavailable
// and not in preview mode
if (!page && !isPreviewing) {
return <DefaultErrorPage statusCode={404} />;
}
// Render the BuilderComponent with the page content if available
return (
<>
<Head>
<title>{page?.data?.title}</title>
</Head>
<BuilderComponent
model="page"
key={router.asPath}
contentLoaded={(data, content) => {
const { variationId, testVariationId, testVariationName } =
getContentWithInfo(content);
console.log({ variationId, testVariationId, testVariationName });
}}
content={page || undefined}
/>
</>
);
}
export const getContentWithInfo = (content?: Content) => {
if (content) {
console.log(content);
const cookieValue = builder.getCookie(`builder.tests.${content.id}`);
const cookieVariation =
cookieValue === content.id ? content : content.variations?.[cookieValue];
const variationName =
cookieVariation?.name || (cookieVariation?.id === content.id ? "Default Variation" : "");
return {
variationId: cookieValue,
testVariationId: cookieValue,
testVariationName: variationName,
};
}
return null;
}
Thanks,
Hi Manish,
Thanks for your reply.
Unfortunately, it is not successful still. The logs you added there are not logging in the console either (nothing is being logged inside contentLoaded callback)
Do I need to turn on something from the Builder side? We have an active A/B test running with 2 variations for one page, which we are using to test this code.
Hello @mattjang95,
No, you don’t need to run anything on the builder side. Once the code is integrated, you can simply view the builder page with A/B test variation, and that should console.log the variation id.
Thanks Manish. I have the same code as you, but nothing is logging on our Console. Could you please advise.
Hello @mattjang95,
Can you test this on your local machine? Is it possible that console.log is disabled in the production environment?
Hello Manish,
We have console logs enabled in Production:
We do not have a local environment setup for the current A/B test we are testing unfortunately…
Our Segment (CDP) is not receiving the builderImpression event:
Hello @mattjang95,
Could you please confirm your tech stack and the builder SDK you are using? I’ll see if I can reproduce the issue using the same.
Hi Manish,
We are using React, Shopify, Builder Gen 1 SDK.
Thanks,
Matt
Hi Manish,
Please let me know if you need access to our Builder/Shopify space.
Thank you,
Matt
Hi Manish,
Were you able to reproduce the issue?
We need immediate tracking on our active A/B test pages.
Thanks for your help,
Matt
Hello @mattjang95,
Yes, I am able to reproduce the issue when using React only. We are currently discussing the problem internally and will provide you with an update soon.
Thanks,
Thanks Manish, please let me know if you find a new solution for us
Hi Manish,
Is it possible for on your side to send the A/B Test’s variation ID via the page_viewed event in Checkout Extensibility?
https://shopify.dev/docs/api/web-pixels-api/standard-events/page_viewed
Hello mattjang95,
After investigating the issue, we found that the builder.getCookies function is not working with standalone React applications. This function is typically used in server-side environments or in contexts where cookies can be accessed from the HTTP request, which is available in Next.js due to its server-side capabilities.
In Next.js, you have the option of both client-side and server-side rendering. During server-side rendering or when using API routes, you can access HTTP request headers, including cookies. However, in a client-only React application, you only have access to the browser’s document cookies, which may not be set unless handled explicitly in your application.
To manage cookies in a standalone React app, you can use the traditional document.cookie method or consider using third-party libraries like js-cookie for improved functionality.
// Using js-cookie for cookie handling
import Cookies from 'js-cookie';
const getContentWithInfo = (content) => {
if (content) {
console.log(content);
// Retrieve the cookie value directly from the browser using js-cookie
const cookieValue = Cookies.get(`builder.tests.${content.id}`);
const cookieVariation =
cookieValue === content.id ? content : content.variations?.[cookieValue];
const variationName =
cookieVariation?.name || (cookieVariation?.id === content.id ? "Default Variation" : "");
return {
variationId: cookieValue,
testVariationId: cookieValue,
testVariationName: variationName,
};
}
return null;
};
<BuilderComponent
model="page"
content={content}
contentLoaded={(data, content) => {
const { variationId, testVariationId, testVariationName } =
getContentWithInfo(content);
console.log({ variationId, testVariationId, testVariationName });
}}
/>
Please give it a try and feel free to let us know if you need any further assistance.
Thanks,
Hi Manish,
Thanks for the new solution.
Before I try out the new solution you gave me, we noticed that our builderImpression event has been triggered in our CDP (Segment) since 2 days ago:
Do you know if this was triggered by you on your side?
If not, then somehow it is working all of a sudden, and we are not sure how.
Thanks,
Matt
Hello @mattjang95,
It appears that the issue is related to the builder integration. While I’m not certain if our product team has made any changes in the past few days, I will investigate further. For now, I wouldn’t recommend using the workaround.
Additionally, have you made any recent changes to your codebase, such as upgrading the SDK or implementing changes to server-side rendering (SSR)?
Hi Manish,
No, we have not made any changes on our side since.
Thanks Manish,
Matt
Thanks, Matt, for confirming. We haven’t made any recent changes to the contentLoaded function, so we’re unsure why it’s suddenly working for you. Rest assured, if we have any insights, we will share them with you.
Best regards.
