This article covers the following:

• Overview
• Creating Variables using Visual Editor
  • Javascript Variable
  • Event-based Variable
• Applying Variables in Wingify
  • Inserting a Variable using the Edit Element Operation
  • Inserting a Variable using the Edit HTML Operation
  • Inserting a Function using the Edit HTML Operation
  • Using Variables in Widget Triggers
  • Using Variables in Pre-Segmentation

Overview

Before you start configuring Personalized Text on your Website using Wingify, we recommend you go through these articles:

• Working With Personalized Text in Wingify
• Social Proof and Urgency Messaging in Wingify
• Variables Supported By Wingify Editor for Personalized Text

In Wingify, when you create a campaign using the Editor, the variables can be declared and introduced as part of the Edit element and Edit HTML operations. To declare a new variable using either of these operations, click on the (x) icon ( refer to the image below) and select the Declare a new variable to declare a new variable.

Create Variables using Visual Editor

Types of variables

Javascript variable

Variable Name

In this field, enter a unique variable you want to work with. Ensure that the casing of this variable matches the one present on your website.

Label

In this field, enter a label that helps you quickly identify your variable. This is only for your reference and does not affect how the variable is used.

Default value

This is the fallback value which is used if the variable you declared is not available when the campaign executes. Wingify will use this value instead of showing a blank value. For example, a website greets its visitors with their first name. Here, if the first name is not available, a default value of ‘there’ can help. So when the name is not available, it will simply read, ‘Hi there!’

As soon as you enter the default value, you will see a custom script in the Script section generated automatically.

Script

If the variable is present in the window object, you do not have to provide any script; Wingify will automatically generate the script to pick it up and use it to modify the text accordingly. However, if the variable needs to be picked up from another location, such as a local object in the window or a cookie, you must add the script to get the variable.

For example, to get the status of whether a user has completed onboarding (with the key- ‘onboardingComplete’ from the local storage), you can use a script like the one that follows:

function() {
return window.localStorage.getItem(‘onboardingComplete’);
}

Global

A variable can be applied to different campaigns. However, any modification in the variable definition does not reflect in the existing campaigns that are using it. It can only be applied to new campaigns.

To have the changes reflected in all the existing campaigns, a global variable should be used.

A global variable is one, where the modifications applied to the variable definition will reflect in all the campaigns that are using it, irrespective of their running state. To create a global variable, go to Account > Campaign Settings section, turn on the Global Variable toggle switch in the variable creation dialog.

Event-based variable

Variable Name

In this field, enter a unique variable you want to work with. Ensure that the casing of this variable matches the one present on your website.

Label

In this field, enter a label that helps you quickly identify your variable. This is only for your reference and does not affect how the variable is used.

Visitors who performed

Click the dropdown. The My Events tab lists all the custom events created in your account. Select an event that will be used in the variable's calculation. Click + and where to specify the event property. Select the event property from the dropdown to filter the visitors. You can provide the property’s value in three different ways:

• Manual Input - This method can be used when you want to filter events for a hard-coded property value. For example, you created a variation to show the total unique visitors who purchased the Pro Personalize plan, for that variable is created to get, then you can use manual input to enter plan id associated with that plan.
   
• On-page variable - This method is used if you have added the variable in a campaign that is running on multiple pages, and the variable value should change according to the page visit. For example, a variable is created to get the total unique visitors who purchased the plan for the currently viewed plan page. In this case, the system requires the plan_id to be identified upon the visitor's landing on that page. Using this option, you can provide the JavaScript variable on the plan page that returns the plan_id value.
   
• Event - The use case is the same as that for an on-page variable. Here, you can provide the plan_id from the same custom event as used to create the variable or any other custom event that has the plan_id (e.g., plan_id property within a planViewed event). Make sure that this event is fired every time before the variation changes are applied.

In time period(days)

Specify the time window in days over which the event data should be aggregated.

Variable will return

Select the desired aggregation type from the dropdown based on your use case.

• Unique Visitors - Returns the total count of distinct visitors that fulfill the event criteria within the set time window. This ensures each unique visitor associated with the event is counted only once, regardless of how many times they performed the action.
• Event totals - Returns the absolute number of times the selected event was triggered, fulfilling the event criteria within the set time window.
• Value of an event property - Returns the summary value from a designated property found within your filtered event data. You can use this for those events that involve properties with numerical values. To apply this, you need to define the event property and its corresponding value type (Sum, Average, Max, Min, First value, and Last value). For instance, you could get the 'Total quantity of items purchased' using per visitor for property quantity. This will give the sum of quantity for every visitor.

