How to add heat map to non Builder component page?

Technical Questions
, ,
1

Builder content link
Children pages of the following:

Builder public api key
1d8ecee591ac4358befb8fe998100548

What are you trying to accomplish
Hello there,

Our career page is built with the Builder custom components, but not its children.
I like to find out whether there is way we can enable Builders’ analytic and heat map in its children page, such as, the individual job post, or job index pages.

Screenshots or video link
Looking to enable Builder heat map and analytics on non Builder components page.

Code stack you are integrating Builder with
e.g. NextJS, react, Shopify

2

Hello @tlee-pb,

To could possibly enable Builder’s analytics and heatmap functionalities on the child components of your custom components (such as individual job posts or job index pages), you need to handle a couple of integration steps:

  1. Register Your Custom Components with Children:
    Ensure your custom components are registered to accept children. This involves setting the canHaveChildren property to true during component registration. This configuration allows the Builder Visual Editor to place other blocks inside your custom component, enabling detailed tracking.

    Example for React:

    import { Builder, withChildren } from '@builder.io/react';

const JobPost = (props) => (
  <div>{props.children}</div>
);

const JobPostWithChildren = withChildren(JobPost);

Builder.registerComponent(JobPostWithChildren, {
  name: 'JobPost',
  canHaveChildren: true,
  // You can specify default children here if needed
});

  2. Enable Insights and Heatmap:
    Once the components are properly registered and used within the pages or sections, the Insights tab in the Builder Visual Editor will provide detailed metrics, including engagement and conversions. The heatmap functionality will overlay visual indicators of user interaction on these child components.

    To use the Insights and Heatmap:

    • Go to Content.
    • Open the relevant content entry.
    • Click on the Insights tab to view detailed metrics, or click the Heatmap icon in the Visual Editor to inspect engagement visually.

  3. Custom Event Tracking:
    For more granular analytics, you can track custom events such as clicks or custom actions within your child components using the builder.track method.

    Example:

    import { builder } from '@builder.io/sdk';

const handleClick = (event) => {
  builder.track('jobPostClick'); // Custom event tracking
  // rest of your event handling logic
};

return <div onClick={handleClick}>Job Post</div>;

Hope this helps!

Thanks,