Working with Pages in Wingify

Overview

When you’re in an online business, you tend to run a lot of experiments on your website to improve the conversion rate. In due course, you often would have certain pages on your website involved in different experiments. To run such campaigns, you might need to specify the web pages over and over again.

To break this monotony and save time, Wingify follows this mantra: “Reuse, reduce, and repurpose”. With Wingify Pages, you can reuse the same URLs multiple times, reduce your efforts in repeating things, and repurpose the same URLs to specify the campaign and metric URLs. Pages simplify your task by creating groups wherein you can collate the URLs that would be repeatedly used. You can use these Pages to configure your campaign and metric URLs. Not just once, you can keep reusing them as long as they are required for your experiments.

Let’s say you’re an online furniture retailer looking to display a clearance offer for couches. Now, you can run a campaign for the same, wherein you can create a Page for couches by grouping relevant URLs together. Not just that - you can even use this Page for metrics and track specific events. For example, you can use the same Page to create a metric, wherein you can track the page visits on that webpage or track the number of clicks on the ‘Add-to-cart’ CTA button.

While this is happening, you can parallelly run another campaign displaying an offer for indoor furniture and create another Page for the same. You can then add the Page for couches under this to further simplify your effort. Likewise, you can create several Pages for each segment of your products to be used repetitively across campaigns - saving time and minimizing effort.

Create Pages in Wingify

Let’s consider that you are running an online furniture store and you’re looking to run an A/B test campaign to introduce an offer for chairs. In this case, you can create a Page in Wingify, which would comprise the URLs to those webpages for which you’re looking to run the campaign and the one in which you’re looking to apply the variations.

To do so, from the main menu panel, access Configurations > Pages > Create and enter the details in the following fields:

1. Enter the name of the page in the Page Name field.
2. In the Targeting section, select the URL specification option from the dropdown and enter the corresponding input in the field next to it.
3. If you have already created pages before, you can choose to use those pages under the Saved Page section in the dropdown and make necessary modifications to save them as a new Page.
4. You can include or exclude web pages from the page group using the Include page and the Exclude page options, respectively. You can further configure the inclusion and the exclusion of the pages by clicking on the vertical ellipsis and selecting the following options as required.

To get back to the default settings, click Reset to default.

5.  Click Selector Path to match a page based on a CSS selector on the page. To configure the condition that matches the page with the selector path:

   1. Select the comparison operator, Is equal to to include pages where the element is present, or Is not equal to to include pages where it isn't. Enter the selector path in the adjacent field. 

   For example, 

   body > div.main_nav > p:nth-child(2)

   targets the second <p> element inside the main_nav div. You can use this to include pages based on whether that specific element is present on the page.

   2. Set Poll Until: Polling means Wingify repeatedly re-checks the page for the condition, rather than checking only once. Specify how long Wingify should keep checking before it stops:
      • Polling disabled: Evaluates the condition once, without polling.
      • DOM Ready: Polling ends once the HTML is fully loaded and parsed. This is the default.
      • Condition is true: Polls continuously until the condition evaluates true.
   3. To add another condition, click Selector Path again. 
   4. Choose And or Or to specify how the conditions should be evaluated together:
      • Or (default): The page matches if at least one selector condition is met.
      • And: The page matches only if all selector conditions are met.

6. Optionally, click JS Code to match a page using your own JavaScript logic. The script checks a condition on the page and returns whether the page matches. To configure a JS Code condition:

   1. Add your script inside the provided function without changing its syntax. The function must return a boolean value: true if the page matches the condition, or false if it does not match the condition.

      For example, to run your campaign only when the URL path contains checkout, you can use:

      function() { 
      return window.location.pathname.includes('/checkout'); 
      }

   2. Set Poll Until to specify when Wingify should stop polling for the condition to be met. The same three options described under Selector Path apply here: Polling disabled, DOM Ready, and Condition is true.
   Important: Selector Path and JS Code conditions are available only for accounts created on or after June 14, 2026. For accounts created before June 14, 2026, these condition types are not available.
