Calculation rules for Visual Views, and how can I find them？

General
,
1

Screenshot 2024-11-22 at 13.35.26
Screenshot 2024-11-22 at 13.35.262308×716 43.7 KB

Since the 20th, there has been a sudden surge in Visual Views (VV), and although I can see which page is affected, there are no API calls on that page, and only a few images are used. I want to understand what factors might be affecting VV. Using 1M VV as an example:

  1. Content API: Does each call count as one VV?
  2. Image API: Does using images uploaded via Builder count as one VV, regardless of image size? If image optimization is used on resources uploaded via Builder, does it count as two VVs?
  3. Track: Does the built-in tracking of Builder also count as one VV?
  4. What other factors might influence VV, and could you explain their calculation rules? The documentation is not detailed enough.
2 
import { ImageProps } from 'next/image'
import { Image } from '@builder.io/sdk-react'
import { useMemo } from 'react'
import { parseUrl, stringify } from 'query-string'
import { omitEmptyValues } from '@/utils/index'

export default function BuilderImage(props: ImageProps & Iprops) {
  const { src, quality = 85, format = 'webp', imgWidth, imgHeight, fit, position, alt, ...rest } = props

  const imgUrl = useMemo(() => {
    if (typeof src === 'string' && src?.includes('cdn.builder.io')) {
      const { url } = parseUrl(src)
      const params = { quality, height: imgHeight, width: imgWidth, format, fit, position }
      const queryString = stringify(omitEmptyValues(params))
      return `${url}${queryString ? `?${queryString}` : ''}`
    }
    return src
  }, [src, quality, imgHeight, imgWidth, format, fit, position])


  return <Image {...rest} className="w-100" altText={alt || 'builder-image'} image={imgUrl} />
}

If I use the image component from Builder, will it cause an increase in Visual Views? If I use the image component from Next.js, will it not cause this issue?

3

image
image2236×710 133 KB

Does each call to the pixel API in the diagram increase the visual view (VV) count by 1?

4

Hello @radis,

Visual Views are tracked when you use a Page or Section model with Builder’s Visual CMS and integrate with Builder’s SDKs, the HTML API, or Qwik API.

Visual Views are recorded when a tiny (1x1) hidden image, called a tracking pixel, is rendered upon someone visiting your site or app.

If a single Page contains multiple content entries from Builder — such as two symbols — Builder ensures that these pixels are only counted once to avoid double counting by using a cache period in which the pixel request is cached in the user’s browser.

In this way, multiple pixel requests on the same Page from different Builder content entries only result in one tracking pixel request.

Technically, this method can result in undercounting Visual Views if a site visitor is navigating pages very quickly, but in most cases, this technique yields an accurate representation of Visual Views.

6

Screenshot 2024-11-28 at 18.49.10
Screenshot 2024-11-28 at 18.49.101210×200 30.8 KB

import { Image } from '@builder.io/sdk-react'

Because I used the builder’s image in the project, I kept getting hydration error warnings. I found out that in the code, when the Tag is set to img , using fetchPriority causes the warning, so it should be changed to fetchpriority .

7

Hello @radis,

Could you please confirm the SDK version you are using? Also, if you are using Next.js, can you specify whether it is version 13 or 14?

9

“@builder.io/sdk-react”: “3.0.0”
“next”: “14.2.12”,