When developing a Pixel app, you must define a way to identify whether or not a VTEX account has the necessary permissions to communicate with the third-party solution in question. Otherwise, sharing data between the store and the solution won't be possible.
This verification is generally performed via a user identification issued by the third-party solution. The user identification is an individual and untransferable value that identifies if you have the required permissions to use that solution. Think of the Google Tag Manager Pixel app: in order to use it, you must provide a user identification previously issued.
In the following step by step, you'll learn how to make your Pixel app read the user identification and determine whether or not a user is allowed.
Step by step
- Open the
manifest.json
file. - Change the
vendor
field value (vtex
) to the name of the VTEX account in which you are working. - Change the
name
andtitle
field values with the name you wish to give your app. Please refer to our app-naming guidelines. - Declare the
settingsSchema
field. This field will be used to receive the user identification information. - Inside the
settingsSchema
object, declare a JSON Schema containing the following fields:
title
- Pixel app name.type
- JSON Schema type (this must always be filled in asobject
).description
(Optional) - Description of thesettingsSchema
field.properties
- Set of keys that defines the user identification. Possible keys forproperties
are:title
(user identification title),description
(user identification description), andtype
(property type to define how users should input their identifications). Notice that these keys will be displayed to the app's users.
"settingsSchema": {
"title": "YOUR APP NAME",
"type": "object",
"properties": {
"gtmId": {
"title": "SAMPLE FIELD",
"description": "Enter the ID (GTM-XXXX) from your Google Tag Manager",
"type": "string"
}
}
},
If needed, you can also use the properties
object to read the user preferences. Check the following example:
"settingsSchema": {
"title": "YOUR APP NAME",
"type": "object",
"properties": {
"gtmId": {
"title": "SAMPLE FIELD",
"description": "Enter the ID (GTM-XXXX) from your Google Tag Manager",
"type": "string"
},
"allowCustomHtmlTags": {
"title": "Allow Custom HTML tags",
"description": "Beware that using Custom HTML tags can drastically impact the store's performance",
"type": "boolean"
}
}
},
Please refer to the JSON Schema documentation while building your app's
settingSchema
field.