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