Event-based variables will be created on the account level as well. You can manage all the declared variables from the Account > Campaign Settings section. Here, you can even declare new variables and modify existing variables.

Applying Variables in Wingify

Inserting Variables in Text Elements Using the Wingify Editor

For any text element present on your webpage, there are two ways by which you can insert variables:

1. Using the Edit Element operation
2. Using the Edit HTML operation

Inserting a Variable Using the Edit Element Operation

To insert a variable using the Edit Elements operation in Wingify editor:

Procedure

1. Log in to your Wingify account.
2. Select a test type you want to work with, say A/B.
3. To create a new campaign, click Create.
4. Enter the necessary details on the new campaign page, and click Next.
5. In the Wingify editor, click on the text element to insert the personalized text and choose the Edit Element option.
6. In the Text field, look for an icon represented by (x) and click on it. The list of variables that can be used in the element appears.
7. To insert a variable in the selected text, select any variable from the available options or declare a new variable. (Refer to the image below).
8. The image below depicts that the text has been modified:
   1. To show the value of the variable ‘firstName’ as a form of salutation to a logged-in user.
   2. To show the value of the variable for displaying the total number of products purchased.

Inserting a Variable Using the Edit HTML Operation

To insert a variable using the Edit HTML operation in the Wingify editor:

Procedure

1. Log in to your Wingify account.
2. From the panel on the left, go to Testing.
3. Select a test type you want to work with, say A/B.
4. To create a new campaign, click Create.
5. Enter the necessary details on the new campaign page, and click Next.
6. In the Wingify editor, click on the text element to insert the personalized text and choose the Edit HTML option.
7. From the top right corner of the HTML dialog, click on the (x) icon to add a variable.
8. To insert a variable in the selected text, select any variable from the available options or declare a new variable. Similar to the Edit Element operation, this text is now modified
   1. To show the value of the ‘firstName’ variable when a logged-in visitor visits the homepage.
   2. To show the value of the variable for displaying the total number of products purchased.

Inserting a Function Using the Edit HTML Operation

Using the Edit HTML operation of the Wingify editor, you can insert some essential functions into the HTML directly. These include conditional statements like IF, ELSE IF, and loops like FOR, DO, and DO WHILE. To insert these functions, perform this:

Procedure

1. Log in to your Wingify account.
2. Select a test type you want to work with, say A/B.
3. To create a new campaign, click Create.
4. Enter the necessary details on the new campaign page, and click Next.
5. In the Wingify editor, click on the text element to insert the personalized text and choose the Edit HTML option.
6. From the top right corner of the HTML dialog, click on the fx icon to view the list of functions. 
7. Select between ‘Conditional’ statements and ‘Loops’ using the dropdown menu. 
8. You can preview a function on hover. 
9. Click on '+' to insert it at the cursor location in the HTML of the element.

Use Variables in Widget Triggers

Note: Only applicable for event-based variables.

Procedure

1. Log in to your Wingify account.
2. Select a test type you want to work with, say A/B.
3. To create a new campaign, click Create.
4. Enter the necessary details on the new campaign page, and click Next.
5. In the Wingify editor, add a widget on the page.
6. Open Widget settings -> go to Trigger Conditions -> When is widget shown
7. Under Custom Trigger, you will see Variable condition
8. Select the variable with minimum value to trigger the widget shown event.

Using Variables in Pre-Segmentation

NOTE: Only applicable for event-based variables.

Procedure

1. Log in to your Wingify account.
2. Select a test type you want to work with, say A/B.
3. To create a new campaign, click Create.
4. Enter the necessary details on the new campaign page, and click Next.
5. Create the variation/Experience
6. Go to Targets (For Personalise) Audience and Traffic
7. Click Select Visitor Segment for the Experience
8. Select Custom Segment , click the drop-down and navigate to the Variables section.
9. From the first dropdown, select the required Variable.
10. In the second dropdown, select the appropriate operator and enter the desired value in the field next to it. For example, if you want to show the Experience when productPurchase is greater than 1000.
11. Similarly, you can use the Variable in Audience and Traffic as well.

Need more help?

For further assistance or more information, contact Wingify Support.