7. In the Default URL field, enter the URL of the webpage that you want to load by default inside the editor, previews, and heatmaps. Wingify, by default, uses the campaign URL to load inside the editor. This will eventually be used to load the previews, screenshots, and heatmap. However, for the specific example, since we have set the Page URL pattern as https://www.examplefurniturestore.com/indoor/chairs* to include all the chairs-related URLs, Wingify cannot load all those URLs at once inside the editor. For this, you may specify https://www.examplefurniturestore.com/indoor/chairs as the default URL to load inside the editor, previews, and the heatmap mode.
8. You can add a description to the pages for reference. To do so, click on Add description and enter the description in the Description field.
9. Once done, click Create. The created page appears on the left side.

You can click on the created Page and view the corresponding details in the respective tabs as follows:

Manage Pages in Wingify

Once a Page is created, you can modify, archive, or clone the same based on your need. To do so, click on the Page that you wish to work on and perform the required action as follows:

• To Edit- Click on the vertical ellipsis (⋮) on the top-right, select the Edit option, make the required changes, and click Save.

  Attention: Do not edit the Pages that are employed in any running campaign, violating which, affects the campaign result data.
• To Clone - Click on the vertical ellipsis (⋮) on the top-right, select the Clone option, apply the required changes, and click Create. The cloned Page appears on the left.
• To Archive - Click on the vertical ellipsis (⋮) on the top-right and select the Archive option. In the Archive Page popup that appears, click Archive.

The archived Page is hidden from the list of Pages. To view them, select the Show archived pages option at the bottom of the list of Pages.

Use Pages in Wingify

Now that you have created your Page for chairs, you can use the same in your A/B test campaign for the following while creating it:

• Configuring the Campaign URLs
• Configuring the Metric URLs

For the specific example, you would want to display your offer on the chairs-related webpages on your website and check the number of visitors that have used this offer and made purchases. To do that, you can use the “Promotion for Chairs'' Page to specify the campaign URLs and create a variation with specific offers on chairs. To track the conversion rate, i.e., the purchases made using the offer, you can track the clicks on the Add-to-cart CTA button present on these URLs on which the campaign is running. Based on this scenario, let’s explore how you can configure the campaign and metric URL setup.

Configure the Campaign URLs

Upon clicking the Create button on the A/B Test dashboard, a new campaign creation page appears. In the Pages section, you can choose to specify the URL of the webpage or perform the following steps to apply a saved Page while creating an A/B test campaign:

1. In the dropdown corresponding to Include pages where…, select a saved page under the Saved Page section.
2. Based on your need, you can include or exclude any saved page or a URL using the Include page and the Exclude page options.
3. The Editor URL field will automatically populate the pre-configured URL. However, if you wish to apply your variations on a different webpage, you can enter the corresponding URL of the webpage that you want.
4. If this Page setup is to be repeated in your future campaigns, you can choose to save it by clicking on Save for future use at the top-right.
5. Once done, click NEXT and continue to create your variations.

Configure the Metric URLs

You can use your Pages while configuring your Metrics, which have the following events with the event property as Page URL or Target URL.

• Click
• Page visit
• Form submit
• Engagement

Referring to the ‘Promotion for Chairs’ Page example, to track the number of purchases made using the offer, you can create a metric to track the same by tracking the clicks on the Add-to-cart CTA button.

To do so, you can create a metric by following the steps mentioned here. To define the events for the metric, perform the below steps:

You can select the definition as If an event is triggered if you just want to track if the button was clicked or Number of times an event is triggered if you want to track the count of the clicks made on that button.

1. Select Click as the event.
2. Click +where… and select Page URL.
3. In the subsequent dropdown, select the Saved Page you created for the chairs.
4. Now, click where… and choose Selector Path to enter the CSS selector path of the Add-To-Cart CTA button.
5. You can choose to add a description by clicking Add description.
6. Once done, click Create.

Now, the metric is ready to track the CTA clicks made in the chairs section.