Working with Variables in Variations

Created: 28.11.2023 Updated: 28.11.2023 Author: Alexander Sugakov

Any HTML, CSS, or JS code element can be assigned a variable in the Gravity Field platform. Variables play a crucial role in streamlining campaign customization, allowing business users to adjust campaigns without relying on developers. This functionality empowers users to replace text, images, colors, and other design elements directly within the platform's interface. The use of variables facilitates the rapid templating of campaign variations, providing a more dynamic and user-friendly customization experience. For more details about templates, refer to the article Working with Templates

Creating Variables

To create a variable, you need to select the desired element, right-click on it, and choose "Add Variable" from the context menu.

In a panel opened on the right, you need to provide a name for the variable, configure its type, and set the parameters. The parameters of variables depend on the selected type.

Variable Types

For all variable types, you can configure the variable's name, type, and a tooltip that will be displayed in the popover when hovering over the variable.

In the Gravity Field platform, the following variable types and additional parameters are available (in addition to the basic ones):

Variable Type	Available Parameters	Campaign Type
Text	Default Value	Front / API
Image	Default Value	Front / API
Dropdown List	Values for the list in the format key-value	Front / API
Color Palette	—	Front / API
Number	Default Value, Maximum and Minimum value constraints	Front / API
Recommendation Strategy	Default Value	Front
CSS Selector	Default Value	Front
Social Proof Data (Product Performance)	Default Value	Front

Working with Variables

When you hover the mouse cursor over a variable, icons on the right side of the field allow you to delete or reconfigure the variable, and a tooltip appears above the variable's value.

Text — a variable that allows you to enter arbitrary text.

Image — a variable that allows you to upload an image (video) up to 6 megabytes. The following file formats are supported: tiff, pjp, pjpeg, jfif, tif, gif, svg+xml, bmp, png, jpeg, svgz, jpg, webp, ico, mp4

Dropdown List — a variable that allows you to choose one of the pre-configured values set when creating the variation.

Color Palette — a variable that allows you to choose a color from the palette or specify it in HEX or RGB formats. You can also select the color transparency level.

Number — a variable that allows you to enter any number. When configuring the variable, you can set the maximum and minimum allowable values.

Recommendation Strategy — a variable that allows you to choose any of the recommendation strategies created in the section.

CSS Selector — a variable that allows you to enter an arbitrary CSS selector.

Social Proof Data (Product Performance) — a variable that returns Social Proof data for a product. The variable will only return data on the product page. It will provide information on sales or views of the product for the selected period. Available periods: day, two days, week, two weeks, month.

Grouping Variables

Variables can be grouped for convenience. Variable groups can be collapsed and expanded in the interface. A new variable group is created by clicking the "+ Variables Group" button.

For a group, you can configure the name, color, and also check the variables that will be added to it.

Settings for the created group can be managed by clicking on the button with switches that appears when you hover over the group name.