Hi @prasad, while these types are still in beta and not officially documented yet, here is what I’ve found testing them out myself. The custom attribute types provide a more friendly user interface to input your targeting values in the Visual Editor as you have shared in your screenshot above.
The “code” and “tag” types currently work well for targeting while the other DOM and Block types still require more testing. Once set in Builder “code” and “tag” values can be targeted off of in React just like you would for string type targeting since ultimately code values are stored as a string (or array of strings for tags) in our database. You can inspect how that string is formatted/encoded with one of our APIs so you can set it correctly in your React app.
For example, let’s say I add a targeting attribute called “codeTarget” to a page:
When I inspect that page JSON returned from the Content API (e.g. https://cdn.builder.io/api/v2/content/YOUR_MODEL_NAME?apiKey=YOUR_API_KEY) I see that the attribute was set like this:
"property":"codeTarget","value":"console.log(\"Hello World!\");"
So then when I want to set this user attribute in my React app I would just use that formatted value to target that page.
builder.setUserAttributes({
codeTarget: 'console.log(\"Hello World!\");',
tagTarget: 'react'
})
With that said, we strongly recommend using the more common “string” and “boolean” types while the other types are still in beta. You can read more about custom targeting here: