Adding Insights Tracking for your Data Models with React

Technical Questions CMS
1

You may have seen documentation around for live-previewing or adding A/B testing structured data models. But did you know also adds all of Builders out of the box insights tracking to data models automatically?

Thats right! If you want to track clicks, impressions, or add conversion tracking to a model of structured data, just wrap the element where you use the data in <BuilderContent /> and Builder will do the rest!

So take this blog article below that takes article data from Builder and puts your data values into an HTML template (adapted from this blog post)

function BlogArticle() {
const article = await builder
    .get("blog-article", {
      // Include references, like our `author` ref
      options: { includeRefs: true },
      query: {
        // Get the specific article by handle
        "data.handle": someHandle,
      },
    })
    .promise() || null;
   ...

  return (
    <BuilderContent
      content={article}
      options={{ includeRefs: true }}
      model="blog-article"
    >
      {(data, loading, fullContent) => (
          <>
            <div>{data?.title}</div>
            <img src={data?.heroImageSrc} alt={data?.heroImageAlt} />
            <div>{data?.body}</div>
          </>
      )}
    </BuilderContent>
  );
}

Now, even though you aren’t using the Builder WYSIWYG drag and drop editor, you will still get click and impression data. You can even add conversion tracking with a bit of code, and that will show in your page’s insights as well!

NB: You wont get the heatmap functionality, because Builder doesn’t have knowledge of where clicks are happening on your page, like we would for a page or section model built within our visual editor. But you still will get plenty of valuable data!

Try it out and let us know if this works for you!